onmouseover, onmouseout,onclick function Javascript

Question

i have a menu for my page,here is the Onmouseover, Onmouseout img

<img id='wits' class="wits1" src="Images/MenuInWhite/ContactButton1.png" onmouseover="this.src='Images/mouseover/ContactButton2.png'"
        onmouseout="this.src='Images/MenuInWhite/ContactButton1.png'"  /><br />
    <img id='city' class="city1" src="Images/MenuInWhite/ActivitiesButton1.png" onmouseover="this.src='Images/mouseover/ActivitiesButton2.png'"
        onmouseout="this.src='Images/MenuInWhite/ActivitiesButton1.png'" /><br />
    <img id='organise' class="city1" onmouseout="this.src='Images/MenuInWhite/CruisesButton1.png';"
        onmouseover="this.src='Images/mouseover/CruisesButton2.png';" src="Images/MenuInWhite/CruisesButton1.png" /><br />
    <img id='people' class="city1" onmouseout="this.src='Images/MenuInWhite/HomeButton1.png';"
        onmouseover="this.src='Images/mouseover/HomeButton2.png';" src="Images/MenuInWhite/HomeButton1.png" /><br />

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, it's working fine,,

i'd like to know how to do 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.

pls help me out for this solution,,

thanks in advance

yogi · Accepted Answer · 2012-08-08 08:21:55Z

2

Here's one pure JavaScript solution for that, May be this could help

function isMSIE() 
{
   var ie7 = 
   (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
   return ie7;
}
function getParent(element, depth) 
{
   var rVal = element;
   if (isMSIE()) {
       for (i = 0; i < depth; i++)
       rVal = rVal.parentElement;
   }
   else {
        for (i = 0; i < depth; i++)
        rVal = rVal.parentNode;
    }
    return rVal;
}
function clicked(sender)
{
    var parent   = getParent(sender, 1);
    var imgs = parent.getElementsByTagName("IMG");
    for(i=0; i<imgs.length; i++)
    {
       if (imgs[i] != sender) {
          imgs[i].src = 'Images/MenuInWhite/ContactButton1.png';
          imgs[i].onmouseout = 
            function () { this.src = 'Images/MenuInWhite/HomeButton1.png'; };
       }
       else {
          imgs[i].src = 'Images/MenuInWhite/HomeButton1.png';
          imgs[i].onmouseout = null;
       }
        if(imgs[i]!=sender)
          imgs[i].src = 'Images/MenuInWhite/HomeButton1.png';
    }
}

<div>
   <img id='wits' class="wits1" 
      src="Images/MenuInWhite/ContactButton1.png"    
      onmouseover="this.src='Images/mouseover/ContactButton2.png'"
      onmouseout="this.src='Images/MenuInWhite/ContactButton1.png'"
      onclick="clicked(this);"  /><br />
   // Just add this onclick="clicked(this);" on each img
</div>

edited Aug 8, 2012 at 8:21

answered Aug 8, 2012 at 7:25

yogi

19.6k13 gold badges67 silver badges93 bronze badges

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

3 Comments

Zeeju Over a year ago

Yogi-->it's not working, element id is not working here if(imgs[i]!=sender) alert('123') imgs[i].src = 'Images/MenuInWhite/HomeButton1.png';

Zeeju Over a year ago

yogi--> yea i have added onclick and the above javascript in my page and tried,, it's not changing,,,,,

yogi Over a year ago

@ShaiRiyaz have a look at it now it's working actually I didn't removed that onmouseout handler and after click when mouse outs from that img it changes back to normal, silly mistake :)

Collectives™ on Stack Overflow

onmouseover, onmouseout,onclick function Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related