View Full Version : Using javascript with image map

12-13-2011, 11:52 AM
Hi I've searched this forum and found nothing that fits my problem.

I used Gimp. I have a map that I have split up into about 5 regions that are all linked to Google for now. (links to be changed later on).

I selected the JavaScript tab an then typed into the mouseover box.

Here is part of the code it produces in the .map file:

<area shape="poly" coords="205,32,159,34,150,83,124,122,114,154,133,175,140,199,159,222,176,217,185,214,223,194,224,173,231,155 ,235,130,224,124,215,107,213,82,212,71" alt="google" onmouseover="img src=&quot;http://i42.tinypic.com/14oc0lj.jpg&quot;" href="http://www.google.com" />

The &quot; bit looks wrong so I took it out and it still doesn't do anything when I mouseover. I've tried linking it to a file within my website folders as well as hosted on the internet.

Any ideas please? The links work but the mouseover effect doesn't. Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<img src="C:\Documents and Settings\markp\Desktop\demo\images\mapv10.jpg" width="350" height="400" border="0" usemap="#map" />


<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:markp -->
<area shape="poly" coords="205,32,159,34,150,83,124,122,114,154,133,175,140,199,159,222,176,217,185,214,223,194,224,173,231,155 ,235,130,224,124,215,107,213,82,212,71" alt="google" onmouseover="img src=C:\Documents and Settings\markp\Desktop\demo\images\mapv10b.jpg" href="http://www.google.com" />
<area shape="poly" coords="225,197,174,221,139,251,150,266,199,265,203,270,223,270,223,277,241,273,251,270,252,258,348,249,309, 179,308,178" href="http://www.google.com" />
<area shape="poly" coords="255,271,277,271,287,286,272,312,269,326,316,379,314,399,221,398,223,336,104,340,101,329,108,319,136, 305,156,301,162,303,179,304,191,305,201,299,210,283,220,277,233,277,249,273,261,271" href="http://www.google.com" />
<area shape="poly" coords="247,268,206,268,200,263,152,263,139,272,121,274,94,249,76,241,57,242,38,261,38,289,43,308,61,313,89, 314,105,308,113,308,144,296,152,296,160,296,168,301,183,300,201,293,208,283,215,276,226,275,250,275, 252,268,224,267,203,267,201,264" href="http://www.google.com" />
<area shape="poly" coords="52,126,17,136,1,174,5,197,56,198,80,198,79,213,88,222,100,230,112,239,117,239,128,233,139,226,142,21 6,142,203,138,195,122,189,118,188" href="http://www.google.com" />


12-13-2011, 05:18 PM
onmouseover="img src=C:\Documents and Settings\markp\Desktop\demo\images\mapv10b.jpg"

This mouseover doesn't do anything. I mean your code doesn't do anything. What did you want to mouseover to do? Change the image? Then you will need an id for the image and use js to over write the src.

onmouseover="document.getElementById("image").src ="C:\Documents and Settings\markp\Desktop\demo\images\mapv10b.jpg";

12-13-2011, 05:29 PM
Thanks, I'm way out of my depth here, I won't keep asking questions as I don't want to clog up the forum and waste your time.

Thanks anyway

12-13-2011, 07:48 PM
MARKMAKAVELI were here to help. Do you need training in javascript? Look here:
https://developer.mozilla.org/en-US/learn/javascript and ask what you need to understand.