Member Avatar for TObannion

I'm trying to do some mouseover things with images. I thought that I had everything exactly as it should be but the page can't seem to access the images I'm asking it to.
The idea is that the page has three pictures. One of a happy baby, a dog, and a happy cat. When the cursor goes over each picture, it changes to a different picture, and back again once the cursor is moved away.
Here is my code:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Image Rollover</title>
    <script type="text/javascript">
            var imageName = '';
                if(document.images)
                    {
                        var dog_on = new Image();
                            dog_on.src = 'images/mean_dog.gif';
                        var dog_off = new Image();
                            dog_off.src = 'images/dog.gif';
                        var cat_on = new Image();
                            cat_on.src = 'images/angry_cat.gif';
                        var cat_off = new Image();
                            cat_off.src = 'images/happy_cat.gif';
                        var baby_off = new Image();
                            baby_off.src = 'images/happy_baby.gif';
                        var baby_on = new Image();
                            baby_on.src = 'images/angry_baby.gif';
                    };
            function imageOn(imageName)
                {
                    if(document.images)
                        {
                            (imageName == 'happy_baby') ? document.images[0].src = baby_off.src : '';
                            (imageName == 'dog') ? document.images[1].src = dog_off.src : '';
              (imageName == 'happy_cat') ? document.images[2].src = cat_off.src : '';
                        };
                };
            function imageOff(imageName)
                {
                    if(document.images)
                        {
                            (imageName == 'angry_baby') ? document.images[0].src = baby_on.src : '';
                            (imageName == 'mean_dog') ? document.images[1].src = dog_on.src : '';
              (imageName == 'angry_cat') ? document.images[2].src = cat_on.src : '';
                        };
                };
    </script>
  </head>
  <body>
    <h2>Emotional Babies, Dogs, and Cats</h2>
    <h3>Image Rollover</h3>
            <p><img src ="images/happy_baby.gif , images/angry_baby.gif" width = "400" height = "208";
            alt = "Baby here" name="baby"
            onMouseOver = "imageOn('angry_baby'); return true;"
            onMouseOut = "imageOff('happy_baby'); return true;">
            </p>
            <p><img src ="images/dog.gif , images/mean_dog.gif" width = "400" height = "208";
            alt = "Dog here" name="dog"
            onMouseOver = "imageOn('mean_dog'); return true;"
            onMouseOut = "imageOff('dog'); return true;">
            </p>
      <p><img src ="images/happy_cat.gif , images/angry_cat.gif" width = "400" height = "208";
            alt = "Cat here" name="cat"
            onMouseOver = "imageOn('angry_cat'); return true;"
            onMouseOut = "imageOff('happy_cat'); return true;">
            </p>
  </body>
</html>

I have a folder named "images" with the image names in the code...but it isn't accessing them.
Any guidance would be greatly appreciated. I apologize if the indentations are funky. I have my tab settings set to 2 in notepad++ and it still sometimes gets off when I paste it somewhere.

Edited by TObannion
  • 4 Contributors
  • 11 Replies
  • 360 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by TObannion
Member Avatar for kgweb

I do not think that

<img src ="images/dog.gif , images/mean_dog.gif"...

is correct; that is I do not think that you can assign two picture file names to a src attribute in this way. In any case it is not necessary to achieve the effect that you want.

Geoff

commented: yah that sounds right +0
Member Avatar for TObannion

How do I go about having the images change but be in the same spot?

commented: Just set the src to be something else +0
Member Avatar for gentlemedia

Is there any reason why you want to do this with JS, because you can do it purely with a few lines of CSS. There are several ways, but here's one way you could do it. (And yes, you can't have more then one image in the src attribute)

HTML:

<figure>

  <img src="http://images.freeimages.com/images/previews/824/sunbathing-1-1376871.jpg" alt="" />

  <img src="http://images.freeimages.com/images/previews/9ba/sunbathing-3-1376859.jpg" alt="" />

</figure>

CSS:

figure {
  position: relative;
}

img {
  position: absolute;
  transition: opacity 1s;
}

figure > img + img { opacity: 0 }

figure:hover > img:first-child { opacity: 0 }
figure:hover > img + img { opacity: 1 }

Little demo:
http://codepen.io/gentlemedia/full/VaeerO/

Edited by gentlemedia
Member Avatar for TObannion

Its for a javaScript class...that's the biggest reason. I was able to get single images to come up using kgweb's suggestion of removing the second image in the image src line, but still do not know how to make the image change on mouse over and change back on mouse out. Here's my code:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Image Rollover</title>
    <script type="text/javascript">
            var imageName = '';
                if(document.images)
                    {
                        var dog_on = new Image();
                            dog_on.src = 'images/mean_dog.gif';
                        var dog_off = new Image();
                            dog_off.src = 'images/dog.gif';
                        var cat_on = new Image();
                            cat_on.src = 'images/angry_cat.gif';
                        var cat_off = new Image();
                            cat_off.src = 'images/happy_cat.gif';
            var baby_off = new Image();
                            baby_off.src = 'images/happy_baby.gif';
            var baby_on = new Image();
                            baby_on.src = 'images/angry_baby.gif';
                    };
            function imageOn(imageName)
                {
                    if(document.images)
                        {
                            (imageName == 'happy_baby') ? document.images[0].src = baby_off.src : '';
                            (imageName == 'dog') ? document.images[1].src = dog_off.src : '';
              (imageName == 'happy_cat') ? document.images[2].src = cat_off.src : '';
                        };
                };
            function imageOff(imageName)
                {
                    if(document.images)
                        {
                            (imageName == 'angry_baby') ? document.images[0].src = baby_on.src : '';
                            (imageName == 'mean_dog') ? document.images[1].src = dog_on.src : '';
              (imageName == 'angry_cat') ? document.images[2].src = cat_on.src : '';
                        };
                };
    </script>
  </head>
  <body>
    <h2>Emotional Babies, Dogs, and Cats</h2>
    <h3>Image Rollover</h3>
            <p><img src ="images/happy_baby.gif" width = "500" height = "500";
            alt = "Baby here" name="baby"
            onMouseOver = "imageOn('angry_baby'); return true;"
            onMouseOut = "imageOff('happy_baby'); return true;">
            </p>
            <p><img src ="images/dog.gif" width = "500" height = "250";
            alt = "Dog here" name="dog"
            onMouseOver = "imageOn('mean_dog'); return true;"
            onMouseOut = "imageOff('dog'); return true;">
            </p>
      <p><img src ="images/happy_cat.gif" width = "500" height = "250";
            alt = "Cat here" name="cat"
            onMouseOver = "imageOn('angry_cat'); return true;"
            onMouseOut = "imageOff('happy_cat'); return true;">
            </p>
  </body>
</html>

Would I have to add additional src attributes for the onMouseOut images? and then place the onMouseOut only within those containers?

Member Avatar for kgweb

Below I have severely simplified your code to illustrate how mouseovers/mouseouts work. I will consider just one picture which is to be replaced. This can be done in one line, with the Javascript code as attributes of the IMG tag, as follows:

<img name="colour" src="red.gif" onMouseover="colour.src='blue.gif'" onMouseout="colour.src='red.gif'">

Note that it is the name attribute which defines the image to be replaced, so you do not need to specify two images together.

The only problem with the line above is (if your browser did not use a cache) that the picture files would be downloaded for every mouseover and mouseout. We can avoid this as follows:

<script language="JavaScript">
var redbox = new Image();
redbox.src = "red.gif";
var bluebox = new Image();
bluebox.src = "blue.gif";
</script>
<img name="colour1" src="red.gif" onMouseover="colour1.src=bluebox.src" onMouseout="colour1.src=redbox.src">

Note that the name attribute is still working in the same way; the only change is that we now assign the src attribute of the pre-fetched image to the current image. If you needed to you could use the same approach, but inside a function as you have done.

Member Avatar for TObannion

I thought I had posted another reply, sorry. It's still not working. I tried kgweb's method, not working. I'm going to go back to the drawing board and start over. Thanks

Member Avatar for 2teez

Hi,

This is actually quite easy. Just to say what some other have said in a easiler way.
Something like this below will change your image src, when you mouseover and mouseout.

        <img src="piz/pic1.jpg" onmouseover="src='piz/pic2.jpg'" onmouseout="src='piz/pic1.jpg'"/>
        <img src="piz/pic3.jpg" onmouseover="src='piz/pic4.jpg'" onmouseout="src='piz/pic3.jpg'"/>
        <img src="piz/pic5.jpg" onmouseover="src='piz/pic6.jpg'" onmouseout="src='piz/pic5.jpg'"/>

Please note that the same image you use for the defaulf must be the ones for the mousing out. If you want though! Nothing says it must be so, but that is what is usually needed in most cases.

Don't forget I have pictures in a folder called piz and the path i used to my pictures are relative to the picture folder not absolute path. This is what you will also want to use. Of course, you might have change pictures name and path.

Hope this helps

Member Avatar for kgweb

I was surprised that you could not get the example code I provided to work, so I have put up a working version at

http://www.kgweb.org.au/mouseover_example/mouseover.html

Use your browser to look at the source code and feel free to take a copy if you want to. As already pointed out you need to ensure that the path to the pictures is correct - I have simply included them in the same directory - depending on how you have them organised.

To generalise the idea note that a mouseover and mouseout on one picture can change a totally different image if required - you just need to specify the appropriate name in the src attribute.

Member Avatar for TObannion

I think I get the idea now. I actually tried another approach, by doing some farther reading in my text. Now I'm a bit confused about something else in the new code.
here it is:

<!DOCTYPE html>
  <html > 
    <head>
      <script>
        function changeBaby(x) 
          {
            x.src='images/angry_baby.gif';
          };

        function changeDog(x) 
          {
            x.src='images/mean_dog.gif';
          };

        function changeCat(x) 
        {
          x.src='images/angry_cat.gif';
        };  

        function restoreBaby(x) 
        {
          x.src='images/happy_baby.gif';
        };

        function restoreDog(x) 
        {
          x.src='images/dog.gif';
        };

        function restoreCat(x) 
        {
          x.src='images/happy_cat.gif';
        };
      </script>
    </head>
    <body>
      <h3>Mouse over the Baby </h3><br/>
        <img src="images/happy_baby.gif" width = "500" height = "500" onmouseover="changeBaby(this)" onmouseout="restoreBaby(this)" border="0" />
        <br/>
      <h3>Mouse over the Dog </h3><br/>
        <img src="images/dog.gif" width = "500" height = "380" onmouseover="changeDog(this)" onmouseout="restoreDog(this)" border="0" />
        <br/>
      <h3>Mouse over the Cat </h3><br/>
        <img src="images/happy_cat.gif" width = "500" height = "400"onmouseover="changeCat(this)" onmouseout="restoreCat(this)" border="0" />
    </body>

  </html>

My question is, why does "this" work in the parameter of the function call? I understand that it is a JS keyword but, my text doesn't really explain it very well at all. I tried passing the x parameter which, of course didn't work. I guess my question is: What exactly does the "this" keyword do in the context of my code above? I just want to understand why it works the way that it does.

Member Avatar for 2teez

Hi,

why does "this" work in the parameter of the function call?
What exactly does the "this" keyword do in the context of my code above? I just want to understand why it works the way that it does.

this point to the object element itself. In this case you are passing the image object to the function.
For example, if you put an id like thus <img id="me" .. onmouseover="changeMe(this)"/> change this to document.getElementById('me'), your code still works fine. Why? You are passing the object element to the function. SO instead of the long reference using the DOM, you will agree that this is clean enough!

I think you will understand it better when you starting doing OOP JS!

NOTE: That the x you used in the parameter could be anything atall. Some other like to call it that. But any name of your choice would work. But not when you are calling the function on an element; except x is a variable you have decleared to refer to the object of that element.

Simply put this point to the object element itself.
Hope this helps.

Edited by 2teez
Member Avatar for TObannion

It does...thank you very much for the explanation.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.