Description:
To do this, the main technique is “internal hyperlinks”. The “internal hyperlinks” refers to the part of a page content. It works in a div content as same as in body content. In this case, we need several div cell and internal-hyperlinks inside of another div (outer div) element. In each div cell, we need three images, one image for hyperlink to refer previous image and one for main image to show and another image for hyperlink to refer next image. We will use the same previous and next image for different internal-hyperlink in each different div cell. Each internal-hyperlink will be used for show a specific point in mark-up inside of outer div. It will be easy to understand, if you see the HTML and CSS code. Finally, we will apply the CSS property and value “margin-bottom: 150px; of CSS selector a.pos” to show the slider in center of the window. Actually, it works in up and down words. But when we see, it works looks like in left and right words.
Specially, see the below tag to understand in HTML and CSS code:
<a class="pos" name="p1" style="color:white;">p1</a>
<a href="#p1"><img src="prev.gif" alt="" /></a>
DEMO
The HTML and CSS code:
<html>
<head>
<style type="text/css">
#container {
visibility:hidden;
position:relative;
left:60px;
top:50px;
margin:0px;
padding:0px;
border:1px solid red;
width:285px;
height:195px;
}
#outer {
visibility:visible;
position:absolute;
left:0px;
top:0px;
margin:0px;
margin-top:0px;
margin-bottom:30px;
padding:0px;
border:0px solid green;
width:280px;
height:390px;
overflow-y:hidden;
}
a.pos {
visibility:hidden;
position:relative;
display:block;
margin:0px;
padding:0px;
border:0px solid blue;
margin-bottom:150px;
z-index:-2;
}
.cel {
position:relative;
margin:0px;
padding:0px;
border:0px solid blue;
width:250px;
height:150px;
}
.prev {
position:relative;
margin:0px;
padding:0px;
border:0px solid red;
width:20px;
height:150px;
float:left;
}
.next {
position:relative;
margin:0px;
padding:0px;
border:0px solid red;
width:20px;
height:150px;
float:left;
}
.img {
position:relative;
margin:0px;
padding:0px;
border:0px solid red;
width:150px;
height:150px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="outer">
<a class="pos" name="p1" style="color:white;">p1</a>
<div class="cel">
<div class="prev">
<a href="#n3"><img src="http://www.sigmamarinebd.com/imgslider/prev.gif" alt="" /></a>
</div>
<div class="img">
<img width="150" height="150" src="http://www.sigmamarinebd.com/imgslider/img6.jpg" alt="" />
</div>
<div class="next">
<a href="#n1"><img src="http://www.sigmamarinebd.com/imgslider/next.gif" alt="" /></a>
</div>
</div>
<br />
<a class="pos" name="n1" style="color:white;">n1</a>
<div class="cel">
<div class="prev">
<a href="#p1"><img src="http://www.sigmamarinebd.com/imgslider/prev.gif" alt="" /></a>
</div>
<div class="img">
<img width="150" height="150" src="http://www.sigmamarinebd.com/imgslider/img7.jpg" alt="" />
</div>
<div class="next">
<a href="#n2"><img src="http://www.sigmamarinebd.com/imgslider/next.gif" alt="" /></a>
</div>
</div>
<br />
<a class="pos" name="n2" style="color:white;">n2</a>
<div class="cel">
<div class="prev">
<a href="#n1"><img src="http://www.sigmamarinebd.com/imgslider/prev.gif" alt="" /></a>
</div>
<div class="img">
<img width="150" height="150" src="http://www.sigmamarinebd.com/imgslider/img8.jpg" alt="" />
</div>
<div class="next">
<a href="#n3"><img src="http://www.sigmamarinebd.com/imgslider/next.gif" alt="" /></a>
</div>
</div>
<br />
<a class="pos" name="n3" style="color:white;">n3</a>
<div class="cel">
<div class="prev">
<a href="#n2"><img src="http://www.sigmamarinebd.com/imgslider/prev.gif" alt="" /></a>
</div>
<div class="img">
<img width="150" height="150" src="http://www.sigmamarinebd.com/imgslider/img9.jpg" alt="" />
</div>
<div class="next">
<a href="#p1"><img src="http://www.sigmamarinebd.com/imgslider/next.gif" alt="" /></a>
</div>
</div>
<a class="pos" name="n3" style="color:white;">n3</a>
</div></div>
</body>
</html>
No comments:
Post a Comment