SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question on Image Maps and Mouse Over

    I've never built an image map before, but I am trying today.

    What I am trying to do is make an Image map that will simply pop up text when the mouse scrolls over it.

    The code I had been using was something like this:

    <IMG SRC="Craftskills-copy.jpg" WIDTH=318 HEIGHT=800 BORDER=0 USEMAP="#Craftskillscopy_Map">
    <MAP NAME="Craftskillscopy_Map">

    <AREA SHAPE="rect" ALT="" COORDS="27,138,181,163" HREF="#"

    ONMOUSEOVER="popup('<font color=yellow>Text Inside PopUp</font>','green')">Something of interest</A>>

    </MAP>

    I realize the problem is in the following line of code:
    <AREA SHAPE="rect" ALT="" COORDS="27,138,181,163" HREF="#"

    ONMOUSEOVER="popup('<font color=yellow>Text Inside PopUp</font>','green')">Something of interest</A>>

    Is there a way to fix this so that when a person moves a mouse over a certain area, it will just show text in a small pop up?

    I even tried the following hoping it would do something:
    <IMG SRC="Craftskills.jpg" WIDTH=318 HEIGHT=800 BORDER=0 USEMAP="#Craftskills_Map">
    <MAP NAME="Craftskills_Map">
    <AREA SHAPE="rect" ALT="" COORDS="27,138,181,163" HREF="http://www.ac2hq.com">
    <AREA SHAPE="rect" ALT="YO YO YO" COORDS="25,114,178,131" onmouseover="popup('dd')">
    </MAP>


    Thanks.
    Last edited by Mithan; Aug 21, 2002 at 18:16.

  2. #2
    SitePoint Evangelist azizur_rahman's Avatar
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How are you doing this? do you have a JavaScript function name popup() that takes two arguments?

    What I am trying to do is make an Image map that will simply pop up text when the mouse scrolls over it.
    is that popup that will be in a layer/div tag? or just return a alt tag? or what?

    anway here's some code I think will be help:

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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">
    <head>
    <title>Image Map Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    
    <body>
    <img src="azizur_cloned.jpg" alt="Don't Look its a picture of my cloned twin" name="Image001" width="541" height="853" border="0" usemap="#testMap" id="Image001" /> 
    <map name="testMap" id="testMap"><area shape="rect" coords="160,160,320,320" href="JavaScript: alert('you\'ve clicked me again! why?');" alt="Click me here too." onmouseover="JavaScript: alert('Why you moved you mouse over me?');"  />
      <area shape="rect" coords="0,0,160,160" href="JavaScript: alert('you\'ve clicked me! why?');" alt="Click me here." onmouseover="JavaScript: alert('Why you do that for?');" />
    </map>
    </body>
    </html>
    Azizur Rahman
    Web Application Developer


Bookmarks

Posting Permissions

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