CODEWITHSUNDEEP
javascripthtmldynamicimage
ChapmIndustries
ChapmIndustries

Reputation: 1531

Add a JavaScript Event to an Image With JavaScript

Ok so I'm going to try and make this as clear as possible. I want to write a function that when called will add an onmouseout attribute to an image.

Before the image is moused over.

<img src="myfile.jpg" onmouseover="function()" />

After

<img src="myfile.jpg" onmouseover="function()" onmouseout="anotherFunction()" />

I would also like to change the picture with function() and then onmouseout set the picture back to the original. I know how to change the pictures with onmouseover and onmouseout right in the image code but I'm trying to simplify this as I have to do the image changy thing about 100 times and I dont want to write out the code that many times. Gah I hope that was clear.

Upvotes: 2

Views: 408

Answers (2)

Saurabh Kumar
Saurabh Kumar

Reputation: 5945

Here we go http://jsfiddle.net/5U9w9/2/

I'm going to update the jsFidle with more comments and will update the link here too.

javascript 

// grab all the required element on the page
var img_all = document.getElementsByTagName('img');

// for every element do this
for (i=0; i< img_all.length; i++){
    var img = img_all[i];
    // set the required event on the element
    // when the event of the element occurs, the associated function will be called with event object as it's argument.
    // https://developer.mozilla.org/en-US/docs/Mozilla_event_reference
    //img.addEventListener('mouseover', mouseover_handler, false);
    AddEvent(img, 'mouseover', mouseover_handler) 

    //mouseout_handler will be called, on mouseout event
    // img.addEventListener('mouseout', mouseout_handler, false);
    AddEvent(img, 'mouseout', mouseout_handler)
}


function mouseover_handler(e){
    // el is and event object and has various properties like clientX, clientY, srcElement, etc. you can check them by console.log(el)
    console.log(e)

    // to get the element i'm hovering, use
    var element = e.srcElement;

    //element is DOM element and can be manupulated
    element.style.width="100px";
}

// similarly handler for an another event.
function mouseout_handler(e){
    e.srcElement.style.width="50px";
}

​// cross-browser addEventListner
function AddEvent(html_element, event_name, event_function) 
{       
   if(html_element.attachEvent) //Internet Explorer
      html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);}); 
   else if(html_element.addEventListener) // Everything else
      html_element.addEventListener(event_name, event_function, false);
}

Update

  • Use AddEvent in the place of addEventListner() for IE support.​ (CREDIT: @James Hill's answer)

Upvotes: 0

James Hill
James Hill

Reputation: 61812

This is simpler than you may think:

function SetImageSource(ele, url) {
    ele.src = url;
}

<img src="myfile.jpg" 
     onmouseover="SetImageSource(this, 'someURL')"
     onmouseout="SetImageSource(this, 'someOtherURL')" />

Note: Inline JavaScript is not ideal. I suggest reading up on event handling in JS. More specifically, read about attaching to an event.

Edit per clarification

<img id="imgMyImage" src="myfile.jpg" 
     onmouseover="SetImageSource(this, 'someURL')"
     onmouseout="SetImageSource(this, 'someOtherURL')" />


function AddEvent(html_element, event_name, event_function) 
{       
   if(html_element.attachEvent) //Internet Explorer
      html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);}); 
   else if(html_element.addEventListener) // Everything else
      html_element.addEventListener(event_name, event_function, false);
}

AddEvent(document.getElementById('imgMyImage'),
                                 'onmouseover',
                                 // do something
                                 );

Additional Information

See .addEventListener() on MDN

See .attachEvent() on MSDN

Upvotes: 1

Related Questions