...

View Full Version : Can OnMouseover slideshow be adapted to include captions?



xanti
03-14-2005, 01:31 AM
I've been looking for the right script for a slideshow I'm adding to my site. The following script from JavaScript Kit is the best I've found for my purposes (changing onMouseover to onClick) and it adapts to my layout perfectly, but I'd really like to add captions beneath the slides as straightforward paragraph text (ie. not as a form/input field). Can anyone suggest how I might do this?

Or does anyone have a slideshow script including captions that changes slides via thumbnails (*not* buttons or automatically)?

Thanks.

----------

<script>

/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages("plane1.gif","plane2.gif","plane3.gif","plane4.gif","plane5.gif")
</script>

----------

Image placement code:

<a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a>

----------

Rollover text/image code:

<a href="b2.htm" onMouseover="changeimage(myimages[0],this.href)">Plane 1</a>

----------

glenngv
03-14-2005, 03:16 AM
Try this nice OO-based slideshow script (http://www.peterbailey.net/dhtml/oo_slideshow.htm).

xanti
03-14-2005, 09:44 AM
Try this nice OO-based slideshow script (http://www.peterbailey.net/dhtml/oo_slideshow.htm).

Thanks Glenn, but none of these seem to fit the criteria I mentioned. (Though I might be wrong, being a total JavaScript novice.) None seem to have captions independent of form/input fields and none link a specific object to a specific slide (as opposed to single object(s) which trigger sequential loading of slides).

glenngv
03-14-2005, 12:27 PM
function changeimage(towhat,url, desc){
if (document.images){
document.images.targetimage.src=towhat.src
document.getElementById('desc').innerHTML = desc;
gotolink=url
}
}
...
<a href="javascript:warp()"><img src="plane1.gif" name="targetimage" border=0></a>
<div id="desc" style="color:red">This is plane 1</div>
...
<a href="b2.htm" onMouseover="changeimage(myimages[0], this.href, 'This is plane 1')">Plane 1</a>
<a href="f15.htm" onMouseover="changeimage(myimages[1], this.href, 'This is plane 2')">Plane 2</a>
...
Watch out for the special characters in captions. If the caption contains single quote, you must escape it.

onMouseover="changeimage(myimages[1], this.href, 'It\'s me!')"

If it has double quote, you must HTML encode it.

onMouseover="changeimage(myimages[1], this.href, 'It\'s &quot;me&quot;!')"

xanti
03-14-2005, 02:39 PM
Glenn you certainly deserve every pixel of that helpful member award! Thank you so much. It works brilliantly. What a star! Consider yourself cyber-hugged.

glenngv
03-15-2005, 03:47 AM
Glad to be of service to you. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum