Teaching the different components of a website requires a creative approach. I have created a large image using photoshop, with labeled boxes representing header, sidebar, content, footer, and more. By placing absolutely positioned divs with images inside, users can hover over specific parts of the image - like the logo - to reveal information about that particular element, displayed on top of the logo itself.
However, there seem to be compatibility issues with Internet Explorer, as the images fail to appear, and Safari on Macs displays them incorrectly. You can check out the feature here. Here are snippets from my code. Is there a more effective way to achieve this functionality or resolve the problems with IE and Safari?
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;