html basics

THE SAMPLE FOR LIKES OF WEBSIGHT

<!--        Script by hscripts.com          -->
<!--        copyright of HIOX INDIA         -->
<!-- more scripts @ http://www.hscripts.com -->

<script type="text/javascript">
var width = 250;
var height = 100;
var imgAr1 = new Array();
var rImg1 = new Array();

imgAr1[0] = "dir1/image-1.jpg";
imgAr1[1] = "dir1/image-2.jpg";
</script>

<table cellpadding=0 cellspacing=0><tr><td style="border: 2px ridge red;">
<img id=pic border=0>
</td></tr>
<tr><td>
<table width=100% style="border: 2px ridge red; font-size: 13px; font-family: verdana, arial;">
<td align=center><a style="color: blue; cursor:pointer;" onclick="start()">Start</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="slideshow()">Next</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="prev()">Prev</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="end()">End</a></td>
<td align=center><a href="http://www.hscripts.com" style="color: blue; text-decoration: none; 
cursor:ponter; font-size: 13px;">&copy;H</a></td> 
</tr></table>
</td></tr></table>

<script type="text/javascript">

for(var j = 0; j < imgAr1.length; j++)
{
rImg1[j] = new Image();
            rImg1[j].src = imgAr1[j];
}

document.onload = setting();

var slide;
function setting()
{
slide = document.getElementById('pic');
slide.src = imgAr1[0];
slide.setAttribute("width",width);
slide.setAttribute("height",height);
}

//Image or picture slide show using java script
//slideshow function
var picture = 0;
function slideshow(){
if(picture < imgAr1.length-1){
picture=picture+1;
slide.src = imgAr1[picture];
}
}

function prev(){
if(picture > 0 ){
picture=picture-1;
slide.src = imgAr1[picture];
}
}

function start(){
slide.src = imgAr1[0];
picture = 0;
}

function end(){
slide.src = imgAr1[imgAr1.length-1];
picture = imgAr1.length-1
}
</script>
<!-- Script by hscripts.com -->
 THE NEXT EXAPLE 

Step 1: Surround the existing <img> tag with a <a> tag. Use a JavaScript url in place of a standard url to allow programmatic access to it:

<a href="javascript:slidelink()"><img src="firstcar.gif" name="slide" width="100" height="56" /></a>

Notice the code

javascript:slidelink()

The above is called a JavaScript url, and when clicked on, will call and execute a JavaScript function, instead of load a document. By throwing out the standard link and replacing it with a JavaScript url, a url turns dynamic. Now, there really is nothing mysterious about a JavaScript url- it simply executes a JavaScript function in place of loading a html document. In the above case, the function that will be executed is slidelink(), which we will actually implement in our next step

Step 2: Declare and implement function slidelink() inside the original slideshow script.

The "meat" of this tutorial, slidelink() is the function that will dynamically change the url of the slideshow to match the image that's currently being displayed in the slideshow. The below lists the original slideshow script, with new additions highlighted in red:

<script type="text/javascript">
<!--
var step=1
//a variable that will keep track of the image currently being displayed.
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>

We declared a new variable called "whichimage", which will be used to keep track of the image currently being shown (its index number). In other words, variable "whichimage" keeps track of whether the image currently in display is the first, second, or third image in the slideshow. How does this variable achieve that? By retrieving the number stored inside variable "step"  just before it gets incremented during each image rotation. Once we are able to keep track of this information, we can write code that loads a different url, depending on the image displayed. This is realized through function slidelink().

Step 3: Throw everything together.

All that's left now is to toss everything into one bowl, and we have an interactive billboard that takes us to a different url depending on the image shown:

<html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="firstcar.gif" name="slide" border="0" width="100" height="56" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>
</body>
</html>