...

View Full Version : OnMouseover graphics size issue



jhutton@ate.net
04-21-2005, 06:41 PM
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
04-21-2005, 07:36 PM
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 :thumbsup:

jhutton@ate.net
04-25-2005, 10:11 PM
Never mind I got it thanks!

Badman3k
04-25-2005, 10:22 PM
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
04-26-2005, 04:37 PM
Thank you SOOO much for your help!!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum