Linkmenu w/ MouseOver javascript

StackOverflow https://stackoverflow.com/questions/23246347

Question

I have this menu made out of imagelinks on my website and want to have a different MouseOver function on every menuobject, i have tried like this but it always goes for the later script so when i hover start it changes to info. 

<script language="javascript">
  function MouseRollover(start) {
    start.src = "starthover.png";
  }

  function MouseOut(start) {
    start.src = "startidle.png";
  }
</script>
<script language="javascript">
  function MouseRollover(info) {
    info.src = "infohover.png";
  }

  function MouseOut(info) {
    info.src = "infoidle.png";
  }
</script>

and for the links i got this:

<a href="test.html">
  <img src="startidle.png" border="0px"
  onMouseOver="MouseRollover(this)" 
  onMouseOut="MouseOut(this)" />
</a>

<a href="test.html">
  <img src="infoidle.png" border="0px"
  onMouseOver="MouseRollover(this)" 
  onMouseOut="MouseOut(this)" />
</a>

I wonder if there is any way to classify these functions so i can get the same function but different pictures for my menu?

Was it helpful?

Solution

Your 2nd script is overwriting the first one, which means every time you call "MouseRollover" or "MouseOut", your js will go for the 2nd script.

You can work with only one function that will swap you images, no need to have four functions.

<head>
  <script>
    function swapImg(element, img) {
      element.src = img;
    }
  </script>
</head>
<body>
  <a href="#">
    <img src="startidle.png" border="0px" width="150px" 
    onMouseOver="swapImg(this, 'img01.jpg')" 
    onMouseOut="swapImg(this, 'img02.jpg')" />
  </a>

  <a href="#">
    <img src="infoidle.png" border="0px" width="150px" 
     onMouseOver="swapImg(this, 'img03.jpg')" 
     onMouseOut="swapImg(this, 'img04.jpg')" />
  </a>
</body>

Plus, it's "border" instead of "boarder".

OTHER TIPS

You need only one function in your javascript.

Try it:

HTML

<a href="test.html">
<img src="startidle.png" boarder="0px"
onMouseOver="MouseRollover(this, 'starthover.png')" 
onMouseOut="MouseOut(this, 'startidle.png')" /></a>

<a href="test.html">
<img src="infoidle.png" boarder="0px"
onMouseOver="MouseRollover(this, 'infohover.png')" 
onMouseOut="MouseOut(this, 'infoidle.png')" /></a>

JAVASCRIPT

function MouseRollover(obj, image) {
     obj.src = image;
}
function MouseOut(obj, image) {
    obj.src = image;
}

Edit: You could use only one function

function changeImage(obj, image){
    obj.src = image;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top