Hello there. I was wondering how to replicate the rollover that Apple is using on their Mac page: http://www.apple.com/mac/ when you rollover the laptop?
Many thanks.
Hi,
They are using a div with a load of nested images hidden by default and as you move your mouse across the laptop the js adds a class to the relevant image which then appears.
<div id="interactive-sticker" class="interactive-sticker">
<figure class="sticker sticker-01"></figure>
<figure class="sticker sticker-02"></figure>
<figure class="sticker sticker-03"></figure>
<figure class="sticker sticker-04"></figure>
<figure class="sticker sticker-05"></figure>
<figure class="sticker sticker-06"></figure>
<figure class="sticker sticker-07"></figure>
<figure class="sticker sticker-08"></figure>
<figure class="sticker sticker-09 show" id="default"></figure>
<figure class="sticker sticker-10"></figure>
<figure class="sticker sticker-11"></figure>
<figure class="sticker sticker-12"></figure>
<figure class="sticker sticker-13"></figure>
<figure class="sticker sticker-14"></figure>
<figure class="sticker sticker-15"></figure>
<figure class="sticker sticker-16"></figure>
<figure class="sticker sticker-17"></figure>
<figure class="sticker sticker-18"></figure>
<figure class="sticker sticker-19"></figure>
<figure class="sticker sticker-20"></figure>
<figure class="sticker sticker-21"></figure>
<figure class="sticker sticker-22"></figure>
<figure class="sticker sticker-23"></figure>
<figure class="sticker sticker-24"></figure>
<figure class="sticker sticker-25"></figure>
<figure class="sticker sticker-26"></figure>
<figure class="sticker sticker-27"></figure>
<figure class="sticker sticker-28"></figure>
<figure class="sticker sticker-29"></figure>
<figure class="sticker sticker-30"></figure>
</div>
Without JS there is no rollover effect at all.
I guess you could do it with css and set target areas around the laptop (absolutely placed elements) and then show an image as you pass over the target area. You would still need js to make the image persistent when you move away from the area.
Thanks. is there a Js library or jQuery that you know of?
Not for that special effect but you could write your own with jquery (or preferably vanilla css).
Here’s a short demo of how I would go about it for IE8+.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.laptop{
width:600px;
height:300px;
margin:20px auto;
border:1px solid #000;
box-shadow:0 0 20px rgba(0,0,0,0.3);
position:relative;
background:red;/* put your default image here */
z-index:1;
}
.laptop:after{
content:" ";
clear:both;
display:block;
height:0;
}
.img{
float:left;
width:200px;
height:150px;
cursor:pointer;
}
.img span{
position:absolute;
left:-999em;
top:-999em;
width:100%;
height:100%;
z-index:-1;
}
/* list your images here instead of the background:colour */
.img1 span{background:yellow}
.img2 span{background:blue}
.img3 span{background:green}
.img4 span{background:teal}
.img5 span{background:orange}
.img6 span{background:black}
/* now show it*/
.img:hover span,.img.active span{left:0;top:0}
</style>
</head>
<body>
<div class="laptop">
<div class="img img1"><span></span></div>
<div class="img img2"><span></span></div>
<div class="img img3"><span></span></div>
<div class="img img4"><span></span></div>
<div class="img img5"><span></span></div>
<div class="img img6"><span></span></div>
</div>
<script>
$( ".img" ).hover(function() {
$('.laptop .img').removeClass('active');
$( this ).addClass('active');
}
);
</script>
</body>
</html>
Jquery would be overkill for this but if you are already using it then its not a problem.
1 Like
Many thanks!