# ASP.Net Image with Javascript



## Dariune (Aug 4, 2005)

Hi all

Im finally teaching myself ASP.NET and am building my first site in it.

Ages ago i created a javascript function to change the URL path of an image.

I have created a MasterPage using VWS and have created the links which display the images.

Problem is, what worked in ASP Classic is not working in ASP.NET and im despite knowing what the problem is, i cannot figure out how to fix it.

The MasterPage links look like this ...


```
<div class="linkbut">
			        <a href="#"
				        onmouseout="button_off('resbut'); return true"
				        onmouseover="button_on('resbut'); return true">
						<asp:image 
							ID="resbut" 
							imageurl="~/App_Themes/MainTheme/Images/resbut_off.jpg" 
							runat="server"
							alt="button"
						/>
				   
			        </a>	
		        &nbsp;&nbsp;&nbsp;	
		        </div>
```
The Javascript to change the image URL is ...


```
if ( document.images )
{
	homebut_on = new Image ( );
	homebut_off = new Image ( );
	servbut_on = new Image ( );
	servbut_off = new Image ( );
	portbut_on = new Image ( );
	portbut_off = new Image ( );
	mebut_on = new Image ( );
	mebut_off = new Image ( );
	resbut_on = new Image ( );
	resbut_off = new Image ( );
  

	homebut_on.src = "Images/homebut_on.jpg";
	homebut_off.src = "Images/homebut_off.jpg";
	servbut_on.src = "Images/servbut_on.jpg";
	servbut_off.src = "Images/servbut_off.jpg";
	portbut_on.src = "Images/portbut_on.jpg";
	portbut_off.src = "Images/portbut_off.jpg";
	mebut_on.src = "Images/mebut_on.jpg";
	mebut_off.src = "Images/mebut_off.jpg";
	resbut_on.imageurl = "~/App_Themes/MainTheme/Images/resbut_on.jpg";
	resbut_off.imageurl = "~/App_Themes/MainTheme/Images/resbut_off.jpg";
}

function button_on ( imgId )
{
  if ( document.images )
  {
    butOn = eval ( imgId + "_on.imageurl" );
    document.getElementById('<%=imgId.ClientID%>').src = butOn;
  }
}

function button_off ( imgId )
{
  if ( document.images )
  {
    butOff = eval ( imgId + "_off.src" );
    document.getElementById(imgId).src = butOff;
  }
}
```
The error i am getting is that ImgId is null no matter if i use the ASP ".Client" or not.

Is anyone able to help?


----------



## Dariune (Aug 4, 2005)

Im guessing its a tough one considering the lack of replies lol


----------



## Dariune (Aug 4, 2005)

Ok i have rewritten the menu rather than cpy my ASP Classic code.

Now when i hover over the button the image dissappears and says Submit Query

On the page is


```
<div class="linkbut">
			        <a href="#">
						<asp:ImageButton 
							ID="resbut" 
							onmouseover="mouseover(this)"
							onmouseout="mouseout(this)" 
							ImageUrl="~/App_Themes/MainTheme/Images/resbut_off.jpg" 
							runat="server"></asp:ImageButton>
				   </a>
			        
		        &nbsp;&nbsp;&nbsp;	
		        </div>
```
The javascript is


```
function mouseover(arg)
    {
    	arg.src = "<%= Page.ResolveUrl('~/App_Themes/MainTheme/Images/resbut_on.jpg')%>";
    }
    
    function mouseout(arg)
    {
    	arg.src = "<%= Page.ResolveUrl('~/App_Themes/MainTheme/Images/resbut_off.jpg')%>";
    }
```


----------



## Dariune (Aug 4, 2005)

Is there really no one who knows how to create rollover images in ASP.NET c# here?

I have now tried 9 different ways and so far none of them have worked. What was simple is ASP Classic is turning into a bit of a nightmare in .NET


----------

