Hi guys,
I have made this simple javascript rollover script. It works great, but its a little long. I was wondering if anyone knew how to shorten it, perhaps by using loops. There certainly is a lot o' repetition in there!
Code:
<script language="JavaScript">
<!-- Rollover generator
pic1on = new Image(122,29)
pic1on.src = "images/mnu_aboutme_on.gif"
pic1off = new Image(122,29)
pic1off.src = "images/mnu_aboutme_off.gif"
pic2on = new Image(112,29)
pic2on.src = "images/mnu_services_on.gif"
pic2off = new Image(112,29)
pic2off.src = "images/mnu_services_off.gif"
pic3on = new Image(127,29)
pic3on.src = "images/mnu_portfolio_on.gif"
pic3off = new Image(127,29)
pic3off.src = "images/mnu_portfolio_off.gif"
pic4on = new Image(166,29)
pic4on.src = "images/mnu_testimonials_on.gif"
pic4off = new Image(166,29)
pic4off.src = "images/mnu_testimonials_off.gif"
pic5on = new Image(157,29)
pic5on.src = "images/mnu_contact_on.gif"
pic5off = new Image(157,29)
pic5off.src = "images/mnu_contact_off.gif"
function menu1on() {
document.menu1.src = pic1on.src;
return true;
}
function menu1off() {
document.menu1.src = pic1off.src;
return true;
}
function menu2on() {
document.menu2.src = pic2on.src;
return true;
}
function menu2off() {
document.menu2.src = pic2off.src;
return true;
}
function menu3on() {
document.menu3.src = pic3on.src;
return true;
}
function menu3off() {
document.menu3.src = pic3off.src;
return true;
}
function menu4on() {
document.menu4.src = pic4on.src;
return true;
}
function menu4off() {
document.menu4.src = pic4off.src;
return true;
}
function menu5on() {
document.menu5.src = pic5on.src;
return true;
}
function menu5off() {
document.menu5.src = pic5off.src;
return true;
}
//-->
</SCRIPT>
I call each function in my <body> like this:
Code:
<a href="portfolio.htm" onmouseover="menu3on()"
onmouseout="menu3off()"><img border="0" name="menu3"
src="images/mnu_portfolio_off.gif" alt="Portfolio" width="127"
height="29"></a>
Thanks a lot,
Wicko3 |
