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 have allowed the tags: in Site Configuration / Input formats
I notice below where I am posting this that in the list of allowed HTML tags that area and map are not included. But it appears from this thread that they are being used with some success by others.
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!
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.
You've not connected your IMG tag to the map-- you need to add 'usemap="#Map"' to your IMG tag.
=== "Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu "God helps those who help themselves." - Ben Franklin "Search is your best friend." - Worldfallz
Try it with tinymce disabled-- iirc there's some additional config you need to do to tell tiny not to strip out the map tag. I believe i saw it over at the moxiecode forums (trying searching "image map").
=== "Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu "God helps those who help themselves." - Ben Franklin "Search is your best friend." - Worldfallz
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....
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
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...
FYI-- the same site linked above (http://code.google.com/p/imgmap) also has an fckeditor plugin and it works well. I used the current 2.x branch of the fckeditor module with the 2.6.3 version of fckeditor.
=== "Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu "God helps those who help themselves." - Ben Franklin "Search is your best friend." - Worldfallz
since you say that you got the imgmap plugin working for fckeditor, i ask you for a little help.
I followed the instructions on the website http://martinezdelizarrondo.com/fckplugins/imgmap/docs/install.html closely, yet still can't get it to work. I use the FCKeditor 6.x-2.1 plugin with Drupal 6.16 (NOT as part of wysiwyg module, since that seemed even more complicated to modify) and the latest fckeditor version 2.6.6.
My problem is that the button simply does not show up in the fckeditor menu. I also get an error message when trying to use other toolbars than "Basic" and "Default" (e.g. DrupalBasic and DrupalFull or any other Toolbar i created myself). I added the code snippets to
fckconfig.js and fckeditor.config.js. Since fckconfig.js is existent in /modules/fckeditor as well as in /modules/fckeditor/fckeditor, i edited both and still got no effect.
Maybe you or anyone else got an idea what might be the problem?
I finally got it to work. Anybody having problems with this: Make sure that the path is correct: /modules/fckeditor/plugins - Not in the /editor/plugins file.
Also make sure to also add the <img> tag to the "allowed html". I inserted <area> and <map> but didn't think of the <img> tag.
Me = Dumbass ^^
Also note that there are two fckconfig.js files and the fckeditor.config.js file. I edited all three because i couldn't figure which was the right one.
Hope this helps someone who made one of the above mistakes.
IF you did not know this already... the tinymce module is deprecated by the wysiwyg module.
I was able to get the imgmap plugin to work for that module it seems...
After putting the proper unzip in the proper tinymce folder,
had to edit sites/all/modules/wysiwyg/editors/tinymce.inc instead of the old plugin_reg.php
// added after table plugin array description for img support
// pep, http://code.google.com/p/imgmap/wiki/TinyMCE_setup
'imgmap' => array(
'path' => $editor['library path'] .'/plugins/imgmap',
'buttons' => array('imgmap' => t('Image Map')),
'extended_valid_elements' => array('img[usemap|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseove
r|onmouseout|name],map[id|name],area[shape|alt|coords|href|target]'),
'url' => 'http://code.google.com/p/imgmap/',
'internal' => TRUE,
'load' => TRUE,
),
// end mod for imgmap
I got the button to work in TinyMCE by adding the imgmap lines to tinymce.inc without a hitch. (and this seems to be the default methodology for adding buttons for any of the advanced tinymce 3rd party functions...as it also is in TinyMCE withOUT the Wysiwyg module...which is part of the tinymce init string...a feature by design)
However when I would submit my page...no image map. I struggled, read, cut, pasted, tried different themes, got lost in the moxiecode forums...but nothing was ringing true for me.
Then I got to looking at the source html on pages with a working image map, and noticed that sometimes the array and area attributes were miles away at the bottom of a page of html code, outside of any div tags or other containers.
Then it dawned on me that the NECCESSARY initial parameter that specifies that an imagemap is about to "happen" is actually a part of the img attribute.
So to get this to work, we have to get the usemap parameter registered to render itself within the img attribute before IE or FF or chrome even start looking for areas or arrays.
So after a pack of marlboro lights and a pot of coffee, I just typed in 6 more characters to tinymce.inc to make it work.
I added the usemap parameter to the img attribute in the advimage part of the tinymce.inc.
Like so:
'extended_valid_elements' => array('img[usemap|src|alt|title|align|width|height|hspace|vspace|border|style|class|onmouseover|onmouseout|id|name]'),
Then I got so emboldened that I went one step further and added onmouseover|onmouseout|title to the end of the area attribute of the imgmap button like so:
'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|
onmouseover|onmouseout|title]'),
And this gave me the ability to add highlighting and popup titles to my imagemap as well. (which has to be handcoded via the html screen...but at least they are there now)
I hope this helps anyone else who struggled with this like I did.
So, I followed all of the above install advice, and I could see that "Image Map" was added as an option in my "buttons and plugins" list in the Wysiwyg admin. But when I went back to my content page, the editor was gone and the textarea was just showing me HTML. If I went back and deselected Image Map, my button menu returned.
I'm running Drupal 6.15 (Pressflow) and TinyMCE 3.2.7. The code snippet that goes into tinymce.inc looks just like all the others, and there aren't any errors.
It looks like a co-worker added another plugin by adding a [plugin-name.inc] file in the root of the plugins folder rather than following this, and I also tried copying it, but doing that doesn't break the TinyMCE, it just doesn't add the button to the menu. :/ Anybody else find this...or more importantly, anybody else get around this? Thanks!
Noticed this today when a user discovered that they couldn't float:left any images. Add "style" to the list for the img tag on the "extended_valid_elements" line:
// added after table plugin array description for img support
// pep, http://code.google.com/p/imgmap/wiki/TinyMCE_setup
'imgmap' => array(
'path' => $editor['library path'] .'/plugins/imgmap',
'buttons' => array('imgmap' => t('Image Map')),
'extended_valid_elements' => array('img[style|usemap|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseove
r|onmouseout|name],map[id|name],area[shape|alt|coords|href|target]'),
'url' => 'http://code.google.com/p/imgmap/',
'internal' => TRUE,
'load' => TRUE,
),
// end mod for imgmap
Without style being specified it strips the style tag, even though it allows you to specify it in the image settings.
for some reason, when the image assist module is installed (which is a must) the usemap attribute is overriden by the img_assist extended_valid_elements configuration, the above modification won't work and I managed to get it to work in the img_assist.module file :
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.
For those who don't know, GIMP has an excellent image map plugin.
In GIMP, go to filters, web, image map.
It's hard to believe that it wasn't mentioned here already. http://docs.gimp.org/en/plug-in-imagemap.html
That's not really the topic of this post and should get its own thread, but you would add an image map like any other content. You could enter the html directly into a node and set that to be the front page or create a custom page--front.tpl.php and put the html there, or even a custom block and put it there. Basically just about any way you can handle front page content can accommodate an image map.
Comments
=-=
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 created the html in
I created the html in DreamWeaver and copied the html code over into the HTML option under primary content. It wouldn't save the html I added.
=-=
You have to edit the node and expand the input format menu, and choose the FULL HTML filter so that the HTML isn't stripped out of the node.
image not showing up
Thanks for the helpful post.
I am having a problem getting the image to show up.
I am using Full HTML and calling the following tag:
<img src="/files/mainmap.png" border="0" usemap="#map" />the file is in the files directory but when i load the page the content is blank.
Thanks
your image tag looks
your image tag looks ok.... post the map html also....
Still no Joy
Hello,
I have allowed the tags: in Site Configuration / Input formats
I notice below where I am posting this that in the list of allowed HTML tags that area and map are not included. But it appears from this thread that they are being used with some success by others.
The images shows but there are no links. The URL is http://www.uvita.biz/node/66
Many thanks for any help,
Ben
=-=
goto administer -> input formats
add the tags to the input format you are using or submit that node with the FULL HTML input format.
some helpful (hopefully) image map info
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).
ImageMap
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
Problem using imagemaps
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 ?
This is the html on my page:
This is the html on my page:
You've not connected your
You've not connected your IMG tag to the map-- you need to add 'usemap="#Map"' to your IMG tag.
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
Ahhh True! stupid of me not
Ahhh True!
stupid of me not to observe that. However, When i add the tag now, it gets erased when i hit "Submit" and i am back to my problem.
I am using TinyMCE and i Tried this with Full HTML and Unfiltered HTML support both but it didnt work.
Try it with tinymce
Try it with tinymce disabled-- iirc there's some additional config you need to do to tell tiny not to strip out the map tag. I believe i saw it over at the moxiecode forums (trying searching "image map").
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
I got it working! TINYMCE
I got it working! TINYMCE cleanup was enabled which was removing the tag.
FYI a tinyMCE plugin for image map seems to work
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.
FYI-- the same site linked
FYI-- the same site linked above (http://code.google.com/p/imgmap) also has an fckeditor plugin and it works well. I used the current 2.x branch of the fckeditor module with the 2.6.3 version of fckeditor.
===
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." - Lao Tzu
"God helps those who help themselves." - Ben Franklin
"Search is your best friend." - Worldfallz
Need help with imgmap and FckEditor
Hi WorldFallz,
since you say that you got the imgmap plugin working for fckeditor, i ask you for a little help.
I followed the instructions on the website http://martinezdelizarrondo.com/fckplugins/imgmap/docs/install.html closely, yet still can't get it to work. I use the FCKeditor 6.x-2.1 plugin with Drupal 6.16 (NOT as part of wysiwyg module, since that seemed even more complicated to modify) and the latest fckeditor version 2.6.6.
My problem is that the button simply does not show up in the fckeditor menu. I also get an error message when trying to use other toolbars than "Basic" and "Default" (e.g. DrupalBasic and DrupalFull or any other Toolbar i created myself). I added the code snippets to
fckconfig.js and fckeditor.config.js. Since fckconfig.js is existent in /modules/fckeditor as well as in /modules/fckeditor/fckeditor, i edited both and still got no effect.
Maybe you or anyone else got an idea what might be the problem?
Greetings,
ducky
_____________________________________________________________________________
Edit:
I finally got it to work. Anybody having problems with this: Make sure that the path is correct: /modules/fckeditor/plugins - Not in the /editor/plugins file.
Also make sure to also add the
<img>tag to the "allowed html". I inserted<area>and<map>but didn't think of the<img>tag.Me = Dumbass ^^
Also note that there are two fckconfig.js files and the fckeditor.config.js file. I edited all three because i couldn't figure which was the right one.
Hope this helps someone who made one of the above mistakes.
_
Sorry i didn't see this sooner-- but glad you got working on your own! And thanks for posting back your solution for future users. ;-)
FYI seems to works for tiny_mce replacement module wyiwyg
IF you did not know this already... the tinymce module is deprecated by the wysiwyg module.
I was able to get the imgmap plugin to work for that module it seems...
After putting the proper unzip in the proper tinymce folder,
had to edit sites/all/modules/wysiwyg/editors/tinymce.inc instead of the old plugin_reg.php
I added the imgmap functionality by adding these lines too...BUT
I got the button to work in TinyMCE by adding the imgmap lines to tinymce.inc without a hitch. (and this seems to be the default methodology for adding buttons for any of the advanced tinymce 3rd party functions...as it also is in TinyMCE withOUT the Wysiwyg module...which is part of the tinymce init string...a feature by design)
However when I would submit my page...no image map. I struggled, read, cut, pasted, tried different themes, got lost in the moxiecode forums...but nothing was ringing true for me.
Then I got to looking at the source html on pages with a working image map, and noticed that sometimes the array and area attributes were miles away at the bottom of a page of html code, outside of any div tags or other containers.
Then it dawned on me that the NECCESSARY initial parameter that specifies that an imagemap is about to "happen" is actually a part of the img attribute.
So to get this to work, we have to get the usemap parameter registered to render itself within the img attribute before IE or FF or chrome even start looking for areas or arrays.
So after a pack of marlboro lights and a pot of coffee, I just typed in 6 more characters to tinymce.inc to make it work.
I added the usemap parameter to the img attribute in the advimage part of the tinymce.inc.
Like so:
'extended_valid_elements' => array('img[usemap|src|alt|title|align|width|height|hspace|vspace|border|style|class|onmouseover|onmouseout|id|name]'),
Then I got so emboldened that I went one step further and added onmouseover|onmouseout|title to the end of the area attribute of the imgmap button like so:
'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|
onmouseover|onmouseout|title]'),
And this gave me the ability to add highlighting and popup titles to my imagemap as well. (which has to be handcoded via the html screen...but at least they are there now)
I hope this helps anyone else who struggled with this like I did.
Looked promising, but it broke TinyMCE completely
So, I followed all of the above install advice, and I could see that "Image Map" was added as an option in my "buttons and plugins" list in the Wysiwyg admin. But when I went back to my content page, the editor was gone and the textarea was just showing me HTML. If I went back and deselected Image Map, my button menu returned.
I'm running Drupal 6.15 (Pressflow) and TinyMCE 3.2.7. The code snippet that goes into tinymce.inc looks just like all the others, and there aren't any errors.
It looks like a co-worker added another plugin by adding a [plugin-name.inc] file in the root of the plugins folder rather than following this, and I also tried copying it, but doing that doesn't break the TinyMCE, it just doesn't add the button to the menu. :/ Anybody else find this...or more importantly, anybody else get around this? Thanks!
And if you notice that your image style="" is getting dropped
Noticed this today when a user discovered that they couldn't float:left any images. Add "style" to the list for the img tag on the "extended_valid_elements" line:
Without style being specified it strips the style tag, even though it allows you to specify it in the image settings.
for some reason, when the
for some reason, when the image assist module is installed (which is a must) the usemap attribute is overriden by the img_assist extended_valid_elements configuration, the above modification won't work and I managed to get it to work in the img_assist.module file :
Note: above works for 2.x
Note: above works for 2.x versions, in 3.x version please go to img_assist.inc or directly in modules\wysiwyg\editors\tinymce.inc
WorkAround
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.
jQuery Map Hilight
You might be interested in checking this out
http://drupal.org/project/jq_maphilight
Imran Khan
Project Manager
New Earth Marketing
http://drupal.org/node/698160
http://drupal.org/node/698160
read it. follow link. might help you.
GIMP for image maps is easy
For those who don't know, GIMP has an excellent image map plugin.
In GIMP, go to filters, web, image map.
It's hard to believe that it wasn't mentioned here already.
http://docs.gimp.org/en/plug-in-imagemap.html
image map as front page
I would like to knw how I could set an image map as the front page to my drupal site. Any can assist me?
_
That's not really the topic of this post and should get its own thread, but you would add an image map like any other content. You could enter the html directly into a node and set that to be the front page or create a custom page--front.tpl.php and put the html there, or even a custom block and put it there. Basically just about any way you can handle front page content can accommodate an image map.
This may help
Here is an easy solution.
https://www.drupal.org/node/1236828#comment-11133103