Question

为了教授网站的不同组件，我有一个巨大的图像（在photoshop中制作），在一个图像中有一堆标有标题，侧边栏，内容，页脚等的框。使用绝对定位的div与里面的图像，我已经做到这一点，当鼠标悬停在图像的某些部分，例如徽标时，会出现一个框，其中包含有关该网站特定部分的信息，此框出现在徽标顶部。

问题在于，这似乎不适用于Internet Explorer（图像永远不会出现），并且图像在Safari中的Mac上不合适。我可以看到我描述的功能here 我的代码中的一些样本如下。有没有更好的方法可以完成这项任务，或解决图像没有出现在Internet Explorer中并在Safari中的Mac上定位不同的问题？

HTML

<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" width="326"   height="109" alt="Logo Information"></div>
<div class="look" id="look2"><img src="images/extensive_look/header_info.jpg" width="236" height="74" alt="Header Information"></div>
<img src="images/extensive_look/website_layout.jpg" width="1200" height="890"  alt="Website Layout">

CSS

.look:hover img{
visibility:visible; 
}
.look {
position: absolute;
left: 320px;
top: 328px;
}

#look1 {
top:211px;
left:53px;  
}

#look2 {
top: 205px;
left: 487px;
}

#look3 {
top: 282px;
left: 403px;

Answer 1

像这样补充评论：

<div>
<h1 align="center">Extensive Look at a Website</h1><p style="width:800px;margin:0 auto;">As you can see in step 1 of the 7 steps, web design begins with an understanding of a website. Below is a model website featuring the different components of a website. As you scroll, make sure to mouse over the different components to get information on that component. It is important to note that while these are common parts of most websites, not every website will have every component.</p>
  <p style="width:800px;margin:0 auto;">&nbsp;</p>
</div>
<div class="content" style="position:relative;width:1200px;height:890px;background-image:url('images/extensive_look/website_layout.jpg');">
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" alt="Logo Information" height="109" width="326"></div> 

rest of look things here. 
</div>

具有多个鼠标的交互式图像

1 个答案: