onmouseover function Javascript

Question

I am having a problem with changing onmouseover and onmouseout attributes on dynamic pictures. The way i want it to work is whenever i put my mouse over images the images must change and when i take my mouse away it must be changed to the original picture. and whenever i select any image, that image must be changed to the image which was displayed while moving the mouse across the image. and when i select any other image the same process must take place but the previous image that was changed must be changed back to the original picture.

I have accomplished all of the above but my problem is when i select multiple pictures and put my mouse over images that were previously selected, those images do not change (onmouseover attribute does not work on them anymore).

<script language="javascript">
    function changeleft(loca){
        var od=''
        var imgs = document.getElementById("leftsec").getElementsByTagName("img"); 
        for (var i = 0, l = imgs.length; i < l; i++) {  
            od=imgs[i].id;

            if(od==loca){
                imgs[i].src="images/"+od+"_over.gif";
                imgs[i].onmouseover="";
                imgs[i].onmouseout="";
            }else{
                od = imgs[i].id;
                imgs[i].src="images/"+od+".gif";
                this.onmouseover = function (){this.src="images/"+od+"_over.gif";};
                    this.onmouseout = function (){this.src="images/"+od+".gif";};
            }

        }
    }
</script>

<div class="leftsec" id="leftsec" >
    <img id='wits' class="wits1"  src="images/wits.gif" onmouseover="this.src='images/wits_over.gif'" onmouseout="this.src='images/wits.gif'" onclick="changeleft(this.id)" /><br />

    <img id='city' class="city1" src="images/city.gif" onmouseover="this.src='images/city_over.gif'" onmouseout="this.src='images/city.gif'" onclick="changeleft(this.id)" /><br />

    <img id='organise' class="city1" src="images/organise.gif" onmouseover="this.src='images/organise_over.gif'" onmouseout="this.src='images/organise.gif'" onclick="changeleft(this.id)" /><br />

    <img id='people' class="city1" src="images/people.gif" onmouseover="this.src='images/people_over.gif'" onmouseout="this.src='images/people.gif'" onclick="changeleft(this.id)" /><br />
</div>

Is this a learning exercise, or for an actual website? If the latter, I would recommend you give jQuery a shot. That 16 or so lines of script would likely reduce to about 2 or 3. — Adam Rackis
– Adam Rackis, Commented Nov 30, 2011 at 23:18
@AdamRackis, i'm pretty sure i'd use one line of jQuery for what he's doing...i feel so spoiled. — zzzzBov
– zzzzBov, Commented Nov 30, 2011 at 23:36
have never used jQuery, can you show me some code that would solve problem? thanks :) — user994144
– user994144, Commented Dec 1, 2011 at 7:21

dash · Accepted Answer · 2011-11-30 23:35:10Z

1

I'd say you don't need the lines that are resetting the onmouseover events.

There's no need to rewrite the onmouseover events - all you want to change is the img src attribute.

As Adam mentions, there's more modern ways to do this using jQuery - look at:

http://code.google.com/p/jquery-swapimage/

For example.

answered Nov 30, 2011 at 23:35

dash

91.7k4 gold badges55 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user994144 Over a year ago

If i don't reset the onmouseover events then the image that is selected will do the exact same thing like other images.

Collectives™ on Stack Overflow

onmouseover function Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related