On MouseOver display image? + first post

JavaScript
1

Hi guys, this is my first post on SitePoint.

Let’s get into it.

So I’m a pretty new web designer/developer and I’m working on a website for a client (who may or may not be my Dad) and I want to know how I can display an image when a user mouses over another image and maybe even display one when they click on it.

Not sure if it would be written in CSS or Javascript but i’ve read about the on.MouseOver and on.Click functions so I’m posting this in the Javascript section.

By the way, guys expect a lot of questions from me.

2

Hi there,

Welcome to the forums.

Sure you can display an image when a user mouses over a different image.

First you need a page with two images:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Image hover demo</title>
  </head>

  <body>
    <img id="img1" src="http://fourbeesdigitown.wikispaces.com/file/view/lawyer-lolcat.jpg/156349309/lawyer-lolcat.jpg" />
    <img id="img2" src="http://images.cryhavok.org/d/15548-1/LOLcat+-+Jesus+Cat.jpg" />
  </body>
</html>

Then, let’s hide one of them:

#img2{ display: none }

I’ve done this using CSS, but it might make more sense to do this in JS, so that users with JS disabled see both images.

Then we have to attach onmouseover and onmouseout event handlers to the first image, so that we can do something when the user mouses over it and mouses away from it.

var img1 = document.getElementById("img2"),
		img2 = document.getElementById("img2");
		
img1.onmouseover = function(){ ... }
img1.onmouseout = function(){ ... }

Then we can show and hide the second image accordingly:

img1.onmouseover = function(){
  img2.style.display = "block";
}

img1.onmouseout = function(){
  img2.style.display = "none";
}

Here’s everything together:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Image hover demo</title>
    <style>
      #img2{
        position: fixed;
        right:0;
        bottom:0;
        display: none;
      }
    </style>
  </head>

  <body>
    <img id="img1" src="http://fourbeesdigitown.wikispaces.com/file/view/lawyer-lolcat.jpg/156349309/lawyer-lolcat.jpg" />
    <img id="img2" src="http://images.cryhavok.org/d/15548-1/LOLcat+-+Jesus+Cat.jpg" />

    <script>
      var img1 = document.getElementById("img1"),
          img2 = document.getElementById("img2");

      img1.onmouseover = function(){
        img2.style.display = "block";
      }

      img1.onmouseout = function(){
        img2.style.display = "none";
      }
    </script>
  </body>
</html>

Hope that helps.

3

Pullo:
I’ve done this using CSS, but it might make more sense to do this in JS, so that users with JS disabled see both images.

A javascript hover + hiding the img2 by css (when page is opened) has indeed the disadvantage that if javascript is disabled, the img2 is never visible.

On the other hand, a javascript hover + hiding the img2 by javascript (when page is opened) has the disadvantage that if javascript is disabled, the img2 is always visible.

=======
CSS hover
Therefore I should go for a css hover, then enabled or disabled javascript doesn’t matter.
In this way:

  • You wrap the 2 images in a common container:

    html <div id="images"> <img id="img1" src="images/van4.jpg" alt="" /> <img id="img2" src="images/van5.jpg" alt="" /> </div>
  • By default, the img2 is hidden:

    #img2 { ... display: none; }
  • But when hovered over the container, the img2 is made visible:

    #images:hover #img2 { display: block; }
  • This means: if a hover takes place over the <div id=“images”>, then the <img id=“img2”> (which is inside this container) is displayed. That is the power of the CSS-cascade! :slight_smile:
  • Note: in css, no special measures are needed for the “onmouseout”. If the hover is ended, the display-property falls back to his default (display:none) automatically, and img2 is hidden again.

Test: [U]img-hover-demo-css.htm[/U]

=======
Show / hide by click
In that case it can’t be done by css, for a click by the visitor is a functionality which can only be triggered by javascript:

img1.onclick = function(){
        if (img2.style.display == "none"){
        	img2.style.display = "block";
        }
        else {
        	img2.style.display = "none";
        }
}

Test: [U]img-click-demo-js.htm[/U]

4

Nice one Francky!
Your CSS based solution is to be preferred.