Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Using javascript with image map

    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">

    <head>

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


    </head>

    <body>
    <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,22 6,142,216,142,203,138,195,122,189,118,188" href="http://www.google.com" />
    </map>

    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Code:
    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";

  • Users who have thanked sunfighter for this post:

    MARKMAKAVELI (12-13-2011)

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •