Image Swap Issue???

Mdiaz · Nov 7, 2002

I think I've been cursed from javascipt because I am almost always unable to run even the simplest of routines. I will now publicly profess my incompetence in this langauge. I can not get the rollovers to work. It so simple yet I can't figure it. Please help.

I pasted whole page just incase I boned it elsewhere.

<%if session("XXXXXXX&quot

<> "XX" Then
response.redirect "/index.asp"
End If%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="description" CONTENT="Your one stop shop for all your award needs. We manufacture and sell trophies, medals, glass etchings,
plaques and much more.">
<META NAME="keywords" CONTENT="trophies, awards, medals">
<html>
<head>
<title>XXXXXXXXX</title>
</head>
<body background="/graphics/Bmarble3.jpg">


<table width="550" align="center">
<tr>
<td>
<H2 align="center">Awards Admin Page</H2>
<hr>
<div align="center"><P><a href="/admin/Add_Award.asp" onmouseover="rollover.scr='CAtext.gif';" onMouseOut="rollover.scr='text.gif';"
><img src="/graphics/CreateAward.gif" alt="" width="200" height="50" border="0"></a></P></div>

<div align="center"><P>
<a href="/admin/Edit_Award.asp" onmouseover="rollover.scr='EAtext.gif';" onMouseOut="rollover.scr='text.gif';">
<img src="/graphics/EditAward.gif" alt="" width="200" height="50" border="0"></a>
</P></div>
<div align="center"><P>
<a href="/admin/AdminLU.asp" onmouseover="rollover.scr='TUtext.gif';"
onMouseOut="rollover.scr='text.gif';" >
<img src="/graphics/TableUpdate.gif" alt="" width="200" height="50" border="0"></a>
</P></div>
</td>
<td>
<img name="rollover" src="text.gif" alt="" width="250" height="200" border="0" >
</td>
</tr>

</table>
<CENTER>
<p><%Call AdminFooter %></p>
</CENTER>
</body>
</html>

Craigieboy · Nov 7, 2002

Don't panic my friend! Here's a simple rollover that's sure to work every time.

Insert this code within the <head> tags of your page.

Code:

<script language=&quot;JavaScript&quot;>
var imagesLoaded = false;

but1_over = new Image(); but1_over.src = &quot;images/button_on.gif&quot;;
but1_out = new Image(); but1_out.src = &quot;images/button_off.gif&quot;;

imagesLoaded = true;

function imgOverOne(which){
	if(imagesLoaded){
eval('document.but'+which+'.src = but'+which+'_over.src'); 
	}
}

function imgOutOne(which){
	if(imagesLoaded){
eval('document.but'+which+'.src = but'+which+'_out.src');
	}
}
</script>

... and when you wish to create a rollover link insert the onmouseover onmouseout within the <a> tag. Remember to also add an 'id' to your image.

Code:

<a onmouseover=imgOverOne(1); onmouseout=imgOutOne(1); href=&quot;my_page.asp&quot;><img id=&quot;but1&quot; name=&quot;but1&quot; border=&quot;0&quot; src=&quot;images/button_off.gif&quot;></a>

When you want to add more buttons replace all the 1's with 2's, 3's etc...

Hope this helps!
Craig

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Image Swap Issue???

Mdiaz

Programmer

Craigieboy

Programmer

Similar threads

Part and Inventory Search

Sponsor