CSS Image Maps

转载 2005年04月22日 22:58:00

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).

The initial idea for this came from a blog posting I read over at Gina Trappini's blog, Scribbling.net. Her example was well done, but I wanted to attempt the same (or similar) using only CSS.

I then found a link to The Daily Kryogenix site (via Gina's post) that led to an image map that made use of ligher DHTML, and made use of the <title> tag to display notes about a hotspot. Still, somewhat dependant on Javascript/DHTML.

In the end, I decided to make use of Doug Bowman's Sliding Doors technique combined with a definition list (<dl></dl>).

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 <a> tag contained within the <dd> 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.

Essentially, the way this works is by placing the title of the item hotspot into the definition-term tag (<dt></dt>) of your list, followed by the description in the definition-description tag (<dd></dd>). The CSS then hides the definition-term (which is really used for when CSS is disabled), as well as the definition-description (displayed upon hover of the anchor) and displays the definition description (in this case, the description of the hotspot(s) you've chosen for your imagemap), and absolutely positions and displays the description upon rolling over the hotspot (also defined in the CSS).

The code also degrades gracefully. An <img> tag, which displays a non-mapped version of the image map, is hidden using CSS. For those who have CSS disabled, the mapped version of the image (3-piece image) does not display, since it is part of the background CSS property. Rather the non-mapped version will display, along with an unstyled definition list. If you've got the Web Developer extension for Firefox, go ahead and disable styles. You'll get a better idea of the degredation.

A sample of the code is displayed below (view source for full CSS and XHTML):


dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }

dd#monitorDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #000;
background-color: #F4F4F4;
font-weight: bold;
position: absolute;
border: 1px solid #BCBCBC;
bottom: 100%;
margin: 0;
padding: 5px;
width: 250%;


<dl id="officeMap">
<dt id="monitor">1. Monitor</dt>
<dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor. I wish I had an LCD!</span></a></dd>
<dt id="phone">2. Phone</dt>
<dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd>
<dt id="case">3. PC Case</dt>
<dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd>
<dt id="notebook">4. IBM ThinkPad</dt>
<dd id="notebookDef"><a href="#"><span>Here's my Linux notebook. Some crazy coding going on.</span></a></dd>
<dt id="floppy">5. External Floppy Drive</dt>
<dd id="floppyDef"><a href="#"><span>Floppy Drive. Ancient... I know!</span></a></dd>

A working example can be viewed below (the image below was taken from The Daily Kryogenix):

While this may not be the most "ideal" solution out there, it certainly expands upon the examples listed above. I absolutely loved Gina's idea, which is why I attempted to expand on it. Unfortunately, with the current limitations of CSS (as well as certain browsers), I wasn't able to fully replicate the exact functionality of Gina's example.

Here's an example that makes use of both CSS and Javascript. One problem I ran into is when CSS is disabled, but Javascript is enabled. Something weird occurs with the definition list. If you know how to correct this, let me know. I'd love to get it working.

I did manage to come across another attempt at a CSS-based image map, which looks really great. Unfortunately, due to IE's limitations (specifically with only support of the :hover effect on the <a> tag), it's not cross-browser compatible (yet!).

If you have any questions, concerns, and/or suggestions for improvement, please feel free to send me a note: frankmanno [-at-] gmail [-dot-] com.

The examples have been succesfully tested in Safari, Firefox (Mac/Win), IE6/Win, and Opera 7.5/Mac. For some odd reason, the Javascript version works in IE5/Mac, whereas the non-Javascript version doesn't.

利用pytorch实现Visualising Image Classification Models and Saliency Maps

素材来源自cs231n-assignment3-NetworkVisualization saliency mapsaliency map即特征图,可以告诉我们图像中的像素点对图像分类结果的影响。计算...
  • IAMoldpan
  • IAMoldpan
  • 2017年11月29日 17:40
  • 520

PanoramicImage Mosaic

PanoramicImage Mosaic from: http://pages.cs.wisc.edu/~csverma/CS766_09/ImageMosaic/imagemosaic.html...
  • Real_Myth
  • Real_Myth
  • 2016年08月28日 08:48
  • 930

css image自适应宽高

width: 100%; height: 100%; object-fit: cover; /* 关键属性 */ object-fit: fill; object-fit: contain; ob...
  • webZRH
  • webZRH
  • 2017年10月23日 14:30
  • 134

JS Image Maps

An image-map is an image with clickable regions.图象映象是图片的可点区域(一图片多个链接区)Examples举例Simple HTML Image ma...
  • cuoguo1111
  • cuoguo1111
  • 2007年03月06日 16:02
  • 896

css background-image 自适应宽高

最近接手前端页面,让给调样式。哥纯粹一个代码程序猿,表示那些个样式应该让前端人员或者美工小妹妹来实现. 书归正传,碰到了问题,页面要在手机上展现,众所周知,手机在中国的牌子很多,很难做到统一。 页...
  • chenqk_123
  • chenqk_123
  • 2015年03月18日 09:35
  • 58356

css 实现image宽度百分百,高度跟宽度一样大小

前言:第一次写博客(不知道从何说起),希望以后再接再励。之前也遇到很多问题,有总结过,但是没有写出来(改天继续贴出其他总结),今天遇见css 实现image宽度百分百,高度跟宽度一样大小这个问题。贴出...
  • gzyzwx
  • gzyzwx
  • 2017年07月24日 22:51
  • 628

undefined css/js/image file html文件

preference ---web --web resources
  • ena12345
  • ena12345
  • 2016年01月06日 16:37
  • 1408

linux /proc/pid/maps 信息分析

接下来看看maps [root@localhost proc]# cat /proc/1/maps 00110000-00111000 r-xp 00110000 00:00 0         ...
  • mldxs
  • mldxs
  • 2013年11月27日 21:29
  • 14603


感谢分享:http://blog.csdn.net/figo645/article/details/50403872 这个可以说是很多初学Springmvc的人都会碰到一个令人头痛的问题 ...
  • wisdom_c_1010
  • wisdom_c_1010
  • 2017年04月26日 10:49
  • 254

(转载) Linux下 /proc/maps 文件分析

  • wenxy1
  • wenxy1
  • 2008年12月23日 20:56
  • 13453
您举报文章:CSS Image Maps