Creating Image Hot Spots with XWD

**gbpatriot** · 02 April 2009, 07:10 PM

For the past couple of nights I've been experimenting with Image maps in XWD.
My intitial instincts were to make the hotspots using the built-in drawing tools then simply making the shapes no fill/no outline. This failed as XWD insists on drawing them as solid shapes when published.

Next I tried slicing the image in Photoshop and reassembling it in XWD using the snap to objects magnet. This works fine and allows distinct areas of the image to be linked to other sites, anchors etc. Soft grouping is also a great help when repositioning.

Finally I tried creating transparent GIFs in Photoshop and import them on top of the image map. This works, but moving and positioning can only be achieved with the 'Set view quality' slider turned right down. This seems to be the only way of keeping track of the tansparent shapes.

Has anyone else found a better way of 'hot spotting' an image?

Ray

**Ruud** · 02 April 2009, 07:19 PM

Hi Ray, i have also been trying,
found myself the easiest way / workaround and maybe this can help you:
Created a placeholder and pasted HTML code in which I created with a image mapper tool.

The only thing i now need to figure out is (from within my HTML) how to call a layer or should i then use iframes?!

Ruud.

**covoxer** · 02 April 2009, 07:33 PM

You can create image maps with Xtreme. Then embed them with placeholder in WD.

The only thing i now need to figure out is (from within my HTML) how to call a layer

What do you mean?

**Ruud** · 02 April 2009, 07:51 PM

Hi John,
sorry but i have not been succesfull creating image maps using xara so i used a image mapper programm that crated the html code for me. Maybe not so smart but currently for me the quick & dirty solution!

My code looks like:
"<area name="Hole_7" shape="poly" coords="103,242,108,232,107,223,119,208,126,199,13 8,190,145,170,146,164,163,156,181,146,193,133,210, 131,214,142,208,151,197,164,180,172,175,183,163,20 2,157,213,147,224,135,240,121,254,111,255,105,246, 103,239" href="http://www.web-example.com/holes/hole-7.jpg" alt="Hole 7" title="Hole 7" OnMouseOver="window.status='Hole 7'; return true" OnMouseOut="window.status=''; return true"> ""

and instead of using my Http reference i would like to refer to a LAYER which is already on my page!

Would it be possible to "call " or "link" to a layer from within Html code?
Thanks in advance!

Ruud.

**cursor** · 02 April 2009, 08:07 PM

Originally Posted by gbpatriot

Finally I tried creating transparent GIFs in Photoshop and import them on top of the image map. This works, but moving and positioning can only be achieved with the 'Set view quality' slider turned right down. This seems to be the only way of keeping track of the tansparent shapes.

An idea that comes to mind as I read this is to make your image maps 99% transparent. Doing so will allow for easier to move shapes around.

**covoxer** · 02 April 2009, 08:14 PM

Originally Posted by Ruud

Would it be possible to "call " or "link" to a layer from within Html code?

Yes, if you mean a pop-up layer.
Here's the code:

Code:

javascript:window.open(document.getElementById('my_popup').href,'_self')

To use it:
1. Add unique name to the object that opens popup on click (you need one otherwise popup layer will not be recognised as a popup).
2. Insert provided string into the 'href' attribute of you imagemap.
3. Replace "my_popup" with the name you gave to your thumbnail image.

Please note, that in the object name you should use only alphabet letters, digits and following characters '-', '_',
and it must start with a letter and it can't be 'x' or 'X'. Otherwise it will be encoded and you wouldn't know what
exactly to insert into the script.

**Ruud** · 02 April 2009, 08:26 PM

Thanks a lot John for helping ou, will try it tomorrow, it is 22:30 here!

Ps. Would it be possible (in future!) to export a image map from Xtreme pro into XWD?

**covoxer** · 02 April 2009, 08:28 PM

Originally Posted by Ruud

Thanks a lot John for helping ou, will try it tomorrow, it is 22:30 here!

It's 23:30 here.

Ps. Would it be possible (in future!) to export a image map from Xtreme pro into XWD?

It is possible now. Via placeholders.

**cursor** · 19 June 2009, 06:54 PM

It looks like Xtreme 5 (& Pro 5) include support for image maps: reference (bottom of page).

**steve.ledger** · 19 June 2009, 09:48 PM

This has been possible in all versions of Xtreme at least since X1.

Xara also include instructional videos relating to image maps and hotspots accessible from the help file and online here and here.