Menu
Hello, Im new and need help with an image rotator script I got from “wowslider” if anyone ever heard of it. I have the following code on my website (please note that the CSS and javascript were just pre-made and I barely adjusted anything if at all; all names of the tags are not mine):
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>unnamed</title>
<script src=”scripts/wowslider.js” type=”text/javascript”></script>
<style type=”text/css”>
/* bottom center */
#wowslider-container1 .ws_bullets {
top:0;
right: 0;
}
#wowslider-container1 {
/*overflow: hidden; */
zoom: 1;
position: relative;
width:1032px;
margin:0 auto;
z-index:100;
border:none;
}
#wowslider-container1 .ws_images{
width:1032px;
height:500px;
overflow:hidden;
position:relative;
}
#wowslider-container1 .ws_images a{
color:transparent;
}
#wowslider-container1 .ws_images img{
top:0;
left:0;
border:none 0;
max-width: none;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container1 .ws_bullets {
font-size: 0px;
padding: 5px;
float: left;
position:absolute;
z-index:70;
top:450px;
right:900px;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
#wowslider-container1 .ws_bullets a {
width:22px;
height:20px;
background: url(images/backgrounds/bullet.png) left top;
float: left;
text-indent: -1000px;
position:relative;
color:transparent;
}
#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
background-position: 0 100%;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-16px;
z-index:60;
height: 50px;
width: 39px;
background-image: url(images/backgrounds/arrows.png);
}
#wowslider-container1 a.ws_next{
background-position: 100% 0;
right:0px;
}
#wowslider-container1 a.ws_prev {
left:0px;
background-position: 0 0;
}
#wowslider-container1 .ws-title{
position: absolute;
bottom:7%;
left: 0;
margin-right:5px;
z-index: 50;
background: #FFF;
color: #000;
padding: 10px;
font-size: 19px;
font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;
text-shadow: 1px 1px 0 #fff;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 13px;
}
</style>
</head>
<!– Slideshow Backgrounds –>
<div id=”wowslider-container1″>
<div class=”ws_images”>
<div><img src=”images/backgrounds/test1.jpg” alt=”test1″ title=”test1″ id=”wows0″/><span style=”top:150px; right:300px; color:red; font-weight:bold;”>TEXTTEXTTEXTTEXTTEXT</span></div>
<div><img src=”images/backgrounds/test2.jpg” alt=”test2″ title=”test2″ id=”wows1″/></div>
<div><img src=”images/backgrounds/test3.jpg” alt=”test3″ title=”test3″ id=”wows2″/></div>
<div><img src=”images/backgrounds/test4.jpg” alt=”test4″ title=”test4″ id=”wows3″/></div>
</div>
<div class=”ws_bullets”><div>
<a href=”#wows0″ title=”test1″>1</a>
<a href=”#wows1″ title=”test2″>2</a>
<a href=”#wows2″ title=”test3″>3</a>
<a href=”#wows3″ title=”test4″>4</a>
</div>
</div>
<script type=”text/javascript” src=”scripts/wow_script.js”></script>
<!– END ROTATOR –>
</body>
</html>
REST IS POSTED BELOW: