Inserting Image Maps (linkable images) into Joomla

[pagecafe]

I was having some challenges in this area and after scouring several forums and many topics I was able to get it to work in FireFox, IE and Safari.

The JCE WYSIWYG (addon component) editor needs to be configured to allow image maps. Under the Component-JCE Configuration, add
area[shape|coords|alt|title|href],map[name]
to the list of extended elements. That will let you add your image map code in the html window without the editor stripping it out.

Then:
- create the hot spots on your image in Fireworks (or any other tool)
- export image/code
- go to your Joomla content item, edit, insert/upload the image
- assign map name to image in JCE Advanced tag
- add map code to html for that content/image in JCE html editor
- add a # to the front of the map name in usemap= in the



Hope that helps!
Lorrie


[mod note: removed manual signature. Please add signatures to your profile and not to each post]

[tethmosis]

Read this...
http://forum.joomla.org/index.php?topic=38391.msg989893
But i suggest using the "Image map" feature of the JCE editor. (Also stated in the above link/thread)

[pagecafe]

Thank you for linking to the other post - however that solution had some more complexity to it and the htmlfix existence was questioned. 

I did make an entry at the bottom of that post before I was able to get the solution working in IE and Safari. 

After solving the IE/Safari issue, I re-wrote the solution and posted it in it's own thread to hopefully benefit the Joomla Commuity at large.

Warm Regards,
Lorrie


[mod note: removed manual signature. Please add signatures to your profile and not to each post]

[infograf768]

Good tip!

[pe7er]

MOD note: Crosspost deleted.
Thanks for sharing this usefull info but please do not crosspost your messages.
See the Forum rules: http://forum.joomla.org/index.php/topic,65.0.html

[laughingbird]

Excellent tip PageCafe!
Thanks for taking the time to post this. It's just what I was looking for.

Tethmosis -- same for you! I appreciate the link.

- Marc

[richrock]

Thanks for the link - works fine on my 1.0.x sites. 

However, anyone know how to do this on Joomla 1.5 RC3?  Hoping to do this for my personal site.  I've tried injecting code, looked at the CSS tricks available (I'm using different images and different maps per category/section... 

I'm at a bit of a loss.

Rich

[MonsterStore]

Thanks loads for this. You saved me a lot of trial and error. It worked beautifully

[KevinDavis004]

It looks like it can work, however, when I put my image map code in it seems the shape and coordinates disappear...

[vsllc]

Does this work in 1.5. How do you add extended elements?

[pagecafe]

I have not tried this in 1.5 yet.

The code is getting stripped because of the editor, I use JCE to change the extended elements do this:

The JCE WYSIWYG (addon component) editor needs to be configured to allow image maps. Under the Component-JCE Configuration, add
area[shape|coords|alt|title|href],map[name]
to the list of extended elements. That will let you add your image map code in the html window without the editor stripping it out.

[vsllc]

This may be where my confusion is coming in. I am using the latest JCE for Joomla 1.5. When I go to Component-JCE Administrator-Configuration I have the following tabs inside the JCE Editor Setup: "Control Panel", "Configuration", "Groups", "Plugins" and "Install". On the configuration tab I don't see where I add or view extended elements. The other tabs don't have anything obvious either. Any ideas?

[pagecafe]

Yes, I was referring to an older release of JCE.

I recommend going to the JCE website and searching their forum/documentation for extended elements.

Good luck and please post what you find out on this thread.

[ronniee]

I have found the "Extended Elements" in the latest JCE for Joomla 1.5.

Go to Components -> JCE Administration -> Groups in admin panel, you will find the "Default" group here. Enter into this group, you will see some tabs. Click on "Editor Parameters" tab. Then, you will see the "Extended Elements" in the middle of the screen.

Hope this will help everyone!

- ronniee