Need help creating a SCRIPT file for navigation buttons

**Rob Dizzle** · 19-01-2010

I am trying to make the coding of the navigation button 'Previous' and 'Next'. But I am not getting the desired result after making a script for the navigation buttons. I am using the following pictures for my project :
seashore1.jpg, seashore2.jpg, seashore3.jpg.
If someone know the coding for the navigation button, please provide me that script. Any suggestions are mostly welcomed.!!

**Katty** · 19-01-2010

I think that you can use the following javascript history function which can take you through the browser history :
javascript:history.go(1) takes you one page forward
and
javascript:history.go(-1) takes you one page back
I think that this can help you. If you are not looking for this, then explain in details about your requirements, so that I can try to sort the things out.

**Praetor** · 19-01-2010

What exactly you want,.?? Do you want the next and Previous buttons which on clicked should get the different images that you have mentioned..? It would be better if you inform the detailed requirement of your project.! If you are looking for the similar scenario that I have mentioned, then I can give the script for that, but I am not sure that you want the same thing. If you want it soon, then you will have to post the requirement sooner.!!

**Rob Dizzle** · 19-01-2010

Thanks a lot for replying me sooner. I would like to tell 'Praetor' that I want the script of navigation button which on pressing will redirect the next or previous image respectively. Hope that you got what I am trying to say.!! I also tried some script for that, and this is it :

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">
<head>
<title>Townhouse</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

<style type="text/css">
.b1 {
color: maroon;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
margin-top: 0;
margin-bottom: 0;
margin-left: 5px;
}
.b2{
color: olive;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
margin-top: 0;
margin-bottom: 0;
margin-left: 5px;
}
</style>

<script type="text/javascript">
//<![CDATA[

var propertyWindow;
function showProperty("seashore1.jpg")
propertyWindow=window.open(img src="seashore1.jpg" height="250" width="380" alt="Photo of a Seashore");

//]]>
</script>

</head>

<body>
<p class="b1">Seashore: <strong>$319,000</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="java script: self.close()">Close Window</a></p>
<p><img src="seashore1.jpg" height="250" width="380" alt="Photo of a townhouse" /></p>
<p><a href="java script: history.go(-1)"><img border="0" SRC="previous_blue.gif"></a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="java script: history.go(1)"><img border="0" SRC="next_blue.gif"></p>
<p class="b2"><strong>4 bed, 2 bath, 17,33 square feet, .42 acres</strong></p>
</body>
</html>

**Praetor** · 19-01-2010

The script that I have mentioned will definitely help you.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> Concert Ads </title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
//<![CDATA[
var images = new Array(5);
images[0] = new Image();
images[1] = new Image();
images[2] = new Image();

images[0].src ="seashore1.jpg" 
images[1].src ="seashore2.jpg"
images[2].src ="seashore3.jpg"

function change (y) {
var plaatje=document.getElementById("picture");
var lengte = (plaatje.src).length;
var picurl = (plaatje.src).substring(lengte-14);
if(picurl=="seashore1.jpg") { x=0; }
if(picurl=="seashore2.jpg") { x=1; }
if(picurl=="seashore3.jpg") { x=2; }
if(x==0 && y==-1) { x=4; y=0; } 
else if(x+y>=5) {x=0; y=0; }
document.getElementById("picture").src = images[x+y].src;
}
//]]>
</script>
</head>
<body>
<p class="b1">Seashore: <strong>$319,000</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="javascript:self.close()">Close Window</a></p>
<p><img src="seashore2.jpg" id="picture" height="250" width="380" alt="Photo of a Seashore" /></p>
<p><a href="#" onclick="change(-1);"><img border="0" SRC="previous_blue.gif"></a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="#" onclick="change(1);"><img border="0" SRC="next_blue.gif"></a></p>
</body>
</html>