Giving a Javascript function a id or class

Question

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>

I've changed your [tag:java] tag to a [tag:javascript] tag. Please understand that these are two completely different programming languages, about as closely related as ham is to hamburger, that if you mis-tag your question you will not get the right experts in to review it, and that this may hurt your chances of getting decent help. Since I know absolutely nothing about Javascript, this is about all that I can do for you except to wish you well and hope that you get a decent answer soon. — Hovercraft Full Of Eels, Apr 03 '15 at 13:02
So do you face some issue If you repeat similar for other images ? — kuldeep.kamboj, Apr 03 '15 at 13:24
Oops sorry, I'm kinda new to this! thanks for doing that! i will keep my eyes open next time:) — Nickster, Apr 03 '15 at 13:24
kuldeep.kamboj: yea i do when i copy/paste it to the other img's it also copies the img... — Nickster, Apr 03 '15 at 13:28
possible duplicate of [Change the image source using jQuery](http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery) — lorond, Apr 03 '15 at 13:36

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

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.

edited May 23 '17 at 10:24

Community

1
1

answered Apr 03 '15 at 13:13

lorond

3,856
2
37
52

hmm, i took your code but its not working here.. although i think i know where you wanna go with this, and how it gives all the images their own property. ( I'm new to Javascript) – Nickster Apr 03 '15 at 13:26
The second code works perfectly! Thank you very much! I also took al look at the jQuery solutions.. but to be honest its a bit out of my league for now.. soon i will start learning jQuery^^ – Nickster Apr 03 '15 at 13:53

Giving a Javascript function a id or class

1 Answers1