How to change image with onmouseover in different place that reverts back to default image on the site?

Question

I'm no expert in this so excuse me if this is very basic but I couldn't find answers.

So I want to have navigation section with categories on the left side of the page. Each category is different site, and each site has it's own unique image on it. ex. category1.htm has defaultpic1.jpg, category 2.htm has defaultpic2.jpg, ....

When I hover on link to category2 in the nav sections I want them to change default image on current site to default image on category2, and then onmouseout I want it to go back to the default one.

Also note my images have different dimensions, different height values.

Basically I know I can change the defaultpic source on every page but I want to use the same script which will always know were to look for the default path and just use it, without the need to change the line in every single category.

Sorry if I'm not very clear on that but I try my best.

I have this (removed everything else so I just paste what I need help with):

<html>
<head>
<script type="text/javascript">
          function mouseOverImage2()
{
    document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}  function mouseOverImage3()
{
    document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage()
{
    document.getElementById("catPic").src='???'; //here's what I don't know what to put
}
</script>
</head>
<body>
<div class="nav">
          <ul>
              <li><a href="subcategory2.htm" onmouseover="mouseOverImage2()"
    onmouseout="mouseOutImage()">Subcategory One</a></li>
              <li><a href="subcategory3.htm" onmouseover="mouseOverImage3()"
    onmouseout="mouseOutImage()">Subcategory 2</a></li></ul>
</div>
<div>
              <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
            </div>
</body>
</html>

StuartLC · Answer 1 · 2012-11-22T14:29:05.900

2

You need to store the old image src in a temporary variable, or element somewhere, for example, using a global:

var originalImage;
function mouseOverImage2()
{
    originalImage = document.getElementById("catPic").src; 
    ...

And then restore it on the mouse out:

document.getElementById("catPic").src=originalImage;

Edit

You can cache other properties (height, width) in much the same way. One thing to note is not to mix old-school html height and width attributes with style height and width - this will lead to confusion.

I've update the Fiddle here

edited Nov 22 '12 at 14:29

answered Nov 22 '12 at 12:18

StuartLC

104,537
17
209
285

I really like this approach, but to have it working I needed to delete all width and height values because otherwise the (reverted) default image would display shrunk or enlarged if the hover image was different. Is there a way to still have the width and height values in the code? I care for site to be validated without those parameters will result in not valid page. Thanks a lot for help! – Seb Nov 22 '12 at 13:37
@user1844914 - I've updated the fiddle to keep width + height - just note to use the css style width + height, not the old html attributes. – StuartLC Nov 22 '12 at 14:29

score 2 · Accepted Answer · answered Nov 22 '12 at 12:37

I would hide all the values in data-* attributes, so I could re-use the same functions. For example,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Cats</title>
        <script type="text/javascript">
function mouseOverImage(elm) {
    var img = document.getElementById("catPic");
    img.src = elm.getAttribute('data-cat-image');
    img.style.width = elm.getAttribute('data-cat-width');
    img.style.height = elm.getAttribute('data-cat-height');
}
function mouseOutImage() {
    var img = document.getElementById("catPic");
    img.src = img.getAttribute('data-default-image');
    img.style.width = img.getAttribute('data-default-width');
    img.style.height = img.getAttribute('data-default-height');
}
        </script>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="subcategory2.htm"
                       data-cat-image="images/defaultpic2.jpg" data-cat-width="280px" data-cat-height="420px"
                       onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
                      >Subcategory One</a></li>
                <li><a href="subcategory3.htm"
                       data-cat-image="images/defaultpic3.jpg" data-cat-width="280px" data-cat-height="226px"
                       onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
                      >Subcategory 2</a></li>
            </ul>
        </div>
        <div>
            <img id="catPic" src="images/defaultpic1.jpg" alt=""
                 data-default-image="images/defaultpic1.jpg" data-default-width="280px" data-default-height="420px"
                 width="280" height="420"
                />
        </div>
    </body>
</html>

You should also consider attaching the listeners in JavaScript rather than using on* attributes, as it means you can completely seperate your JavaScript from your HTML.

Thanks a lot, this looks really interesting and it's working great! I don't know what you meant about listeners as I'm really bad coder but I appreciate your help. — Seb, Nov 22 '12 at 14:36
You can read about event listeners [here](https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener). If you've not come across them before you might find them quite interesting as you can have multiple listeners for the same event, etc :) — Paul S., Nov 22 '12 at 15:58

score 1 · Answer 3 · answered Nov 22 '12 at 12:15

you could stash away the default image source in mousein and then restore it in mouseout

<script type="text/javascript">
function mouseOverImage2()
{
    if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
        document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
    document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}  
function mouseOverImage3()
{
    if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
        document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
    document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage(e)
{
    if(typeof(document.getElementById("catPic").defaultSrc) != "undefined")
        document.getElementById("catPic").src= document.getElementById("catPic").defaultSrc;
}
</script>

Thanks but this one doesn't take the original image dimensions and when on onmouseout the default image is shrunk or enlarged to the size of the one replaced by onmouseover. — Seb, Nov 22 '12 at 14:27

score 1 · Answer 4 · answered Nov 22 '12 at 12:22

An addition to the above it may be easier in the long term to just use one function and pass the element no as a parameter. Along these lines

<html>
    <head>
    <script type="text/javascript">
        function mouseOverImage(elementNo){
document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg';document.images['catPic'].style.width='280px';     document.images['catPic'].style.height='420px';;
    }  

    function mouseOutImage(elementNo){
        document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg'; //here's what I don't know what to put
    }
</script>
</head>
<body>
<div class="nav">
          <ul>
              <li><a href="subcategory2.htm" onmouseover="mouseOverImage(2)"
onmouseout="mouseOutImage(1)">Subcategory One</a></li>
              <li><a href="subcategory3.htm" onmouseover="mouseOverImage(3)"
onmouseout="mouseOutImage(1)">Subcategory 2</a></li></ul>
</div>
<div>
       <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
        </div>

 </body>
 </html>

Thanks for your help, but I have different size images and it wouldn't work fine for me. — Seb, Nov 22 '12 at 14:39
mouseOverImage(elementNo, imgWidth, imgHeight){ it will make your code a lot cleaner and maintainable in the long run — Taff, Nov 22 '12 at 16:24
Well it looks clean but I guess I'm too dumb to modify it to my needs. What if my images are not named defaultpic1.jpg, defaultpic2.jpg but they are like pricing.jpg, contact.jpg and so on, and they have different height values? What should the code look like then? I trust your approach looks good if images are named similar with only number changing, but is it possible if their not? — Seb, Nov 22 '12 at 21:53

How to change image with onmouseover in different place that reverts back to default image on the site?

4 Answers4

Linked