OnMouseOver Effects Within Content Place Holder When Using Master Pages

On pages that don't use a master page you can use JavaScript to access an object by using it's id. This no longer becomes possible when using master pages since the id of a control within the Content Place Holder is altered to include something along the lines of "ctl00_ContentPlaceHolder1_". To access the controls id we need to use the controls "ClientId" property.

In this example we have placed a mouseover effect on an ImageButton control:

<asp:ImageButton ID="ImgBtn" runat="server" />

The 2 images used are happy.jpg and sad.jpg

The page load code would be:

protected void Page_Load(object sender, EventArgs e)
ImgBtn.ImageUrl = "sad.jpg";
ImgBtn.Attributes.Add("onmouseover", "document.getElementById('" + ImgBtn.ClientID + "').src='happy.jpg'");
ImgBtn.Attributes.Add("onmouseout", "document.getElementById('" + ImgBtn.ClientID + "').src='sad.jpg'");

Hover your mouse over this image to see it change:-

Note that within the page load we still need to set the ImageUrl property of the control otherwise we wont see any image until we hover our mouse over the area.

We can use the same method for the Image control.