This link has been bookmarked by 100 people . It was first bookmarked on 02 Mar 2006, by Sérgio Carvalho.
-
Felipe LavínImage MapsBelow is a sample image map that's built entirely using CSS and XHTML. While I've added support for Javascript (item titles are simply displayed beneath the image), I've disabled it in this example -- I've run into a bit of a problem when JS is
-
Sheri Trapp-Cordovahow to article
-
Zach HarkeyThis has a lot of potential for custom CMS-ability with drupal
-
Jason GreenHow to for image maps using only CSS and HTML
-
-
definition
-
-
-
CSS Image Maps
Image MapsBelow is a sample image map that's built entirely using CSS and XHTML. While I've added support for Javascript (item titles are simply displayed beneath the image), I've disabled it in this example -- I've run into a bit of a problem when JS is enabled and CSS is disabled (more details below). -
CSS Image Maps
Image MapsBelow is a sample image map that's built entirely using CSS and XHTML. While I've added support for Javascript (item titles are simply displayed beneath the image), I've disabled it in this example -- I've run into a bit of a problem when JS is enabled and CSS is disabled (more details below). - 1 more annotations...
-
-
Triple EntendreCSS Image Maps
-
Ken Lee一篇介绍如何编写CSS的好文章
-
-
In the end, I decided to make use of Doug Bowman's Sliding Doors technique combined with a definition list (
The sliding doors technique allows you to contain all your image rollover effects in one image file, and make use of the background-position CSS property to "shift" the image in any direction. By adding a :hover effect to your CSS (in this case to the tag contained within the- tag), you can shift the image to a desired position.
What I did was build the image map in Photoshop. As you can see by this image, the map is made up of 3 copies of the same image, each with different markings. The top (1 of 3) simply marks the hotspots with numbers, and middle and bottom images (2 and 3 of 3) each contain the rollover effects (white transparancy). You may be wondering why the rollover effect is separated into two separate images. The reason for the separation is due to the overlap in adjacent items (ie: the monitor, the notebook and the floppy disk on the desk). Rather than having a collision between the two items, the rollover effects for neighboring items were separated onto multiple copies of the same image. - tag), you can shift the image to a desired position.
-
-
xflash Manuelmapas de imagenes con css y xhtml
Page Comments
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.