PDA

View Full Version : Question re: HTML client-side imagemap USEMAP external map file

techwannabe
10-02-2006, 02:12 PM
Hello.

Other than incorrect paths and anchors, what can cause a client-side imagemap USEMAP 'external' map file from not working?

The <map> tags work fine when located in the HTML file but not when in the external map file. I have the USEMAP="mapfile.htm#map".

The server-side works fine (I have 'AddHandler' for ISMAP (NCSA version) in .htacess).


Thanks in advance.
dang
10-02-2006, 08:28 PM
Can you post examples of your complete map tag, the mapfile.htm and your .htaccess file?

thanks!
techwannabe
10-04-2006, 01:31 AM
Thanks for your reply.

Here is a similar example:
(NOTE: I added the <HTML><HEAD></HEAD><BODY></BODY>
</HTML> tags in mapB.htm and ALL of mapA.htm except the <img src="...> tag)

Filename: mapA.htm
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="mainweb.css">
</HEAD>
<BODY>

<div class="std">
This is an ImageMap example courtesy of 'http://www.elated.com/tutorials/authoring/html/imagemaps/':<p>
<img src="images/shapes.jpg" width="375"height="102" border="0" usemap="mapB.htm#shapes">

</div>

</BODY>
</HTML>

Filename: mapB.htm
<HTML>
<HEAD></HEAD>
<BODY>

<map name="shapes">

<area shape="circle"
coords="58,50,40"
href="javascript:clicked_on('circle');"
title="Circle">

<area shape="rect"
coords="136,11,227,89"
href="javascript:clicked_on('rectangle');"
title="Rectangle">

<area shape="poly"
coords="309,13,358,89,257,89"
href="javascript:clicked_on('triangle');"
title="Triangle">

<area shape="default"
nohref>

</map>


</BODY>
</HTML>

Filename: mainweb.css
.std {
color:#FF0000;font-weight:normal;font-size:13px;font-family:Geneva,Helvetica,Arial,sans-serif;background-color:none;
text-align:center;
}

In the .htaccess, I have:
AddHandler imap-file map AND 'RedirectMatch permanent...' statements created via cPanel.

Thanks.


FYI - :doh :doh :doh
EDIT: In 'mapB.htm' above, I changed
<area shape="polygon"
TO
<area shape="poly"

EDIT#2 - the actual file names are mapA.htm and mapB.htm therefore, the 'usemap' in mapA.htm is correct. I changed these names throughout this post.
techwannabe
10-04-2006, 04:04 PM
FYI -
I edited last post in the 'MapB.htm' code.
dang
10-05-2006, 11:13 PM
I havent had a chance to look at this yet, sorry! It's been a long time since I've done anything with image maps.

Well, first thing i see off the bat is that you are calling mapB.htm, but above you have the filename MapB.htm. Web servers are case sensitive, so please make sure the names are equal case wise.

Is there a particular reason you need to use an external image map file?

Your css shouldnt matter here. I would try to eliminate as much as possible from the core issue. I'd remove your stylesheet calls until you get the image map working.

I'm not sure why you have that .htaccess setting either. It's for loading map files with the extension .map, which yours does not. You'd have to make sure your apache server is configured to load mod_imap, and then a restart to have apache load it into memory. If I were you i'd remove that .htaccess setting for now to eliminate any possibilities of it causing an issue as well, unless I'm not understanding why you are loading it.

Have you checked your error logs? I'm willing to bet it's complaining it cant find mapB.htm
techwannabe
10-06-2006, 01:01 AM
Thanks again for your reply.

I edited my original post again to reflect the actual file names which are:
mapA.htm
mapB.htm

I guess I was tired when I submitted the posts.


The reason for the 'AddHandler' statement in .htaccess was I began with creating a server-side imagemap. Actually, it worked fine. Since then, though, I decided on a client-side imagemap. Also, I tried the combination of client-side and server-side as was suggested in various imagemap references I found.

I had tested client-side only by commenting out the 'AddHandler' line in the .htaccess file, but it had no effect; neither did commenting out the references to the '.css' attribute.

I am TOTALLY PERPLEXED! This should work (???)!!!

Again, the imagemap works fine when the code is added to 'mapA.htm' without the external file. I really don't need the external file, but at the same time, I would like the option.

I also tried adding 'onMouseOver' and 'onMouseOut' for 'window.status' to each <area> tag since the links in some cases are quite unattractive. I tried it within 'mapA.htm' when I included the <map> tags WITHOUT the 'mapB.htm' external files. For some reason, that doesn't work either! How come? This feature I really do want.


Thanks again.
dang
10-06-2006, 09:40 AM
I'll try to take a look later today and see if I can get it to work here.
techwannabe
10-09-2006, 08:57 PM
Thanks. Any update yet?
dang
10-09-2006, 09:47 PM
I just looked again, and I have more questions.

What exactly is not working for you? Clickin on an area in the image map? The image not loading? etc?
dang
10-09-2006, 11:00 PM
Ok, I figured it out. To do a file include, you must use a .map file that is well formed. Your's isnt formed correctly.

Below is how I got it to work:

mapa.htm:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="mainweb.css">
</HEAD>
<BODY>

<div class="std">
<a href="shapes.map"><img src="/images/shapes.jpg" ISMAP></a>
</div>

</BODY>
</HTML>


shapes.map

circle http://www.yahoo.com 58,50 40,45
rect http://www.google.com 136,11 227,89
poly http://www.msn.com 309,13 358,89 257,89


The other thing is to make sure that the mod_imap module is loaded and added to your httpd.conf file of apache, which it should be by default. The default config of apache has it included. If yours doesnt, add these two lines:

LoadModule imap_module modules/mod_imap.so
AddHandler imap-file map

Then restart apache.

Your coordinates for the circle were wrong. You only have 3 points, where there should be 4 (this is NCSA style).

The format should be:
circle url x1,y1 x2,y2
Where x1,y1 is the center and x2,y2 is a point on the circumference.
(reference http://www.apacheweek.com/features/imagemaps

Other than that, it works for me just fine. I have it pointing to just standard urls for testing purposes since I dont have your javascript, but they all work just fine for me.

Hope this helps!
Ioman
10-09-2006, 11:12 PM
Wow impressive stuff guys!
dang
10-12-2006, 09:37 AM
Techwannabe,

just curious if that worked for you. let me know