Sandbox

Every one who tried to make a clickable image map knows that de wysiwig editor strips all the mapinfo...
This is a workaround.

- google and http://coders.mlshomequest.com/component/option,com_docman/task,cat_view/gid,24/Itemid,43/ download and install the mosaddphp (or josaddphp) mambot. Do not forget to Publish it afterwards.
- make a map 'mosaddphp' (or 'josaddphp') in the root of your website

- Create the image map in your favourite html-editor. I make mine in Frontpage.
- open html mode and select the image and image map info
- open the content page in your wysiwyg editor in html mode
- copy paste the map and image info into the content page where you want the clickable map
- copy the image to your \image\stories\(sub)map
- edit the path to your image so that it matches the place where you saved it - before you save your content page, cut and paste the mapinfo (starting with ) in a fresh text file.
- save this file in the map josaddphp that you created in the root.
- save this text file as e.g. 'imap001.php'
- you willl still have to change the url's to the corresponding urls inside Joomla/mambo and save again but at this moment it is the map info that matters.
- return to your wysiwig editor
- right at the place where you cut the map info, that is right before the tag, insert the mambot {mosaddphp:imap001.php} (or josaddphp:... with the name of your text file)
- save the page
- find the url's of the pages that your links will point to and copy paste them in the imap001.php file at the right place.
- each line will have something like:

Code: Select all

<area href="index.php?option=com_content&task=view&id=59&Itemid=72" shape="rect" coords="147, 285, 322, 354"></map>

- to find the links, you can link each content page to a temporary menu item and then copy paste the link made by the menu (and then delete the menu item)

you're done...
test the image map
mine are working fine

disclaimer: I take no responsability whatsoever for the functioning or security problems of this workaround.

I searched for image map but found no solution for WYSIWYG editor and makeing image map in Joomla. I discovered it myself.

The very simple and may be the best solution is really HTMLFIX mambot (You should read what it does here.
You just put
...and that's all. Enjoy.

please explain more ... this is what i want, but don't understand totally what you did compaired to the aboive post.

thanks

This does not seem to work anymore. The download is 0kb right now. Are there any new developments? I have searched, but could not find anything else...

I was able to get the map to work in FireFox, but not in IE or Safari - so I would appreciate any assistance with those browsers.

Here is what I did:

The JCE WYSIWYG editor needs to be configured to allow image maps. Under the JCE Configuration, add "map[name],area[shape|coords|href]" 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
- export image/code
- go to your Joomla content item, edit, insert/upload the image
- add map name to image in JCE Advanced tag
- add map code to html for that content/image in JCE html editor
- apply your changes

Lorrie


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

to me easiest way is :

give the link to an image using tiny mice's link icon. give the url you want to connect in the link dialog box .

NOW go to the insert image option ( TREE ICON ) in this dialog box's APPEARANCE tab set BORDER to ZERO