Disjointed rollover - 3 images at once

HTML & CSS
1

Hi

I have managed to follow along a tutorial for a disjointed rollover but i have somewhat stumbled into a brick wall.

I have 3 divs with three seperate images in. I also have a menu with a list of products and the functionallity i am after is that when the user hovers over each product name the three seperate divs with images will change at once - three different angled shots of the product.

This is what I have done so far:


#container2 {position:relative; width:331px; height:228px; font-family:verdana, arial, sans-serif; font-size:12px;}
 
a.pics2 {float:left; border: 0; cursor:pointer;}
 
a.pics2 span {display:none; width:331px; }
 
a.pics2:hover span {display:block; position:absolute; left:462px; top:818px; z-index:10; height:228px;}


<div id="container2">
<img border="0" src="assets/polaroid/polaroidTest.png"/>
</div>



<a class="pics2" href="#nogo">pic1
<span><img src="assets/polaroid/J01562_1.png" alt="Warm to Cold" title="Warm to Cold" /></span>
</a><br />
<a class="pics2" href="#nogo">pic2
<span><img src="assets/polaroid/J01562_2.png" alt="Wheels" title="Wheels" /></span>
</a><br />
<a class="pics2" href="#nogo">pic3
<span><img src="assets/polaroid/J01562_3.png" alt="Urban Squirrel" title="Urban Squirrel" /></span>
</a>

Can anyone see wher i have gone wrong please?

2

Do you have your example online?

3

Not even sure what a ‘disjointed rollover’ is, though I would suspect that whatever it is you are trying to do the title attributes on the wrong elements, title attributes redundant to the content, classes on all the parent elements, playing around with Z-index when it shouldn’t be necessary, and bizarre hover placement add up to over-complicating whatever it is you are trying to do here.

4

the functionality i am after is that when the user hovers over each product name the three seperate divs with images will change at once - three different angled shots of the product.
Hi,
If I am understanding you correctly you want three images to show when you hover over the product anchor. You can nest three separate spans in one anchor to do that. However, if you need three anchors then the same method would apply.

I nested the main image in the anchor so the rollovers show when you hover on it too, but you could take the main image out of the anchor so the rollovers only pop up when you hover on the link text.

Working without your images while using display:block and BG colors in place of the image it would go something like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Three Images with One Rollover</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
}
.pics {
    position:relative;
    width:330px;
    margin:10px;
    padding:10px;
    font:12px/1.3 verdana, arial, sans-serif;
    background:#CDF;
}
.pics img.main {
    display:block;
    width:330px;
    height:228px;
    margin-bottom:10px;
    background:#333;
    color:#FFF;
    text-align:center;
    border:none;
} 
.pics a {
    display:block;
    text-align:center;
    text-decoration:none;
}
.pics a span {
    width:210px;
    height:150px;
    position:absolute;
    left:100%;
    top:auto;
    z-index:10;
    margin-left:-999em;
}
.pics a:hover span {
    margin:0;
}
.pics a span img {
    display:block;
    width:200px;
    height:150px;
    margin-left:10px;
    background:orange;
    border:none;
} 
.pics a:hover span.img1 {top:0;}
.pics a:hover span.img2 {top:160px}
.pics a:hover span.img3 {top:320px;}
</style>

</head>
<body>

<div class="pics">
    <a href="#">
        <img class="main" src="assets/polaroid/polaroidTest.png" alt="This is the Main Image">
        View All Angles
        <span class="img1"><img src="assets/polaroid/J01562_1.png" alt="Warm to Cold" title="Warm to Cold"></span>
        <span class="img2"><img src="assets/polaroid/J01562_2.png" alt="Wheels" title="Wheels"></span>
        <span class="img3"><img src="assets/polaroid/J01562_3.png" alt="Urban Squirrel" title="Urban Squirrel"></span>
    </a>
</div>

</body>
</html>
5

Thank you Rayzur,

This is exactly what I was looking for. Thanks for the script you provided, it helped me understand how to do it - :slight_smile: Thanks for sharing.