css, images and image maps — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

css, images and image maps

This page's ID: 10831

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	If you're up for some extra work, there are a few ways to make an image-map-like effect using only CSS. This means you can have philosophically-correct structural HTML markup even while using something like an image map. All you have to do is make a positionable element (such as a DIV) for each link you want in your "image map." Fill each DIV with a traditional spacer GIF. Use CSS properties on the DIV and the IMG to make them the height and width you want. Then, use absolute positioning (remember that you can do absolute positioning relative to a containing element, it just takes more testing and fiddling) to put those DIVs wherever you need them. Remember to give them a z-index property sufficient to put them in [b]front[/b] of the image you're "mapping" over. Here's an example of such a "hotspot," from my own site. <div><a href="/" title="link: home"><img id="logohotspot" src="/images/clearpixel.gif" alt="Alan MacDougall" /></a></div> The "title" and "alt" attributes are essential here. To visual browser users, it'll be an invisible clickable area on the screen (invisible is good, it means you can see your main image below it). But to a text-only browser, or a screen reader, it'll say something like "Link entitled 'link: home': Image described as 'Alan MacDougall': end of link." Therefore, it's entirely structural and accessible! I think. Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu