HTMLHelp Forums > Firefox Image Map

GoneFish83

Feb 15 2011, 11:58 PM

Click to view attachment Click to view attachment

I believe I have the map markup correct but I am rather new to HTML. The Image map works with Internet Explorer but not with Firefox.

GoneFish83

Feb 16 2011, 12:02 AM

QUOTE(GoneFish83 @ Feb 16 2011, 12:58 AM)

Click to view attachment Click to view attachment

I believe I have the map markup correct but I am rather new to HTML. The Image map works with Internet Explorer but not with Firefox.

<div style="left:22px; position: absolute; top: 150px; z-index:1;">
<img src="Generic_files/Kids_green_header_03.png" alt="NavMap" usemap="#NavMap" />
</div>

<map id="NavMap">
<area shape="rect" coords="15,0,114,20" href="Welcome.html" alt="Welcome" />
<area shape="rect" coords="318,0,556,21" href="Board_of_Directors.html" alt="Board" />
</map>

Darin McGrew

Feb 16 2011, 01:35 AM

The online tools report markup and CSS errors. Here are the markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes

To see the CSS errors, go to:
http://jigsaw.w3.org/css-validator/

You don't provide a name attribute for your map element.

GoneFish83

Feb 16 2011, 11:12 AM

name element is depreciated though in xhtml 1.1, Looking around there is something else going on. I have cleaned up files and reposted them.
With XHTML11 there is no longer an "#" used in the reference but when I remove it then the image map no longer works in IE and still does not work in firefox.

pandy

Feb 16 2011, 01:57 PM

ID will work if you serve the document with the content-type application/xhtml+xml . But then again the document won't display at all because the XML parser chokes on the XML declaration already and then comes the other errors.

Are you sure about the hash sign? Where did you see that?

You can't both have the cake and eat it. What's your reason for using XHTML 1.1? It's asking for trouble if there isn't a compelling cause.

GoneFish83

Feb 16 2011, 02:22 PM

http://forums.mozillazine.org/viewtopic.php?f=9&t=196510

Is a good example of seeing the mapping reason but in even in xhtml 1.0 the image map is not working in firefox.

<?xml version="1.1" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>University Child Development, Inc.
A place where knowledge grows</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="Welcome_files/Welcome.css" />
</head>

<body style="background: rgb(255, 255, 255) url(Generic_files/Playtime_background_yellow.jpg) repeat scroll top left; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
<div style="text-align: center; ">
<div style="margin-bottom: 15px; margin-left: auto; margin-right: auto; margin-top: 15px; overflow: hidden; position: relative; word-wrap: break-word; text-align: left; width: 700px; " id="body_content">
<div style="background: transparent url(Generic_files/Playtime_page_bg-6.png) repeat scroll top left; width: 700px; ">
<div style="height: 118px; margin-left: 0px; position: relative; width: 700px; z-index: 1; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper">�</div>
<div id="id1" style="height: 68px; left: 22px; position: absolute; top: 50px; width: 645px; z-index: 2; " class="style_SkipStroke shape-with-text">
<div class="text-content style_External_645_68" style="padding: 0px; ">
<div class="style">
<p style="padding-top: 0pt; " class="paragraph_style">University Child Development, Inc.<br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style_1">�� A place where knowledge grows</p>
</div>
</div>
</div>

<div style="left: 0px; position: absolute; z-index: 1; " class="img">
<img src="Generic_files/Playtime_header_bg.jpg" alt="Img1" />
</div>
<div style="left: 22px; position: absolute; top: 28px; z-index: 1; " class="img">
<img src="Generic_files/Kids_green_header_01.png" alt="Img2" />
</div>
<div style="left: 22px; position: absolute; top: 50px; z-index: 1; " class="img">
<img src="Generic_files/Kids_green_header_02.png" alt="Img3"/>
</div>

<div style="left:22px; position: absolute; top: 150px; z-index:1;">
<img src="Generic_files/Kids_green_header_03.png" alt="NavigationBar" usemap="#navmap" />
</div>

<map name="navmap" id="navmap'>
<area shape="rect" coords="15,0,114,20" href="Welcome.html" alt="Welcome" />
<area shape="rect" coords="318,0,556,21" href="Board_of_Directors.html" alt="Board" />
</map>

<div style="left: 22px; position: absolute; top: 257px; z-index: 1; " class="img">
<img src="Generic_files/Kids_green_header_04.png" alt="" />
</div>
<div style="left: 495px; position: absolute; top: 15px; z-index: 3; " class="img">
<img src="Generic_files/Playtime_Sun-4.png" alt="" />
</div>
</div>
<div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " >
<div style="height: 0px; line-height: 0px; " class="bumper">
</div>

<div style="height: 298px; left: 94px; position: absolute; top: 160px; width: 511px; z-index: 2; ">
<img src="Welcome_files/shapeimage_2.png" alt="" />
</div>
<div style="height: 44px; width: 637px; left: 27px; position: absolute; top: 437px; z-index: 1; " class="shadow">
<img src="Welcome_files/shapeimage_1.png" style="margin-left: -1px; margin-top: -18px; position: absolute;" alt="" />
</div>
<div class="shadow" style="height: 357px; left: 27px; position: absolute; top: 461px; width: 635px; z-index: 3; ">
<img id="shapeimage_3" src="Welcome_files/shapeimage_3.png" style="left: -3px; position: absolute; top: -18px; z-index: 1; "
alt="

UCD is a non-profit child development center located in the heart of Topeka, Kansas.

To learn more about us, please click a topic in the menu above." title="" />
</div>
<div style="height: 114px; left: 442px; position: absolute; top: 428px; width: 296px; z-index: 4; " class="img">
<img src="Welcome_files/Playtime_whale-1.png" alt="" />
</div>

<div id="id2" style="height: 31px; left: 59px; position: absolute; top: 501px; width: 575px; z-index: 3; " class="style_SkipStroke_2 shape-with-text">
<div class="text-content Normal_External_575_31" style="padding: 0px; ">
<div class="Normal">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style_2">Welcome to UCD, Inc.</p>
</div>
</div>
</div>

<div style="height: 778px; line-height:778px; " class="spacer">
</div>
</div>
<div style="height: 75px; margin-left: 0px; position: relative; width: 700px; z-index: 1; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper">�</div>
<div style="height: 17px; width: 700px; left: 0px; position: absolute; top: 58px; z-index: 10; " class="tinyText style_SkipStroke_1">
<img src="Generic_files/Playtime_footer_bg.jpg" alt="" style="border: none; height: 1; width: 700px; " />
</div>
</div>
</div>
</div>
</div>
</body>
</html>

pandy

Feb 16 2011, 02:37 PM

QUOTE(GoneFish83 @ Feb 16 2011, 08:22 PM)

http://forums.mozillazine.org/viewtopic.php?f=9&t=196510

I don't understand. They say the same thing I said above there.

QUOTE

even in xhtml 1.0 the image map is not working in firefox.

Nope. Again, if the document is served as text/html it won't work without 'name'. You can test this locally by changing the extension to .xhtml . The document will then be treated as if it were served with some kind of XML/XHTML content-type from a server. And it won't display, because you got inventive with the XML declaration.

FireFox won't do what you want.

Also, browsers don't really read or care about doctypes. They are used for doctype switching (standards/quirks mode), but that doesn't mean they understand them. For other reasons it doesn't matter what number you put in that doctype, it doesn't even matter if you use the correct doctype. The only thing a browser uses the doctype for is the aforementioned switching between rendering modes. It doesn't care if it say XHML 1.0, XHML 1.1, HTML 4.01 or HTML 3.2.

I asked you two questions above. Do you mind answering them?

GoneFish83

Feb 16 2011, 02:51 PM

QUOTE(pandy @ Feb 16 2011, 02:57 PM)

ID will work if you serve the document with the content-type application/xhtml+xml . But then again the document won't display at all because the XML parser chokes on the XML declaration already and then comes the other errors.

Are you sure about the hash sign? Where did you see that?

You can't both have the cake and eat it. What's your reason for using XHTML 1.1? It's asking for trouble if there isn't a compelling cause.

http://www.w3.org/TR/html401/struct/objects.html#edef-IMG Section 13.6.1 Shows about # use

pandy

Feb 16 2011, 03:13 PM

No, it doesn't. You must have misunderstood something. And that is the HTML 4.01 spec BTW.

So, what about my other question? Why do you want to use XHTML 1.1? There's a reason hardly anyone do or ever did and that there won't be a XHML 2.0, you know. Do you plan to use MathML or something like that? If you don't, it's hard to see why anyone would want to use XHTML 1.1 .

GoneFish83

Feb 16 2011, 03:24 PM

QUOTE(pandy @ Feb 16 2011, 04:13 PM)

No, it doesn't. You must have misunderstood something. And that is the HTML 4.01 spec BTW.

So, what about my other question? Why do you want to use XHTML 1.1? There's a reason hardly anyone do or ever did and that there won't be a XHML 2.0, you know. Do you plan to use MathML or something like that? If you don't, it's hard to see why anyone would want to use XHTML 1.1 .

Either way the image map does not work in either firefox or IE when # sign is not use. When "#" is used it works in IE. Originally used XHTML 1.0 but tried 1.1 to see if it made a difference. I did not plan to use MathML. 1.0 is the correct version to use in the doctype?

pandy

Feb 16 2011, 03:51 PM

Of course, a hash sign should be used. You have misunderstood something about that.

Yes, if you must use XHTML at all, use 1.0. But you can just as well use HTML 4.01. There is no difference in practice when you serve your documents as text/html. Browsers will treat them as HTML whatever you say in the doctype.

XHTML came, was hyped beyond belief and now it's discontinued and instead HTML 5 is the cat's meow. In the long run nothing of this matters. Other things are more important. For instance, you should use an external style sheet and not put your CSS in style attributes. And you shouldn't overuse DIVs.

GoneFish83

Feb 16 2011, 03:57 PM

QUOTE(pandy @ Feb 16 2011, 04:51 PM)

Of course, a hash sign should be used. You have misunderstood something about that.

Yes, if you must use XHTML at all, use 1.0. But you can just as well use HTML 4.01. There is no difference in practice when you serve your documents as text/html. Browsers will treat them as HTML whatever you say in the doctype.

XHTML came, was hyped beyond belief and now it's discontinued and instead HTML 5 is the cat's meow. In the long run nothing of this matters. Other things are more important. For instance, you should use an external style sheet and not put your CSS in style attributes. And you shouldn't overuse DIVs.

Yes my best practices are not well accustomed to HTML. Thank you I'll note your advice and clean it up.
You asked me a question about the hash sign earlier, I guess I did not understand what you meant. Did I answer that question?

pandy

Feb 16 2011, 04:16 PM

You think that you shouldn't use a hash sign (#) in usemap="#mapname" but instead use usemap="mapname", right? I just wondered where you had read that. The page in the HTML spec that you linked to doesn't say that, so you must have misunderstood something. A hash sign should be used. As you have seen, it doesn't work if you don't use it.

pandy

Feb 16 2011, 04:27 PM

Lets see if this helps. The value of usemap is a URL. It's called a fragment identifier.

http://www.w3.org/TR/html401/intro/intro.h...ment_identifier
http://en.wikipedia.org/wiki/Fragment_identifier

So what's really going on is that you refer to a resource in the same page, just as you do when you link to a spot further down in the same page by tagging on #something to the URL. Without the hash the meaning changes and the URL becomes incorrect. The map can't be found. That's why it doesn't work without the #.

Just as this works because the resource it links to exists
http://htmlhelp.com/reference/html40/struc...html#validation
and this doesn't.
http://htmlhelp.com/reference/html40/struc...html/validation

GoneFish83

Feb 16 2011, 05:01 PM

QUOTE(pandy @ Feb 16 2011, 05:27 PM)

Lets see if this helps. The value of usemap is a URL. It's called a fragment identifier.

http://www.w3.org/TR/html401/intro/intro.h...ment_identifier
http://en.wikipedia.org/wiki/Fragment_identifier

So what's really going on is that you refer to a resource in the same page, just as you do when you link to a spot further down in the same page by tagging on #something to the URL. Without the hash the meaning changes and the URL becomes incorrect. The map can't be found. That's why it doesn't work without the #.

Just as this works because the resource it links to exists
http://htmlhelp.com/reference/html40/struc...html#validation
and this doesn't.
http://htmlhelp.com/reference/html40/struc...html/validation

Thank you for the explanation into identifier rules. So any ideas behind why usemap works with IE and not firefox?

pandy

Feb 16 2011, 05:07 PM

Do you mean with only id, without name? MS and I assume most others have taken another approach than Mozilla. Right or wrong, that's how it is.

There was a time not long ago when the w3c strongly advised that XHTML 1.1 should NOT be served as text/html. That, as so many other things, changed. You see, they modify the specs to fit the browser interpretation of them. It's all crazy IMO. But with how it was previously intended to work in mind, I don't think Mozilla's approach is wrong. XHTML served as text/html is HTML with a few slashes added, nothing else. Why pretend?

Darin McGrew

Feb 16 2011, 05:11 PM

The errors reported by our online validator look related to your problem.

GoneFish83

Feb 16 2011, 05:12 PM

QUOTE(pandy @ Feb 16 2011, 06:07 PM)

Do you mean with only id, without name? MS and I assume most others have taken another approach than Mozilla. Right or wrong, that's how it is.

There was a time not long ago when the w3c strongly advised that XHTML 1.1 should NOT be served as text/html. That, as so many other things, changed. You see, they modify the specs to fit the browser interpretation of them. It's all crazy IMO. But with how it was previously intended to work in mind, I don't think Mozilla's approach is wrong. XHTML served as text/html is HTML with a few slashes added, nothing else. Why pretend?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...
...
...
<img src="Generic_files/Kids_green_header_03.png"
style="left:22px; position: absolute; top: 150px; z-index:1;"
alt="NavigationBar" usemap="#navmap1" />
<map name="navmap1" id="navmap1">
<area shape="rect" coords="15,0,114,20" href="Welcome.html" alt="Welcome" />
<area shape="rect" coords="318,0,556,21" href="Board_of_Directors.html" alt="Board" />
</map>
...
..
.

pandy

Feb 16 2011, 05:19 PM

That works. As it did before. You already knew it works if you use the # and name.

But if you are switching to HTML 4.01 you shouldn't use the XHTML slashes. Not that they affect anything, but you'll get a load of validadion errors.

GoneFish83

Feb 16 2011, 05:32 PM

QUOTE(pandy @ Feb 16 2011, 06:19 PM)

That works. As it did before. You already knew it works if you use the # and name.

But if you are switching to HTML 4.01 you shouldn't use the XHTML slashes. Not that they affect anything, but you'll get a load of validadion errors.

I'll stick with XHTML 1.0 but the usemap still does not work in firefox.

Darin McGrew

Feb 16 2011, 05:39 PM

Can you provide the URL (address) of a document that demonstrates the problem?

pandy

Feb 16 2011, 05:43 PM

The snip you posted does work. Try it and see for yourself.

GoneFish83

Feb 16 2011, 05:46 PM

QUOTE(Darin McGrew @ Feb 16 2011, 06:39 PM)

Can you provide the URL (address) of a document that demonstrates the problem?

I don't have it online as of current.

GoneFish83

Feb 16 2011, 05:54 PM

Ok here is a live link http://www.ucdinc.org/ucdinc/fordl/Welcome.html

GoneFish83

Feb 16 2011, 05:59 PM

QUOTE(pandy @ Feb 16 2011, 06:43 PM)

The snip you posted does work. Try it and see for yourself.

It worked in firefox for you?

pandy

Feb 16 2011, 06:20 PM

The snip, yes. So it will for you if you bother to try it.

On the page you posted the map does not work in FF and Safari. If I disable CSS it does. I suspect it has to do with all the positioning you have going on. Check if something is covering the image, could be a transparent part of a positioned box.

I'm trying not to nag, but I think this should be ordinary links. Looks like a common enough font, so there really isn't any reason to use an image of text.

GoneFish83

Feb 16 2011, 07:54 PM

QUOTE(pandy @ Feb 16 2011, 07:20 PM)

The snip, yes. So it will for you if you bother to try it.

On the page you posted the map does not work in FF and Safari. If I disable CSS it does. I suspect it has to do with all the positioning you have going on. Check if something is covering the image, could be a transparent part of a positioned box.

I'm trying not to nag, but I think this should be ordinary links. Looks like a common enough font, so there really isn't any reason to use an image of text.

Ok, I'll play with the CSS.

Darin McGrew

Feb 17 2011, 03:37 AM

You have positioned the image map, which takes it out of the normal flow of content. With all the other positioning going on, div.spacer ends up on top of the image map.

GoneFish83

Feb 22 2011, 01:29 AM

Thank you Pandy and Darin for your help. I have the code cleaned up though not finished yet.

http://www.ucdinc.org/ucdinc/fordl/Welcome.html
displays much better now in less lines of code.

Thanks again for getting me on track to where the issue was and to clean up my style before it became a habit.

Any further suggestions you may add?