SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question On MouseOver display image? + first post

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,876
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    <!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:

    Code CSS:
    #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.

    Code JavaScript:
    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:

    Code JavaScript:
    img1.onmouseover = function(){
      img2.style.display = "block";
    }
     
    img1.onmouseout = function(){
      img2.style.display = "none";
    }

    Here's everything together:

    Code:
    <!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. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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 Code:
      <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:
      Code:
      #img2 {
              ...
              display: none;
            }
    • But when hovered over the container, the img2 is made visible:
      Code:
      #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!
    • 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: img-hover-demo-css.htm

    =======
    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:
    Code:
    img1.onclick = function(){
            if (img2.style.display == "none"){
            	img2.style.display = "block";
            }
            else {
            	img2.style.display = "none";
            }
    }
    Test: img-click-demo-js.htm

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,876
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Nice one Francky!
    Your CSS based solution is to be preferred.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •