PDA

Click to See Complete Forum and Search --> : Image Swap On Hotspot

p40s4me
01-06-2003, 10:22 PM
I have an image mapped with several hotspots. I would like to have just the hotspot section of the image magnify slightly on mouse over. Can this be done with javascript? If so, any help would be appreciated I am a novice. Thank You.:confused:
khalidali63
01-06-2003, 10:41 PM
below is the example of changing image width height dynamically,

change the src="images/flake.gif"
to an image in the directory and set its width and height.

then run this script
good luck

Khalid


<html>
<head>
<title>Untitled</title>
</head>

<body>

<img src="images/flake.gif" name="flake" width="20" height="20" border="1" onclick="gettheheight();" vspace="0">

<SCRIPT LANGUAGE="JavaScript1.2">
w = 5,h=5;
function gettheheight() {
var imgTags = document.getElementsByTagName("img");
for(x=0;x<imgTags.length;x++){
if(imgTags[x].name=="flake"){
imgTags[x].width=imgTags[x].width+w;
imgTags[x].height=imgTags[x].height+h;
}
}

}

</script>
</body>
</html>
jdavia
01-07-2003, 01:46 AM
khalidali63

That is a good workable piece of code, and I like it. But I think p40s4me is looking for MouseOver/Mouse/Out/mouseClick event, and for only a portion of the image to magnify not the whole image.

Therefore an image is needed for each hotspot with that section enlarged. That can be done in PhotoShop. Go to Filter/Distort and click Spherize.
Make sure that you select the section of the image first that is to be enlarged. Use the same base image to make the others that you will save-as another name.

Now can you do the mouseOver?
p40s4me
01-07-2003, 11:11 AM
Thank you for the code, but actually JDAVIA is right. I was able to paste magnified sections of the image in paint shop and it worked beautifully. Thanks for the help everybody.