Help - Search - Members - Calendar
Full Version: Image Map Help
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Rubik
Hello!

I am having a problem with my image map for a site that I am building in HTML using Notepad. I have used image maps before without any problems, but now it isn't working and I do not know why. I assume it must be something simple that I am missing, but I cannot figure it out.

I first copied over the image map html code from another site of mine (which it works on) and edited the coordinates to match the new picture. For whatever reason, when I look at the site in Firefox, I cannot click the links in the image map.

Any help would be appreciated!

Lindsay

The Image:
IPB Image

My HTML Code:
CODE

<html>
<head>
<title>Welcome to...!</title>
<style type="text/css">

A:link
{ text-decoration: underline; color:#f04155; }
A:visited
{ text-decoration: underline; color:#f04155; }
A:active
{ text-decoration: underline; color:#f04155; }
A:hover
{ text-decoration: underline; color:#f04155;}

body
{
font-family: Arial;
color: #f04155;
font-weight: normal;
font-size: 12pt; }

</style>
</head>

<body>

<body bgcolor="#fffce3">
<body background="background.gif">

<div style="position: absolute; top:10; left:10; z-index:1>
<MAP NAME="menumap">
<AREA
   HREF="index.html" ALT="Home" TITLE="Home" TARGET="frame1"
   SHAPE=RECT COORDS="318,23,474,68">

<AREA
   HREF="about.html" ALT="About" TITLE="About" TARGET="frame1"
   SHAPE=RECT COORDS="480,23,636,68">

<AREA
   HREF="gallery.html" ALT="Gallery" TITLE="Gallery" TARGET="frame1"
   SHAPE=RECT COORDS="318,75,474,120">

<AREA
   HREF="contact.html" ALT="Contact" TITLE="Contact" TARGET="frame1"
   SHAPE=RECT COORDS="480,75,636,120">

</MAP>

<IMG SRC="menutest.gif"
   ALT="Menu Map" BORDER=0
   USEMAP="#menumap">
</div>

<div id=layer1 name="frame1" style="position:absolute; top:140; left:10; width:1000; height:450;

z-index:2; padding:5px; border: #f04155 3px solid; background-color:#fffce3; overflow:auto;">

Welcome to...!
<br><br>
TEXT HERE

</div>
</body>
</html>
Darin McGrew
It looks like you've positioned div#layer1 on top of the div with the image map.
pandy
Go validate.
http://htmlhelp.com/tools/validator/

This error..
CODE
Line 32, character 19:
<MAP NAME="menumap">
                  ^Error: an attribute value literal can occur in an attribute specification list only after a vi delimiter

...is because you have omitted the closing quotation mark for the style attribute in the DIV just before the map and that's probably what screws things up. Correct the other errors too and do use a doctype, one that gives you Standards Mode (AKA Strict Mode). It makes a difference even if not for this.

http://hsivonen.iki.fi/doctype/
Rubik
Thank you for your help! I knew it had to be something simple!
pandy
You're welcome. smile.gif

Darin, I've meant to ask this before. Why is it called "vi delimiter"? When I was new at this it took me ages to find out that it means the equal sign. Even now, with google being as affective as it is, I can't find the expression anywhere but in HTML and validation related context. Is it used anywhere else and what does "vi" mean here?
Darin McGrew
In this context, "VI" means "Value Indicator". If you have an attribute like foo="bar" then foo is the attribute name, bar is the attribute value, = is the value indicator, and the " are literal delimiters.

Here's a reference I found:
http://www.is-thought.co.uk/book/sgml-5.htm#Attributes
pandy
Aha, it's an acronym! Thank you. biggrin.gif

Then the use of minuscules is evil. Even though I've seen it written in caps in other places that never occurred to me. Well, maybe it did but I ruled it out. ninja.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.