The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Image Map Help
Rubik
post Apr 21 2011, 06:18 PM
Post #1





Group: Members
Posts: 2
Joined: 21-April 11
Member No.: 14,384
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>


This post has been edited by Rubik: Apr 21 2011, 06:19 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 21 2011, 07:09 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
It looks like you've positioned div#layer1 on top of the div with the image map.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 21 2011, 07:13 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Rubik
post Apr 21 2011, 07:17 PM
Post #4





Group: Members
Posts: 2
Joined: 21-April 11
Member No.: 14,384
Thank you for your help! I knew it had to be something simple!

This post has been edited by Rubik: Apr 21 2011, 07:19 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 21 2011, 07:29 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 21 2011, 11:49 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 22 2011, 05:52 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 11:53 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC