I've re-done somethings and may not need this function now. I think my current code might be more effective using the this but I'm still unable to exactly follow the functionality of it. Basically what the code I'm trying to rig up does is flip through a series of 5 images and highlight the dot that is currently being displayed. The arrows flip through or the dots can be clicked. If anyone knows of a script that is already like that, that may also be helpful. Thanks.
Code:
<script type="text/javascript">
function loadimage(which) {
var is_it = document.getElementById('image').src, NewString = is_it.replace(/.*?images\/0(\d).*/, "$1"), not_active, r;
not_active = NewString;
if (which == 0) {
if (NewString != 0 ) {
NewString--;
r = false;
}
if (NewString <= 0) {
NewString=5;
r=true;
op= "minus";
}
} else {
if (NewString < 6) {
NewString++;
r= false;
}
if (NewString == 6) {
NewString=1;
r=true;
op= "plus";
}
}
document.getElementById('image').src='index/images/0' + NewString + '.jpg';
if (!r) {
document.getElementById('inactive' + NewString).id="active";
document.getElementById('active').id = "inactive" + not_active;
} else {
if (op=== "minus") {
document.getElementById('inactive5').id="active";
document.getElementById('active').id = "inactive1";
} else {
document.getElementById('inactive1').id="active";
document.getElementById('active').id = "inactive5";
}
}
document.getElementById('that').innerHTML = "Current:" + NewString + "<br />Previous:" + not_active;
}
function putimage(clicked) {
document.getElementById('inactive' + NewString).id="active";
// document.getElementById('active').id = "inactive" + not_active;
}
</script>
<div id="img_contain">
<a href=""><img src="index/images/01.jpg" id="image" alt="First Figure" /></a>
</div>
<div id="links">
<a href="javascript:getimage();" onClick="loadimage(0); return false;"><img src="index/images/left_arrow.jpg" alt="left arrow" /></a>
<a href="javascript:getimage();" onClick="putimage(1); return false;" id="active"><img src="index/images/dot.jpg" /></a>
<a href="javascript:getimage();" onClick="putimage(2); return false;" id="inactive2"><img src="index/images/active_dot.jpg" /></a>
<a href="javascript:getimage();" onClick="putimage(3); return false;" id="inactive3"><img src="index/images/dot.jpg" /></a>
<a href="javascript:getimage();" onClick="putimage(4); return false;" id="inactive4"><img src="index/images/dot.jpg" /></a>
<a href="javascript:getimage();" onClick="putimage(5); return false;" id="inactive5"><img src="index/images/dot.jpg" /></a>
<a href="javascript:getimage();" onClick="loadimage(1); return false;"><img src="index/images/right_arrow.jpg" alt="right arrow" /></a>
</div>
<div id="that"></div>
Bookmarks