Question

I’ld like to change the “imgTag.style.border='5px solid #FF00FF'” to black when the mouse is over an image.
This is my JavaScript:

javascript:for(i=0;i<document.getElementsByTagName('img').length;i++)  
     {
     var imgTag=document.getElementsByTagName('img')[i];   
     imgTag.style.border='5px solid #FF00FF';
     imgTag.title=''; 
     imgTag.onclick=function()
          { 
         return !window.open('http://www.example.com/#/'+this.src);
          }
      }
    void(0)

How can it be done?
Thanks
Frank

Answer 1

You need to bind handlers to the mouseover and mouseout events to change the image’s border color:

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; ++i) {
    imgs[i].onmouseover = function() {
        this.style.borderColor = '#000';
    };
    imgs[i].onmouseout = function() {
        this.style.borderColor = '#f0f';
    };
}

For example: http://jsfiddle.net/bNk4Y/