Looking to enhance my slideshow by replacing the standard "Next" and "Previous" text buttons with custom JPEG images I've created. Anyone familiar with the steps needed to make this switch in the HTML code?
Current HTML code in use:
<body style="font-family: Arial, Sans-serif, sans;">
<h2>Top 10 Vehicles Among US-Hispanics</h2><br />
<div id="slideshow">
<div class="sp">
<img src="img/banner01.jpg" alt="Toyota Corolla" /></a>
<br><strong>1. Toyota Corolla</strong><br>
The 2013 Toyota Corolla is a study in practicality and stylish engineering. The Corolla starts at $16,800 for the basic L model and comes with eight airbags, power windows and door locks, LED headlamps and running lights, Bluetooth connectivity, and a USB port. The comparatively deluxe S model ($19,000) comes with integrated spoiler and fog lamps, a leather-wrapped steering wheel, chrome-tipped exhaust and a 3.5-inch multi-information display. The Corolla offers an estimated 28/37 mpg.
</div>
<div>
<img src="img/banner02.jpg" alt="Honda Civic" /></a>
<br><strong>2. Honda Civic</strong><br>
The Honda Civic, a longtime favorite sedan among fuel-conscious drivers, comes in six models, including hybrid and natural gas versions. The 4-door access and roomy interior give the Civic the feel of a much larger sedan, but the 1.8-liter engine offers exceptional fuel economy, rated at 28 city/39 for the LX sedan and 44/44 for the hybrid. The Civic comes with standard front and side airbags, 4-wheel anti-lock disc brakes, a rear-view camera and Bluetooth connectivity. Pricing starts at $18,165 for the LX and ranges up to $24,360 for the hybrid. The basic coupe starts at $17,965.
</div>
<div>
<img src="img/banner03.jpg" alt="Honda Accord" /></a>
<br /><strong>3. Honda Accord</strong><br>
The 2013 Honda Accord proved to be popular with drivers and professional reviewers alike. The new direct-injection 4-cylinder engine with continuously variable automatic transmission delivers smooth acceleration and nice mileage numbers, beginning at an affordable MSRP of $21,680 for the basic model, on up to $33,430 with the bells and whistles. A V6, 6-speed manual and 6-speed automatic are also available. Mileage ranges from 21/32 for the EX-L V6 Automatic Coupe with Navigation to 27/36 for the 4-cylinder CVT.
</div>
... (additional vehicle descriptions omitted for brevity) ...
</div>
<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>
Current CSS code:
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position:relative;
height:560px;
width:620px;
}
#slideshow DIV {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
height: 560px;
width:620px;
background-color: #FFF;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 350px;
display: block;
border: 0;
margin-bottom: 10px;
}
#nav {margin-top:10px; width:100%;}
#button-previous {
float:left;margin-left:200px;
cursor:pointer;
}
#button-next {
float:right;margin-right:200px;
cursor:pointer;
}
Current jQuery code:
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
}
else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
}
else{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
</style>
Thank you, Ron