HTMLHelp Forums > Image Map Help

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

Rubik

Apr 21 2011, 06:18 PM

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

Apr 21 2011, 07:09 PM

It looks like you've positioned div#layer1 on top of the div with the image map.

pandy

Apr 21 2011, 07:13 PM

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

Apr 21 2011, 07:17 PM

Thank you for your help! I knew it had to be something simple!

pandy

Apr 21 2011, 07:29 PM

You're welcome.

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

Apr 21 2011, 11:49 PM

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

Apr 22 2011, 05:52 AM

Aha, it's an acronym! Thank you.

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.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.