Solution for clickable image map Topic is solved

[mbommerez]

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.

[xtremest]

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

Code: Select all

{htmlfix}<map.... /map>{/htmlfix}

...and that's all. Enjoy.

[josey]

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

thanks

[ghulst]

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...

[pagecafe]

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]

[greenarrow]

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