Change this hover effect to fade instead?

Question

I have this script that changes the image source onmouseover/onmouseout. I have added some new elements now that I would like to do the same thing but also fade instead of just changing the image source immediately. Can someone give me a hint, or maybe even change my code? I would be thankful!

Javascript:

    d004on = new Image(100, 100);
    d004on.src = "images/catalog/dus004_h.png";

    d004off = new Image(100, 100);
    d004off.src = "images/catalog/dus004.png";

}

function change(imgName) {
    if (document.images) {
        imgOn = eval(imgName + "on.src");
        document[imgName].src = imgOn;
    }
}

function changeback(imgName) {
    if (document.images) {
        imgOff = eval(imgName + "off.src");
        document[imgName].src = imgOff;
    }
}

HTML:

<img src="images/catalog/dus004.png" alt="dus004" onMouseover="change('d004')" onMouseout="changeback('d004')"/>

Answer 1

it's very easy in jquery

html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>

css

span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }

Jquery

   <script src="http://code.jquery.com/jquery-latest.js"></script>

   $(document.body).mouseenter(function () {
   $("div:hidden:first").fadeIn("slow");
   });

Answer 2

First get rid of this evil eval thing ;) Second jQuery has some nice animation functions... Are you allowed to use jQuery? http://api.jquery.com/fadeIn/

Something like this? http://jsbin.com/ewijam/1/edit

Oh and by the wqay, thank you for disliking someone who tries to help ^^

Change this hover effect to fade instead?

Question

2 answers

solution1
0 2013-02-20 13:48:50

solution2
-1 2013-02-20 13:36:45

Change this hover effect to fade instead?

Question

2 answers

solution1 0 2013-02-20 13:48:50

solution2 -1 2013-02-20 13:36:45

solution1
0 2013-02-20 13:48:50

solution2
-1 2013-02-20 13:36:45