Image Maps -- How To?

An image map would be generated by you manually, then called into a page if you desired. Drupal doesn't automagically take an image and turn it in to a map for you.

I make extensive use of image maps on my intranet site. One thing you should know is that TinyMCE on IE7 mangles the AREA tag (even with a correct extended elements configuration for tiny). I've alerted them over at moxiecode and it does indeed seem to be a legit bug. It's only a problem if you're using TinyMCE and enable the editor on a page with an image map in IE7 (not sure about other versions of IE I only have access to 7). In firefox it's fine (what else is new).

Also, as some of my users don't have access to FULL HTML I added the image map tags into the acceptable html tags for filtered HTML.

One other thing-- someone is working on an image map plugin for TinyMCE over at http://tinymce.moxiecode.com/punbb/viewtopic.php?id=6717. Scroll down to the bottom of the thread-- there's a link down there. It's pretty rough but it does work (at least on FF, with IE7 you still have the same problem with the AREA tag mentioned above).

I am trying to work on a state map that has different counties and have a set of buttons that return county ids OnClick, I need to show icon image with in that county area. Is this possible? Any help would be much appreciated!

Thanks

Hi,

I am having a hard time embedding images with image-maps in them. The problem is that the html (the area tags) is there but I see no links on the image.
I am using TinyMCE with full HTML but I dont think that would be a problem as the HTML has tags correctly present.

Please let me know if somebody knows about it.

Did anyone find out a way to do this ?

November 21, 2008,

I am using drupal 5.12 with dev version of tinymce module and tinymce 3.x version
and I got a beta image map plugin on the google code site to work....

This webpage has code
http://code.google.com/p/imgmap/

This webpage explains install somewhat...
http://code.google.com/p/imgmap/wiki/TinyMCE_setup

NOTE
the zIp was not is a sub directory by itself so careful
where you unzip! The beta zip I reviewed did not yet
have a readme nor notes I could see, it is beta...
and the zip had more zips inside for different editors...

It is a tinymce plugin so you go to the plugin folder...
and create a directory imgmap, then extract zip inside the folder.
So from your modules folder the path:
./tinymce/tinymce/jscripts/tiny_mce/plugins/imgmap

I also beleive for tinymce we are suppose to also unzip the appropriate
zip file in same folder with additional files for editor, for my case:
unzip plugin_tinymce3.78.zip

For the steps about settinup instance and button, I think
they are referring to the plugin_reg.php which
is part of the drupal tinymce module, ./modules/tinyce/plugin_reg.php

And I added this near the bottom:

$plugins['imgmap'] = array();
$plugins['imgmap']['theme_advanced_buttons3'] = array('imgmap');
$plugins['imgmap']['extended_valid_elements'] = array('img[usemap|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],map[id|name],area[shape|alt|coords|href|target]');

Another note....
the button did not show up on firefox 3, untill I deleted my profile and its files then recreated it,
but did show up on IE! That is a firefox issue that I saw on other tinymce 3.x issues...

On firefox to delete profile reference:
http://kb.mozillazine.org/Profile_Manager
( w/o firefox open from run line, firefox -profilemanager )

Hope this helps.

I created a new filter input as "PLain HTML". Unselected all the filters, so that nothing gets filtered out. And selected this filter format while creating my node and it worked!! There is a security risk, but I had given perm to none ie only admin.

You might be interested in checking this out

http://drupal.org/project/jq_maphilight

Imran Khan
Project Manager
New Earth Marketing