CODEWITHSUNDEEP
javascript
Nickster
Nickster

Reputation: 11

Giving a Javascript function a id or class

im trying to get a img hover into another img on multiple img's. on 1 img it works like a charm, but now i need the same function for 4 more img's how do i define that?

my current code:

        function MouseRollover(MyImage) {
    MyImage.src = "images/massage.jpg";
}
    function MouseOut(MyImage) {
    MyImage.src = "images/wellness.jpg";
}

                <a href='wellness.html'> <img src="images/wellness.jpg"  
            onMouseOver="MouseRollover(this)" 
            onMouseOut="MouseOut(this)" /> </a>

Upvotes: 1

Views: 229

Answers (1)

lorond
lorond

Reputation: 3896

Why not pass image source as parameter?

function setSrc(MyImage, newSrc) {
    MyImage.src = newSrc;
}

<a href='wellness.html'>
    <img src="images/wellness.jpg"  
         onMouseOver="setSrc(this, 'images/massage.jpg')" 
         onMouseOut="setSrc(this, 'images/wellness.jpg')" />
</a>

Or event better to not pass wellness image twice:

function setSrc(myImage, newSrc) {
    var original = myImage.src;
    myImage.src = newSrc;
    myImage.onmouseout = function(){ myImage.src = original; }
}

<a href='wellness.html'>
    <img src="images/wellness.jpg"  
         onMouseOver="setSrc(this, 'images/massage.jpg')" />
</a>

Look here and here for similar problems and jQuery solutions.

Upvotes: 1

Related Questions