SitePoint Sponsor

User Tag List

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

    Onmouseover display multiple images

    I want to implement on mouseover display an array of images maybe up to 3 different images then onmouseout the default images is displayed. I've been able to do just single image onmouseover as shown below. How can I implement multiple images?

    <img src="uploads/products/thumbs/glamorous-6989-63824-1-catalog.jpg" onmouseover="this.src='uploads/products/thumbs/1532687679back_dt_0045.jpg'" onmouseout="this.src='uploads/products/thumbs/glamorous-6989-63824-1-catalog.jpg'" />

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by omnipotens View Post
    I want to implement on mouseover display an array of images maybe up to 3 different images then onmouseout the default images is displayed. I've been able to do just single image onmouseover as shown below. How can I implement multiple images?
    One of the first keys to your success here is to separate the JavaScript from your HTML content.

    The easiest way to do this is to give the image a unique identifier so that the script can then easily refer to that image tag. This can be later on removed depending on how the rest of the your images are structured.

    Code html4strict:
    <img id="hover" src="uploads/products/thumbs/glamorous-6989-63824-1-catalog.jpg" />

    Each of those online events gets assigned to a function, so this will result in the same existing behavior, with the ability to extend things to achieve better flexibility.

    Code javascript:
    var img = document.getElementById('hover');
     
    img.onmouseover = function () {
        this.src = 'uploads/products/thumbs/1532687679back_dt_0045.jpg';
    };
    img.onmouseout = function () {
        this.src = 'uploads/products/thumbs/glamorous-6989-63824-1-catalog.jpg';
    };

    Since it's preferable to keep things like image links in with the content, we can easily make the script more generic by using some data tags on the image.

    Code hml4strict:
    <img id="hover" src="uploads/products/thumbs/glamorous-6989-63824-1-catalog.jpg" data-hover="uploads/products/thumbs/1532687679back_dt_0045.jpg" />

    We can now have the script set a data-image value so that it can easily switch back to the original image when the mouseout event occurs, which allows the script to switch the image now without needing to have any URL links in the script.

    Code javascript:
    var img = document.getElementById('hover');
     
    img.setAttribute('data-image', img.src);
    img.onmouseover = function () {
        this.src = this.getAttribute('data-hover');
    };
    img.onmouseout = function () {
        this.src = this.getAttribute('data-image');
    };

    This is now a technique that can be applied for multiple images.

    Where we go from here though depends on what is meant by:

    Quote Originally Posted by omnipotens View Post
    How can I implement multiple images?
    Are you wanting to setup several images so that only the one that you hover over is the image that changes?
    or, are you wanting to hover over an image and have several other images change at the same time?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the lead.

    What I meant is this. I want when I hover, up to 3 other instances of the same product tween across and onmuseout the default image is displayed again. Please can you guide me on how to achieve it.

  4. #4
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post

    Code javascript:
    var img = document.getElementById('hover');
     
    img.setAttribute('data-image', img.src);
    img.onmouseover = function () {
        this.src = this.getAttribute('data-hover');
    };
    img.onmouseout = function () {
        this.src = this.getAttribute('data-image');
    };
    After implementing this, I get this error in my error console

    Code:
    Error: TypeError: img is null
    What could be wrong?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by omnipotens View Post
    What could be wrong?
    What could be wrong is that the script has not been placed at the end of the body. That is the best location for virtually all scripts nowdays.

    Code html4strict:
    <html>
    <head>
       ...
    </head>
    <body>
        ...
    <script src="script.js"></script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks as placing it at the end of the body worked however,I fell into another challenge.

    It works only for the first image in the row. Other images don't hover. How do I get it to work for every other image assuming 50 images are on display?

    Thanks once again for your time and help.


    Quote Originally Posted by paul_wilkins View Post
    What could be wrong is that the script has not been placed at the end of the body. That is the best location for virtually all scripts nowdays.

    Code html4strict:
    <html>
    <head>
       ...
    </head>
    <body>
        ...
    <script src="script.js"></script>
    </body>
    </html>


Tags for this Thread

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
  •