argghh rollovers and html

Soldato
Joined
2 Oct 2004
Posts
4,362
Location
N.W London
please can someone put me out of my misery and tell why this simple image rollover does not work?

if i delete everything and keep the first three lines it works, if i add the rest of the code for remaining buttons it doesnt

<div id="Button_Menu">
<a href="index.html" ONMOUSEOVER='rollover.src="Images/navbuttons/homebttn_rollover.gif"'ONMOUSEOUT='rollover.src="Images/navbuttons/homebttn.gif"'><center><img src="Images/navbuttons/homebttn.gif" border="0" name="rollover"></center></a>
<a href="about.html" ONMOUSEOVER='rollover.src="Images/navbuttons/About_Us_rollover_bttn"' ONMOUSEOUT='rollover.src="Images/navbuttons/About_Us_bttn.gif"'><img src="Images/navbuttons/About_Us_bttn.gif" border="0" name="rollover"></a>
<a href="tutorials.html" ONMOUSEOVER='rollover.src="Images/navbuttons/Tutorials_rollover_bttn.gif"' ONMOUSEOUT='rollover.src="Images/navbuttons/Tutorials_bttn.gif"'><img src="Images/navbuttons/Tutorials_bttn.gif" border="0" name="rollover"></a>
<a href="protection.html" ONMOUSEOVER='rollover.src="Images/navbuttons/Protection_rollover_bttn.gif"' ONMOUSEOUT='rollover.src="Images/navbuttons/Protection_bttn.gif"'><img src="Images/navbuttons/Protection_bttn.gif" border="0" name="rollover"></a>
<a href="networking.html" ONMOUSEOVER='rollover.src="Images/navbuttons/Networking_rollover_bttn.gif"' ONMOUSEOUT='rollover.src="Images/navbuttons/Networking_bttn.gif"'><img src="Images/navbuttons/Networking_bttn.gif" border="0" name="rollover"></a>
<a href="prices.html" ONMOUSEOVER='rollover.src="Images/navbuttons/Prices_Rollover_bttn.gif"' ONMOUSEOUT='rollover.src="Images/navbuttons/Prices_bttn.gif"'><img src="Images/navbuttons/Prices_bttn.gif" border="0" name="rollover"></a>
<a href="service_package.html" ONMOUSEOVER='rollover.src="Images/navbuttons/Service_Packages_Rollover_Bttn.gif"' ONMOUSEOUT='rollover.src="Images/navbuttons/Service_Packages_Bttn.gif"'><img src="Images/navbuttons/Service_Packages_Bttn.gif" border="0" name="rollover"></a>
<a href="data_recovery.html" ONMOUSEOVER='rollover.src="Images/navbuttons/data_recovery_ROLLOVER_bttn.gif"' ONMOUSEOUT='rollover.src="Images/navbuttons/data_recovery_bttn.gif"'><img src="Images/navbuttons/data_recovery_bttn.gif" border="0" name="rollover"></a>
<a href="contact_us.html" ONMOUSEOVER='rollover.src="Images/navbuttons/Contact_Us_RollOver_bttn.gif"' ONMOUSEOUT='rollover.src="Images/navbuttons/Contact_Us_bttn.gif"'><img src="Images/navbuttons/Contact_Us_bttn.gif" border="0" name="rollover"></a>
</div>

thanks
 
in your IMG tag, the name="rollover" attribute. The name you give to an element should be unique to that element. i.e. name="rollover1", and for the next image, name="rollover2" etc. You will have to update the MOUSEOUT and MOUSEOVER code to refer to the correct image name too.
 
still dont work:(

<div id="Button_Menu">
<a href="index.html"

ONMOUSEOVER1='rollover1.src="Images/navbuttons/homebttn_rollover.gif"'ONMOUSEOUT1='rollover.src="Images/navbuttons/homebttn.gif"'><center><img

src="Images/navbuttons/homebttn.gif" border="0" name="rollover1"></center></a>
<a href="about.html" ONMOUSEOVER2='rollover.src="Images/navbuttons/About_Us_rollover_bttn"'

ONMOUSEOUT2='rollover2.src="Images/navbuttons/About_Us_bttn.gif"'><img src="Images/navbuttons/About_Us_bttn.gif" border="0" name="rollover2"></a>
<a href="tutorials.html" ONMOUSEOVER3='rollover.src="Images/navbuttons/Tutorials_rollover_bttn.gif"'

ONMOUSEOUT3='rollover3.src="Images/navbuttons/Tutorials_bttn.gif"'><img src="Images/navbuttons/Tutorials_bttn.gif" border="0" name="rollover3"></a>
<a href="protection.html" ONMOUSEOVER4='rollover.src="Images/navbuttons/Protection_rollover_bttn.gif"'

ONMOUSEOUT4='rollover4.src="Images/navbuttons/Protection_bttn.gif"'><img src="Images/navbuttons/Protection_bttn.gif" border="0" name="rollover4"></a>
<a href="networking.html" ONMOUSEOVER5='rollover.src="Images/navbuttons/Networking_rollover_bttn.gif"'

ONMOUSEOUT5='rollover5.src="Images/navbuttons/Networking_bttn.gif"'><img src="Images/navbuttons/Networking_bttn.gif" border="0" name="rollover5"></a>
<a href="prices.html" ONMOUSEOVER6='rollover.src="Images/navbuttons/Prices_Rollover_bttn.gif"'

ONMOUSEOUT6='rollover6.src="Images/navbuttons/Prices_bttn.gif"'><img src="Images/navbuttons/Prices_bttn.gif" border="0" name="rollover6"></a>
<a href="service_package.html" ONMOUSEOVER7='rollover.src="Images/navbuttons/Service_Packages_Rollover_Bttn.gif"'

ONMOUSEOUT7='rollover7.src="Images/navbuttons/Service_Packages_Bttn.gif"'><img src="Images/navbuttons/Service_Packages_Bttn.gif" border="0"

name="rollover7"></a>
<a href="data_recovery.html" ONMOUSEOVER8='rollover.src="Images/navbuttons/data_recovery_ROLLOVER_bttn.gif"'

ONMOUSEOUT8='rollover8.src="Images/navbuttons/data_recovery_bttn.gif"'><img src="Images/navbuttons/data_recovery_bttn.gif" border="0" name="rollover8"></a>
<a href="contact_us.html" ONMOUSEOVER9='rollover.src="Images/navbuttons/Contact_Us_RollOver_bttn.gif"'

ONMOUSEOUT9='rollover9.src="Images/navbuttons/Contact_Us_bttn.gif"'><img src="Images/navbuttons/Contact_Us_bttn.gif" border="0" name="rollover9"></a>
</div>
 
<a href="index.html" ONMOUSEOVER='rollover1.src="Images/navbuttons/homebttn_rollover.gif"'ONMOUSEOUT='rollover1.src="I mages/navbuttons/homebttn.gif"'><center><img src="Images/navbuttons/homebttn.gif" border="0" name="rollover1"></center></a>
<a href="about.html" ONMOUSEOVER='rollover2.src="Images/navbuttons/About_Us_rollover_bttn"' ONMOUSEOUT='rollover2.src="Images/navbuttons/About_Us_bttn.gif"'><img src="Images/navbuttons/About_Us_bttn.gif" border="0" name="rollover2"></a>

etc etc :)
 
now only the first one works??????????

<div id="Button_Menu">
<a href="index.html" ONMOUSEOVER='rollover1.src="Images/navbuttons/homebttn_rollover.gif"'ONMOUSEOUT

='rollover1.src="Images/navbuttons/homebttn.gif"'><center><img src="Images/navbuttons/homebttn.gif" border="0" name="rollover1"></center></a>
<a href="about.html" ONMOUSEOVER2='rollover2.src="Images/navbuttons/About_Us_rollover_bttn"'

ONMOUSEOUT2='rollover2.src="Images/navbuttons/About_Us_bttn.gif"'><img src="Images/navbuttons/About_Us_bttn.gif" border="0" name="rollover2"></a>
<a href="tutorials.html" ONMOUSEOVER3='rollover3.src="Images/navbuttons/Tutorials_rollover_bttn.gif"'

ONMOUSEOUT3='rollover3.src="Images/navbuttons/Tutorials_bttn.gif"'><img src="Images/navbuttons/Tutorials_bttn.gif" border="0" name="rollover3"></a>
<a href="protection.html" ONMOUSEOVER4='rollover4.src="Images/navbuttons/Protection_rollover_bttn.gif"'

ONMOUSEOUT4='rollover4.src="Images/navbuttons/Protection_bttn.gif"'><img src="Images/navbuttons/Protection_bttn.gif" border="0" name="rollover4"></a>
<a href="networking.html" ONMOUSEOVER5='rollover5.src="Images/navbuttons/Networking_rollover_bttn.gif"'

ONMOUSEOUT5='rollover5.src="Images/navbuttons/Networking_bttn.gif"'><img src="Images/navbuttons/Networking_bttn.gif" border="0" name="rollover5"></a>
<a href="prices.html" ONMOUSEOVER6='rollover6.src="Images/navbuttons/Prices_Rollover_bttn.gif"'

ONMOUSEOUT6='rollover6.src="Images/navbuttons/Prices_bttn.gif"'><img src="Images/navbuttons/Prices_bttn.gif" border="0" name="rollover6"></a>
<a href="service_package.html" ONMOUSEOVER7='rollover7.src="Images/navbuttons/Service_Packages_Rollover_Bttn.gif"'

ONMOUSEOUT7='rollover7.src="Images/navbuttons/Service_Packages_Bttn.gif"'><img src="Images/navbuttons/Service_Packages_Bttn.gif" border="0"

name="rollover7"></a>
<a href="data_recovery.html" ONMOUSEOVER8='rollover8.src="Images/navbuttons/data_recovery_ROLLOVER_bttn.gif"'

ONMOUSEOUT8='rollover8.src="Images/navbuttons/data_recovery_bttn.gif"'><img src="Images/navbuttons/data_recovery_bttn.gif" border="0" name="rollover8"></a>
<a href="contact_us.html" ONMOUSEOVER9='rollover9.src="Images/navbuttons/Contact_Us_RollOver_bttn.gif"'

ONMOUSEOUT9='rollover9.src="Images/navbuttons/Contact_Us_bttn.gif"'><img src="Images/navbuttons/Contact_Us_bttn.gif" border="0" name="rollover9"></a>
</div>
 
Why are you even doing it this way?
You could do this very simply with a list nav + CSS Sprites and it wouldn't rely on js at all. Would also keep your html nice and tidy and use far less code.
 
do you have an example tripnologist??

so far i have this:

but its all over the place now

<div id="Button_Menu">
<a href="index.html" ONMOUSEOVER='rollover1.src="Images/navbuttons/homebttn_rollover.gif"'ONMOUSEOUT='rollover1.src=" I mages/navbuttons/homebttn.gif"'><img

src="Images/navbuttons/homebttn.gif" border="0" name="rollover1"></a>
<a href="about.html" ONMOUSEOVER='rollover2.src="Images/navbuttons/About_Us_rollover_bttn"'

ONMOUSEOUT='rollover2.src="Images/navbuttons/About_Us_bttn.gif"'><img src="Images/navbuttons/About_Us_bttn.gif" border="0" name="rollover2"></a>
<a href="tutorials.html" ONMOUSEOVER='rollover3.src="Images/navbuttons/Tutorials_rollover_bttn.gif"'

ONMOUSEOUT='rollover3.src="Images/navbuttons/Tutorials_bttn.gif"'><img src="Images/navbuttons/Tutorials_bttn.gif" border="0" name="rollover3"></a>
<a href="protection.html" ONMOUSEOVER='rollover4.src="Images/navbuttons/Protection_rollover_bttn.gif"'

ONMOUSEOUT='rollover4.src="Images/navbuttons/Protection_bttn.gif"'><img src="Images/navbuttons/Protection_bttn.gif" border="0" name="rollover4"></a>
<a href="networking.html" ONMOUSEOVER='rollover5.src="Images/navbuttons/Networking_rollover_bttn.gif"'

ONMOUSEOUT='rollover5.src="Images/navbuttons/Networking_bttn.gif"'><img src="Images/navbuttons/Networking_bttn.gif" border="0" name="rollover5"></a>
<a href="prices.html" ONMOUSEOVER='rollover6.src="Images/navbuttons/Prices_Rollover_bttn.gif"'

ONMOUSEOUT='rollover6.src="Images/navbuttons/Prices_bttn.gif"'><img src="Images/navbuttons/Prices_bttn.gif" border="0" name="rollover6"></a>
<a href="service_package.html" ONMOUSEOVER='rollover7.src="Images/navbuttons/Service_Packages_Rollover_Bttn.gif"'

ONMOUSEOUT='rollover7.src="Images/navbuttons/Service_Packages_Bttn.gif"'><img src="Images/navbuttons/Service_Packages_Bttn.gif" border="0"

name="rollover7"></a>
<a href="data_recovery.html" ONMOUSEOVER='rollover8.src="Images/navbuttons/data_recovery_ROLLOVER_bttn.gif"'

ONMOUSEOUT='rollover8.src="Images/navbuttons/data_recovery_bttn.gif"'><img src="Images/navbuttons/data_recovery_bttn.gif" border="0" name="rollover8"></a>
<a href="contact_us.html" ONMOUSEOVER='rollover9.src="Images/navbuttons/Contact_Us_RollOver_bttn.gif"'

ONMOUSEOUT9='rollover.src="Images/navbuttons/Contact_Us_bttn.gif"'><img src="Images/navbuttons/Contact_Us_bttn.gif" border="0" name="rollover9"></a>
</div>
 
Back
Top Bottom