html - 具有多个鼠标悬停的交互式图像

Question

为了教授网站的不同组成部分，我有一个巨大的图像(在 photoshop 中制作)，其中有一堆标有页眉、侧边栏、内容、页脚等的框都在一个图像中。使用带有内部图像的绝对定位 div，我已经做到了，当鼠标悬停在图像的某些部分(例如 Logo )上时，会出现一个框，其中包含有关网站特定部分的信息，并且此框会出现在 Logo 顶部.

问题是这在 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>