Skip navigation

Dreamweaver CC

Dweeboh Calculating status...

Currently Being Moderated

Hotspot tool on Image

Jun 20, 2012 9:52 PM

Tags: #image #menu #hotspot

I have a menu at the top that stretches 100% across the screen. The problem I am facing when using "HOTSPOT" on the image is.. When I go view it live in the browser, or shrink the browser it seems like the hotspots get offset from where I originally put them. Is their a way to fix this?

584 Views 4 Replies Latest reply: Nancy O., Jun 21, 2012 2:53 PM

Replies

Currently Being Moderated

1. John Waller,

Jun 20, 2012 10:02 PM in reply to Dweeboh

Report

How have you coded the page?

Can you provide a link so we can take a look?

|
Mark as:
Currently Being Moderated

2. Dweeboh,

Jun 20, 2012 10:20 PM in reply to John Waller

Report

Here you go, btw just a heads up I have a streaming player that automatically plays. So might want to turn down volume.

http://xionradio.com/

If you notice, the clickable areas are no longer overtop of the text on the image.. but they should be.

The code being used is.

<img src="http://www.xionradio.com/LOGO.jpg" usemap="#Map" style="position: absolute; top: 0; left: -7px; width: 100%" border="0">
<map name="Map" id="Map">
<area shape="rect" coords="418,4,532,34" href="#" />
<area shape="rect" coords="684,5,804,35" href="#" />
<area shape="rect" coords="953,4,1060,35" href="#" />
<area shape="rect" coords="1206,3,1372,32" href="#" />
</map>

I'm sure the coordinates have something to do with it.. But I mean everyones screen size is different so I don't know how to get it to work properly.

|
Mark as:
Currently Being Moderated

3. adninjastrator,

Jun 21, 2012 7:04 AM in reply to Dweeboh

Report

style="position: absolute; top: 0; left: -7px; width: 100%"
because you are pinning the image to the top left, changing the browser window dimensions will alter the relative location of those hot spots over the top of various parts of that image.
You might be better off using a simple menu script. Then are tons of good menus available such as:
http://www.cssplay.co.uk/menus/
and
http://www.cssmenumaker.com/
Or, skip the 100% width. I for one amlost never want to expand a Web page out over my entire monitor.
Then using a set width would allow your hotspots to stay put and work correctly. You could still have a 100% background image if you wanted,just keep the content (including menu) in a set width container
Best wishes,
Adninjastrator

|
Mark as:
Currently Being Moderated

4. Nancy O.,

Jun 21, 2012 2:53 PM in reply to Dweeboh

Report

Back in the 1990s, designers used image maps because it allowed them to let their creative juices flow on the web. In 2012, we don't use image maps much anymore because they are not flexible. Hotspot coordinates don't resize with the image. There's no way to fix this unless you make your image map a set width in pixels.

If you're married to a liquid layout (% based), slice your image map into separate images with your graphics editor. Add links and float images across the page with CSS. In narrower viewports, floated images will drop to the next line and links will remain intact.

Example:
http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

|
Mark as: