i had used the following code in master page of asp.net project
<a runat="server" href="home.htm" onmouseover="document.Home_Img.src='Images/home_2.png'"
onmouseout="document.Home_Img.src='Images/home.png'">
<img alt="" src="Images/home.png" name="Home_Img" runat="server" />
</a>
It is working well for all associated webforms in the root directory but not in the sub directory pages. any sugesstion would be respected.
Thnx in advance...
You're using a relative URL Images/home.png for the image location, change it to absolute /Images/home.png:
<a runat="server" href="home.htm" onmouseover="document.Home_Img.src='/Images/home_2.png'"
onmouseout="document.Home_Img.src='/Images/home.png'">
<img alt="" src="/Images/home.png" name="Home_Img" runat="server" />
</a>
Also, this has nothing to do with CSS since you're using old school Javascript mouseovers. I would strongly suggest you change it to something like:
<style>
a.home {
background: url(/Images/home.png) no-repeat;
display: block; /* this may not be correct, depends on the layout */
height: 100px; /* height of image */
text-indent: 9999px;
width: 100px; /* width of image */
}
a.home:hover {
background: url(/Images/home_2.png) no-repeat;
}
</style>
<a class="home" href="home.htm">Home</a>
Put the URL's of your wrapped in the ResolveUrl like so:
<a runat="server" href="<%= this.ResolveUrl("home.htm") %>" onmouseover="document.Home_Img.src='<%= this.ResolveUrl("Images/home_2.png") %>'"
onmouseout="document.Home_Img.src='<%= this.ResolveUrl("Images/home.png") %>'">
<img alt="" src="Images/home.png" name="Home_Img" runat="server" />
</a>
