PDA

View Full Version : rollovers

acslater323
03-01-2006, 08:36 PM
Hey, everyone,

This is my first crack at Javascript. I'm trying to make a simple nav bar with image swaps, but I want as little code in the HTML as possible, and I'm trying to do it mostly through functions.

Can anyone tell me if I'm on the right track, here?

<script type="text/javascript">
function rollover(imgobj)
{
if (img.id='about')
{
img.src='images/about_button_roll.gif'
}
if (img.id='services')
{
img.src='images/services_button_roll.gif'
}
}

function rollout(imgobj)
{
if (img.id='about')
{
img.src='images/about_button.gif'
}
if (img.id='services')
{
img.src='images/services_button.gif'
}
}
</script>
</head>

<body>
<a href="about.htm"><img id="about" src="images/about_button.gif" onMouseOver="rollover(this)" onMouseOut="rollout(this)"/></a>
<a href="services.htm"><img id="services" src="images/services_button.gif" onMouseOver="rollover(this)" onMouseOut="rollout(this)"/> </a>
</body>
</html>
_Aerospace_Eng_
03-01-2006, 08:48 PM
Since you are comparing id values you need to use == and you never used imgobj inside of the functions.
<script type="text/javascript">
function rollover(imgobj)
{
if (imgobj.id=='about')
{
imgobj.src='images/about_button_roll.gif'
}
if (img.id='services')
{
img.src='images/services_button_roll.gif'
}
}

function rollout(imgobj)
{
if (imgobj.id=='about')
{
imgobj.src='images/about_button.gif'
}
if (imgobj.id=='services')
{
imgobj.src='images/services_button.gif'
}
}
</script>
CSS Rollovers (http://bonrouge.com/br.php?page=rollover3) are favored over JS rollovers.
acslater323
03-01-2006, 10:30 PM
CSS rollovers? With images? How?
_Aerospace_Eng_
03-01-2006, 10:43 PM
I posted a link. Read the link.