Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2005
    Location
    Scottish Borders, UK
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can OnMouseover slideshow be adapted to include captions?

    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>

    ----------

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Try this nice OO-based slideshow script.

  • #3
    New Coder
    Join Date
    Mar 2005
    Location
    Scottish Borders, UK
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy

    Quote Originally Posted by glenngv
    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).

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts

    Ok, going back to your original target script...

    Code:
    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;!')"

  • #5
    New Coder
    Join Date
    Mar 2005
    Location
    Scottish Borders, UK
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Glad to be of service to you.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •