打印

[讨论] 图像热点问题，FF正常，IE有问题，已解决，但不明白为什么

loveface [楼主]

老吃不饱

银牌会员

帖子: 620
体力: 1779
威望: 1
当前: 上海浦东

1^# 大中小发表于 2008-6-28 22:17

实现的效果是，当鼠标移到刘德华上，则出现白框，并TITLE显示名字。郭富城也是，黎明也是。
不明白的是，在FF下都正常，在IE下，在A标签下，加了这么一句话才正常，加了个假图片背景，根本没真实的图片。 background-image:url(.gif);
或是加一句background-color之类的，否则在IE就不正常。感觉好象A这个块里面非得有点内容才正常，但是是为什么呢？用了display:block;都不行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Image Maps</title>
<style type="text/css">
#pic {
  width: 700px;
  height: 415px;
  position: relative;
}
#pic ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#pic a{
  position: absolute;
  width: 100px;
  height: 120px;
  text-indent: -1000em;
  background-image:url(.gif); /* Only for IE */
}
#pic a:hover {
  border: 1px solid #fff;
}
#pic .ming a {
  top: 85px;
  left: 65px;
}
#pic .andy a {
  top: 115px;
  left: 440px;
}
#pic .cheng a {
  top: 190px;
  left: 575px;
}

</style>
</head>
<body>
<div id="pic">
<img src="http://fc007.com/egil_showpic.asp?url=http://hiphotos.baidu.com/%D3%C0%D4%B6%B5%C4%C2%DE%BF%C9/pic/item/80e81eb4516caa638ad4b241.jpg" width="700" height="415" alt="三大天王" />
<ul>
<li class="ming"><a href="#" title="黎明">LiMing</a></li>
<li class="andy"><a href="#" title="刘德华">AndyLiu</a></li>
<li class="cheng"><a href="#" title="郭富城">ChengCheng</a></li>
</ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 loveface 于 2008-7-1 13:07 编辑 ]

不要浮躁

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

loveface [楼主]

老吃不饱

银牌会员

帖子: 620
体力: 1779
威望: 1
当前: 上海浦东

2^# 大中小发表于 2008-6-29 14:10

有人明白吗。是不是与A下面的position: absolute;有关系呢

不要浮躁

TOP

美橙vps独立IP月付189元

loveface [楼主]

老吃不饱

银牌会员

帖子: 620
体力: 1779
威望: 1
当前: 上海浦东

3^# 大中小发表于 2008-6-30 23:51

找到答案了。

在IE中，这种链接在被定位到图片上面的时候，必须设置非透明的背景色，否则就会出现这种问题（在其它情况下，并不需要这种设置）。对于这个例子来说，为链接区域设置背景色当然是不能接受的。进一步的实例表明：作为背景的图片不会对前方的链接产生不良影响。因此，这个示例的跨平台解决方案是：将外层的〈div /〉元素设置背景图像设置的〈img /〉元素的src属性所指的图像，然后删除〈img /〉元素。当然，为了实现跨平台也得付出代价：首先，这个示例中，从实际意义来说，图像本来应该是文档内容的一部分，但将其改为背景后，它不再属于文档内容，变成了呈现样式的组成部分。其次，虽然在IE和Firefox中，可以通过右击背景图像后选择相应的菜单项来获取图像，但在别的某些浏览器（如Opera）中却没有提供这种直接获取背景图像的功能，所以这个解决方案可能给需要下载这个图片的用户造成困难。在进行前述改动之前，先再分析一下这个示例的第二个问题，因为如果按前面的说明修改了之后，第二个问题就不容易看出来了。现在在〈div /〉元素之后加上一句话“Hello CSS”，在IE中查看，会发现这一行字与图片之前有一个较大的间距。在IE DOM查看器中可以看到，这个间距是被〈ul /〉元素占据的。块元素没有设置样式属性overflow或将其设置为visible值的时候，如果其指定的大小不足以容纳其内容时，标准的行为应该是不改变块元素的大小，但让内容溢出。但在IE中，拥有布局的块元素的大小将被自动扩展以适应内容。在本例中，由于〈ul /〉元素的存在，〈div /〉的高度实际上大于图片的高度，所以后续内容与图片底边就有了一个较大的间距。就本例而言，如果按前面的说明去掉〈img /〉元素，第一个问题解决了，而且由于〈ul /〉块将上移，其顶边与〈div /〉的顶边对齐，看起来第二个问题也解决了。且慢，试着用鼠标去激活几个链接，会发现对于第一个人，鼠标如果指向其鼻子以上的部分就不能激活链接。使用DOM查看器，发现这似乎是由于第一个〈li /〉中的〈a /〉被后面两个〈li /〉盖住了，依CSS标准来看，这当然是荒唐的行为，但IE就是这么干的。对于本例，完整的解决方案应该是：去掉〈img /〉元素，为〈div /〉元素添加“background: url(images/group-photo.jpg) left top no-repeat；”、“padding-top: 425px；”和“overflow: hidden；”这三条样式属性，并把〈div /〉的样式属性height的值改为0px。另一个方案是：去掉〈img /〉元素，去掉〈ul /〉和〈li /〉元素，让〈div /〉元素只包含赤裸裸的三个〈a /〉元素，并把原来〈li /〉元素中的class属性添加到相应的〈a /〉元素中，为〈div /〉元素添加样式属性“background: url(images/group-photo.jpg) left top no-repeat；”，去掉“#pic ul”那个规则，把“#pic .rich a”、“#pic .andy a”和“#pic .jeremy a”分别改为“#pic a.rich”、“#pic a.andy”和“#pic a.jeremy”。后一种方案看起来更简洁。如果不需要列表提供的语义的话，我更喜欢后者。

[ 本帖最后由 loveface 于 2008-7-1 13:15 编辑 ]

不要浮躁

TOP

中央美院远程平面设计进修班