Search code examples
javascripthtmlmouseoverrollover

What function to use to show 2 images when you pass your mouse over it?

I'm trying to make my header looks like this: http://wareztuga.ws/index.php and i was wondering how they managed to do that when we pass over the home bottum it flashes.

I know we need to have two images for that result but i need the funcion.

Solution

  • There are many approaches to implementing an image rollover. Here's a very basic approach:

    <html>
<head>
  <title>rollover demo</title>
  <script type="text/javascript">
    function swap(element, image) {
      element.src = image;
    }
  </script>
</head>
<body>
  <img src="home_normal.png" onmouseover="swap(this, 'home_rollover.png');" onmouseout="swap(this, 'home_normal.png');"/>
  <img src="about_normal.png" onmouseover="swap(this, 'about_rollover.png');" onmouseout="swap(this, 'about_normal.png');"/>
</body>
</html>

    A more preferable method would be to use jQuery or some other library that keeps the HTML free of JavaScript code. You'll find many, many different ways to do it if you Google "javascript image rollover" or "jquery image rollover".