0

I'm working with Microsoft Web Expression to create a website and I want a smaller image on mouseover/hover to be replaced with a larger one; similar to thumbnail idea, however looking at my code I just can't find how to implement any of the advises I've looked at here.

HTML part: 

<div id="layer11" style="position: absolute; width: 150px; height: 20px; z-index: 1; left: 0px; top: 0px; " class="auto-style17">
    <img id="img1" alt="" height="20" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'s2.png')" src="s1.png" width="150" /></div>

And here are the javascript functions:

function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
 var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } 
    doc.$imgSwaps=null; }
}

And I just can't figure out what I should change so that the swapped image is larger rather than compressed on the existing one.

TangoJuliet
  • 37
  • 1
  • 9
  • I think that you are looking for this? http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover – Jos Oct 26 '14 at 13:09
  • Thanks for reaching out, but I did look at that and couldn't find the right way to make it work for me. But thanks ;) – TangoJuliet Oct 26 '14 at 14:12

1 Answers1

0

you have to remove the width and height attributes

see http://jsbin.com/nifuvitoqa/1/edit

lloiser
  • 1,161
  • 9
  • 11