I post here the code from my web-page that contains a image slide-show.
I want to know how, when you stop an image by rolling over it, that a text description, (of 1 line) appears to the side of the image.
Each image has it's own individual description, and is a different width, so the text has will always be positioned 10 pixels to the left of the image, no matter what the size is.
Does anyone have any ideas of how to do this?
Thanks for your help.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
// (C) 2000 <!-- w --><a class="postlink" href="http://www.CodeLifter.com">www.CodeLifter.com</a><!-- w -->
// <!-- m --><a class="postlink" href="http://www.codelifter.com">http://www.codelifter.com</a><!-- m -->
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully
// =======================================
// set the following variables
// =======================================
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 1000
// Duration of crossfade (seconds)
var crossFadeDuration = 3
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '001.jpg'
Pic[1] = '002.jpg'
Pic[2] = '003.jpg'
Pic[3] = '004.jpg'
Pic[4] = '005.jpg'
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image()
preLoad.src = Pic
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
</head>
<body onload="runSlideShow()" bgcolor="#000000" text="#000000">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td id="VU" height=150 width=150> <img src=http://www.webdeveloper.com/forum/archive/index.php/"001.jpg" name='SlideShow'></td>
</tr>
</table>
</body>
</html>
I want to know how, when you stop an image by rolling over it, that a text description, (of 1 line) appears to the side of the image.
Each image has it's own individual description, and is a different width, so the text has will always be positioned 10 pixels to the left of the image, no matter what the size is.
Does anyone have any ideas of how to do this?
Thanks for your help.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
// (C) 2000 <!-- w --><a class="postlink" href="http://www.CodeLifter.com">www.CodeLifter.com</a><!-- w -->
// <!-- m --><a class="postlink" href="http://www.codelifter.com">http://www.codelifter.com</a><!-- m -->
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully
// =======================================
// set the following variables
// =======================================
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 1000
// Duration of crossfade (seconds)
var crossFadeDuration = 3
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = '001.jpg'
Pic[1] = '002.jpg'
Pic[2] = '003.jpg'
Pic[3] = '004.jpg'
Pic[4] = '005.jpg'
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image()
preLoad.src = Pic
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
</head>
<body onload="runSlideShow()" bgcolor="#000000" text="#000000">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td id="VU" height=150 width=150> <img src=http://www.webdeveloper.com/forum/archive/index.php/"001.jpg" name='SlideShow'></td>
</tr>
</table>
</body>
</html>