Image swap - width and height issues

Isadore · Dec 15, 2008

I am posting this for those looking for a simple image swap routine that handles two images of different dimensions. Many routines (all simple) worked locally but not on the server I use. The following code worked across several browsers, locally and on my server.

Hopefully this may save someone a few minutes. I am not a programmer, just a technical user of JavaScript.

Always helpful to preload images...

Code:

// This global variable contains an instance of the Array object
var swap = new Array();
function preload() {
   // object detection to test if what we want works
   if( document.images ) {
      for( var j=0; j < arguments.length; j++ ) {
         swap[j] = new Image(); // instance of image object
         swap[j].src = arguments[j]; // arguments are handled on the fly
      }
   }
}
...
<body onload="preload('images/imgA.gif','images/imgB.gif');">

Simple javascript code for adjusting varying dimensions..

Code:

function imgOver(){
  document.getElementById('img1').src = 'images/imgB.gif';
  document.getElementById('img1').width = 205;
  document.getElementById('img1').height = 87;
}
function imgOut(){
  document.getElementById('img1').src = 'images/imgA.gif';
  document.getElementById('img1').width = 24;
  document.getElementById('imgfrog').height = 16;
}

..and finally the image..

Code:

<img id="img1" name="img1" src="images/imgA.gif" onmouseover="javascript:imgOver();" onmouseout="javascript:imgOut();" border="0">

Of course there are numerous approaches but after many trials I found this worked across all situations I encountered [did not test on Safari]

feherke · Dec 15, 2008

Hi

Do not specify the [tt]javascript:[/tt] pseudo-protocol in the [tt]on*[/tt] attributes. That is only for the situations when the browser expects an URL, typically the [tt]a[/tt] tag's [tt]href[/tt] attribute.

Code:

<img id="img1" name="img1" src="images/imgA.gif" onmouseover="imgOver();" onmouseout="imgOut();" border="0">

While I already started to "criticize" your code. Is pointless to execute to execute [tt]document.getElementById('img1')[/tt] 3 times in a [tt]function[/tt] just to set 3 properties.

Code:

function imgOver()
{
  [red]with ([/red]document.getElementById('img1')[red]) {[/red]
    src = 'images/imgB.gif';
    width = 205;
    height = 87;
  [red]}[/red]
}

[gray]// or[/gray]

function imgOver()
{
  [red]var imgObj=[/red]document.getElementById('img1')
  [red]imgObj[/red].src = 'images/imgB.gif';
  [red]imgObj[/red].width = 205;
  [red]imgObj[/red].height = 87;
}

But anyway, there is no need to execute it neither once.

Code:

function imgOver([red]imgObj[/red])
{
  [red]imgObj[/red].src = 'images/imgB.gif';
  [red]imgObj[/red].width = 205;
  [red]imgObj[/red].height = 87;
}

[gray]// and pass the reference as parameter to the function when calling it[/gray]

<img id="img1" name="img1" src="images/imgA.gif" onmouseover="imgOver([red]this[/red]);" onmouseout="imgOut([red]this[/red]);" border="0">

I hope you not feel offended by my comments.

Feherke.

http://rootshell.be/~feherke/

Isadore · Dec 15, 2008

feherke - quite the contrary; I'm strictly academic and your comments are especially helpful - making the changes now. I posted this since others may run into a similar problem. Appreciate your time feherke - a little help makes a big difference.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Image swap - width and height issues

Isadore

Technical User

feherke

Programmer

Isadore

Technical User

Similar threads

Part and Inventory Search

Sponsor