<!DOCTYPE html>
<html>
<head>
<title>300x250</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Sephora">
<link rel="stylesheet" href="css/main.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.carouFredSel-6.1.0-packed.js"></script>
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<script type="text/javascript" src="js/initial.js"></script>
<script type="text/javascript">
$(function() {
sliderPaused = false;
$('#carousel').carouFredSel({
width: 300,
items: 3,
scroll: 1,
auto: {
duration: 550,
timeoutDuration: 2500
},
});
});
</script>
<script>
$("#carousel").hover(function(){
sliderPaused = true;
}, function(){
sliderPaused = false;
});
</script>
<style type="text/css">
#carousel .ProductImg_Row {
width: 100px;
margin: 0 0px;
float: left;
}
</style>
<script type="text/javascript">
function show_ProductDetails1() {
document.getElementById('ProductDetails1').style.visibility="visible";
}
function hide_ProductDetails1() {
document.getElementById('ProductDetails1').style.visibility="hidden";
}
function show_ProductDetails2() {
document.getElementById('ProductDetails2').style.visibility="visible";
}
function hide_ProductDetails2() {
document.getElementById('ProductDetails2').style.visibility="hidden";
}
function show_ProductDetails3() {
document.getElementById('ProductDetails3').style.visibility="visible";
}
function hide_ProductDetails3() {
document.getElementById('ProductDetails3').style.visibility="hidden";
}
function show_ProductDetails4() {
document.getElementById('ProductDetails4').style.visibility="visible";
}
function hide_ProductDetails4() {
document.getElementById('ProductDetails4').style.visibility="hidden";
}
function show_ProductDetails5() {
document.getElementById('ProductDetails5').style.visibility="visible";
}
function hide_ProductDetails5() {
document.getElementById('ProductDetails5').style.visibility="hidden";
}
function show_ProductDetails6() {
document.getElementById('ProductDetails6').style.visibility="visible";
}
function hide_ProductDetails6() {
document.getElementById('ProductDetails6').style.visibility="hidden";
}
function show_ProductDetails7() {
document.getElementById('ProductDetails1').style.visibility="visible";
}
function hide_ProductDetails7() {
document.getElementById('ProductDetails1').style.visibility="hidden";
}
function show_ProductDetails8() {
document.getElementById('ProductDetails2').style.visibility="visible";
}
function hide_ProductDetails8() {
document.getElementById('ProductDetails2').style.visibility="hidden";
}
function show_ProductDetails9() {
document.getElementById('ProductDetails3').style.visibility="visible";
}
function hide_ProductDetails9() {
document.getElementById('ProductDetails3').style.visibility="hidden";
}
function show_ProductDetails10() {
document.getElementById('ProductDetails4').style.visibility="visible";
}
function hide_ProductDetails10() {
document.getElementById('ProductDetails4').style.visibility="hidden";
}
function show_ProductDetails11() {
document.getElementById('ProductDetails5').style.visibility="visible";
}
function hide_ProductDetails11() {
document.getElementById('ProductDetails5').style.visibility="hidden";
}
function show_ProductDetails12() {
document.getElementById('ProductDetails6').style.visibility="visible";
}
function hide_ProductDetails12() {
document.getElementById('ProductDetails6').style.visibility="hidden";
}
</script>
</head>
<body>
<div id="BannerContent">
<div id="logo"></div>
<div class="ProductSlider">
<div id="product">
<!-- carousel Statrt -->
<div id="carousel">
<div class="ProductImg_Row">
<div class="ProductImg1" onmouseover="show_ProductDetails1()" onmouseout="hide_ProductDetails1()">
<div id="ProductDetails1" class="ProductDetailsMain1">
<p id="ProductName1" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice1" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img1' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
<div class="ProductImg2" onmouseover="show_ProductDetails2()" onmouseout="hide_ProductDetails2()">
<div id="ProductDetails2" class="ProductDetailsMain2">
<p id="ProductName2" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice2" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img2' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
</div>
<div class="ProductImg_Row">
<div class="ProductImg3" onmouseover="show_ProductDetails3()" onmouseout="hide_ProductDetails3()">
<div id="ProductDetails3" class="ProductDetailsMain3">
<p id="ProductName3" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice3" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img3' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
<div class="ProductImg4" onmouseover="show_ProductDetails4()" onmouseout="hide_ProductDetails4()">
<div id="ProductDetails4" class="ProductDetailsMain4">
<p id="ProductName4" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice4" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img4' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
</div>
<div class="ProductImg_Row">
<div class="ProductImg5" onmouseover="show_ProductDetails5()" onmouseout="hide_ProductDetails5()">
<div id="ProductDetails5" class="ProductDetailsMain5" >
<p id="ProductName5" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice5" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img5' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
<div class="ProductImg6" onmouseover="show_ProductDetails6()" onmouseout="hide_ProductDetails6()">
<div id="ProductDetails6" class="ProductDetailsMain6">
<p id="ProductName6" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice6" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img6' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
</div>
<div class="ProductImg_Row">
<div class="ProductImg7" onmouseover="show_ProductDetails7()" onmouseout="hide_ProductDetails7()">
<div id="ProductDetails" class="ProductDetailsMain1">
<p id="ProductName7" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice7" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img1' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
<div class="ProductImg8" onmouseover="show_ProductDetails8()" onmouseout="hide_ProductDetails8()">
<div id="ProductDetails2" class="ProductDetailsMain2">
<p id="ProductName8" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice8" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img2' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
</div>
<div class="ProductImg_Row">
<div class="ProductImg9" onmouseover="show_ProductDetails9()" onmouseout="hide_ProductDetails9()">
<div id="ProductDetails3" class="ProductDetailsMain3">
<p id="ProductName9" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice9" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img3' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
<div class="ProductImg10" onmouseover="show_ProductDetails10()" onmouseout="hide_ProductDetails10()">
<div id="ProductDetails4" class="ProductDetailsMain4">
<p id="ProductName10" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice10" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img4' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
</div>
<div class="ProductImg_Row">
<div class="ProductImg11" onmouseover="show_ProductDetails11()" onmouseout="hide_ProductDetails11()">
<div id="ProductDetails5" class="ProductDetailsMain5" >
<p id="ProductName11" class="ProductName">Ole Henriksen</p>
<p id="ProductPrice11" class="ProductPrice">$38.00</p>
</div>
<div class="container">
<img id='Img5' src="img/product-img-3.jpg" height="72" width="72">
</div>
</div>
</div>
</div>
<!-- carousel End-->
</div>
</div>
</div>
</body>
</html>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.