OnMouseover graphics size issue

[jhutton@ate.net]

I am using the OnMouseover Slideshow. Can someone tell me how to edit it so that different size pictures can be displayed without the graphics stretching to fit in the original sized box? Thanks! Jennifer

[Badman3k]

Welcome to Coding Forums!

Now your problem. You've not given us much to go on, but I'm gonna take a guess that when you mouseover a link it calls a script that changes some image. Well what you'll need to do is firstly know the dimensions of the replacing image. Once you know this you can use:

function imageSwaper(what, to, w, h){
    document.getElementById(what).src = 'root/to/images/folder/' + to + '.gif';
    document.getElementById(what).width = w;
    document.getElementById(what).height = h;
}

BUT the image tag you're going to be changing must be written like this:
<img src="original/image.gif" id="image2change">

and the links need to take this format:
<a href="#" onMouseover="JavaScript: imageSwaper('image2change','newimage','apx','bpx');">LINK TEXT</a>
where a = width of the newimage.gif and b = height.

If you have any problems, let us know and we'll help out

[jhutton@ate.net]

Never mind I got it thanks!

[Badman3k]

Okay to put this into your example:

<script>

function imageSwaper(whatto, url, w, h){
    document.getElementById('targetimage').src = whatto.src;
    document.getElementById('targetimage').width = w;
    document.getElementById('targetimage').height = h;
    gotolink = url;
}

function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

<td width="50%" align="center"><a href="#" onMouseover="changeimage(myimages[0],this.href,myimages[0].width, myimages[0].height)">
<img src="images/BMY102s_small.jpg" border=0 width="100" height="134"></a></td>
<td width="50%" align="center"><onMouseover="changeimage(myimages[2],this.href, myimages[2].width, myimages[2].height)">
<img src="images/BMY103s_small.jpg" border=0 width="100" height="153"></a></td>

<a href="javascript:warp()">
<img src="gallery_exclusive/interior/BMY102s.jpg" name="targetimage" border=0 width="249" height="335" ></a>

I think that'll do it. Let us know if it doesn't.

[jhutton@ate.net]

Thank you SOOO much for your help!!!!