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?
Here you go, btw just a heads up I have a streaming player that automatically plays. So might want to turn down volume.
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="#" />
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.
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:
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
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.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
Europe, Middle East and Africa