onmouseover help

davelearning · January 31, 2011

Hi all, I am relatively new to javascript, hence the basic problem! All I am trying to do is show a different image for a button onmouseover, basically it just has an arrow to show the button is selected.

Here is my code

<script type="text/javascript">
function mouseOver()
{
document.getElementById("home").src ="images/homebuttonselected.gif";
document.getElementById("packages").src ="images/packagebuttonselected.gif";
}

function mouseOut()
{
document.getElementById("home").src ="images/homebutton.gif";
document.getElementById("packages").src ="images/packagebutton.gif";
}
</script>
</head>

<body>
<div id="main">
<div id="links"><img src="images/homebutton.gif" class="buttons" id="home" onmouseover="mouseOver()" onmouseout="mouseOut()" />
<img src="images/packagebutton.gif" class="buttons" id="packages" onmouseover="mouseOver()" onmouseout="mouseOut()" /></div>
</div>
</body>
</html>

My problem is that when one button is highlighted, both images change to there onmouseover state, how to I remedy this so each one is treated individually?

Thanks

davelearning · January 31, 2011

Ok I have noticed I can do it like this:

<script type="text/javascript">
function homeOver()
{
document.getElementById("home").src ="images/homebuttonselected.gif";

}

function homeOut()
{
document.getElementById("home").src ="images/homebutton.gif";

}

function packageOver()
{

document.getElementById("packages").src ="images/packagebuttonselected.gif";
}

function packageOut()
{

document.getElementById("packages").src ="images/packagebutton.gif";
}

function purchaseOver()
{

document.getElementById("purchase").src ="images/purchasebuttonselected.gif";
}

function purchaseOut()
{

document.getElementById("purchase").src ="images/purchasebutton.gif";
}

</script>
</head>

<body>
<div id="main">
<div id="links">
<img src="images/homebutton.gif" class="buttons" id="home" onmouseover="homeOver()" onmouseout="homeOut()" />

<img src="images/packagebutton.gif" class="buttons" id="packages" onmouseover="packageOver()" onmouseout="packageOut()" />

<img src="images/purchasebutton.gif" class="buttons" id="purchase" onmouseover="purchaseOver()" onmouseout="purchaseOut()" /></div>
</div>
</body>
</html>

But is their a simpler way?

.josh · January 31, 2011

looks like everything is mostly consistently named, so you can reduce it to this:

function swapImages(that) {
  that.src =  (that.src.indexOf('buttonselected')>-1) ? ("images/"+that.id+"button.gif") : ("images/"+that.id+"buttonselected.gif");
}

<img src="images/homebutton.gif" class="buttons" id="home" onmouseover="swapImages(this)" onmouseout="swapImages(this)" />

<img src="images/packagebutton.gif" class="buttons" id="packages" onmouseover="swapImages(this)" onmouseout="swapImages(this)" />

<img src="images/purchasebutton.gif" class="buttons" id="purchase" onmouseover="swapImages(this)" onmouseout="swapImages(this)" />

only thing is that you need to make your id="..." match your image prefix. Some of them don't match. Like id="package" vs. "packagesbuttonselected.gif". Need to either change your id to "packages" or rename your .gif to "packagebuttonselected.gif"

davelearning · January 31, 2011

Wow, Thanks, that is perfect

Sign In

onmouseover help

Recommended Posts

davelearning

Link to comment

Share on other sites

davelearning

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

davelearning

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information