Category: HTML+JavaScript


<html>
<head>
<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "firstcar.gif" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "secondcar.gif"
slideimages[2] = new Image()
slideimages[2].src = "thirdcar.gif"

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

<script type="text/javascript">

//variable that will increment through the images
var step = 0
var whichimage = 0

function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 whichimage = step
 if (step<2)
  step++
 else
  step=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)
}

function slidelink(){
 if (whichimage == 0)
  window.location = "link1.htm"
 else if (whichimage == 1)
  window.location = "link2.htm"
 else if (whichimage == 2)
  window.location = "link3.htm"
}

slideit()

</script>
</body>
</html>

source: http://www.javascriptkit.com/howto/show3.shtml
Advertisements

This is sample coding to create two slide show in a same page with different timings

var image1=new Image()
image1.src=”sample/images/black-berry.jpg”
var image2=new Image()
image2.src=”sample/images/i-Mate.jpg”
var image3=new Image()
image3.src=”sample/images/lg.jpg”
var test1=new Image()
test1.src=”sample/images/nokia1.jpg”
var test2=new Image()
test2.src=”sample/images/nokia2.jpg”
var test3=new Image()
test3.src=”sample/images/nokia1.jpg”


//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval(“image”+step+”.src”)
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
function slideit1(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slideshow.src=eval("test"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit1()" every 3 seconds
setTimeout("slideit1()",3000)
}
slideit()
slideit1()

<html>

<head>

<script type=”text/javascript”>

function pri()

{

document.getElementById(“pr”).style.visibility=hidden;

window.print();

}

</script>

</head>

<body>

Test page for printing

<br>

<input type=”button” id=”pr” value=”Print” onclick=”pri()”>

</body>

</html>

This is sample coding to create two slide show in a same page

<html>
<head>
<script type=”text/javascript”>
var image1=new Image()
image1.src=”sample/images/black-berry.jpg”
var image2=new Image()
image2.src=”sample/images/i-Mate.jpg”
var image3=new Image()
image3.src=”sample/images/lg.jpg”
var test1=new Image()
test1.src=”sample/images/nokia1.jpg”
var test2=new Image()
test2.src=”sample/images/nokia2.jpg”
var test3=new Image()
test3.src=”sample/images/nokia1.jpg”
</script>
</head>
<body>
<img src=”sample/images/black-berry.jpg” name=”slide” width=”100″ height=”300″ />
<img src=”sample/images/nokia1.jpg” name=”slideshow” width=”100″ height=”300″ />
<script>

//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval(“image”+step+”.src”)
document.images.slideshow.src=eval(“test”+step+”.src”)
if (step<3)
step++
else
step=1
//call function “slideit()” every 2.5 seconds
setTimeout(“slideit()”,2500)
}
slideit()

</script>
</body>
</html>