In this tutorial I will show you how to create Apple style interactive sticker effect.
View Demo
<!doctype html>
<html>
<head>
<title>Apple Interactive Sticker Effect</title>
<style type="text/css">
.box
{
width: 543px;
height: 356px;
position: relative;
clear: both;
}
.background
{
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#section
{
position: relative;
float: left;
width: 125px;
height: 356px;
z-index: 3;
background-color: transparent;
}
.sticker
{
display: none;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
</style>
<script type="text/javascript">
function section_mouseover(element)
{
var number = element.getAttribute("data-part");
var elementList = document.getElementsByClassName("sticker");
for(var count = 0; count < elementList.length; count++)
{
if(elementList[count].getAttribute("data-part") == number)
{
elementList[count].style.display = "inline-block";
}
else
{
elementList[count].style.display = "none";
}
}
}
</script>
</head>
<body>
<div class="box">
<div id="section" onmouseover="section_mouseover(this);" data-part="1"></div>
<div id="section" onmouseover="section_mouseover(this);" data-part="2"></div>
<div id="section" onmouseover="section_mouseover(this);" data-part="3"></div>
<div id="section" onmouseover="section_mouseover(this);" data-part="4"></div>
<img class="background" src="images/background.jpg" />
<img class="sticker" data-part="1" src="images/sticker1.png" />
<img class="sticker" data-part="2" src="images/sticker2.png" />
<img class="sticker" data-part="3" src="images/sticker3.png" />
<img class="sticker" data-part="4" src="images/sticker4.png" />
</div>
</body>
<html>
<head>
<title>Apple Interactive Sticker Effect</title>
<style type="text/css">
.box
{
width: 543px;
height: 356px;
position: relative;
clear: both;
}
.background
{
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#section
{
position: relative;
float: left;
width: 125px;
height: 356px;
z-index: 3;
background-color: transparent;
}
.sticker
{
display: none;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
</style>
<script type="text/javascript">
function section_mouseover(element)
{
var number = element.getAttribute("data-part");
var elementList = document.getElementsByClassName("sticker");
for(var count = 0; count < elementList.length; count++)
{
if(elementList[count].getAttribute("data-part") == number)
{
elementList[count].style.display = "inline-block";
}
else
{
elementList[count].style.display = "none";
}
}
}
</script>
</head>
<body>
<div class="box">
<div id="section" onmouseover="section_mouseover(this);" data-part="1"></div>
<div id="section" onmouseover="section_mouseover(this);" data-part="2"></div>
<div id="section" onmouseover="section_mouseover(this);" data-part="3"></div>
<div id="section" onmouseover="section_mouseover(this);" data-part="4"></div>
<img class="background" src="images/background.jpg" />
<img class="sticker" data-part="1" src="images/sticker1.png" />
<img class="sticker" data-part="2" src="images/sticker2.png" />
<img class="sticker" data-part="3" src="images/sticker3.png" />
<img class="sticker" data-part="4" src="images/sticker4.png" />
</div>
</body>
