Results 1 to 3 of 3

Thread: Onhover text replace

  1. #1
    Join Date
    Oct 2008

    Onhover text replace

    Hi all.

    I already havea javascript function that updates an image when the thumbnail is hovered over. Now I would like to add a caption to the image, so that when the thumbnail is hovered over, the relevant caption is displayed in the "caption" div below. I have four thumbnails, each with different captions.

    My function so far:

    <script type="text/javascript">
    function update(url,index,isSuper)

    Thumbnail div:

    <div id="thumbnail">
    <a onMouseOver="update('images/educational/img1-large.jpg', 0, false); return false;">
    <img src="images/educational/img1.jpg">

    Large image div:

    <div id="large">
    <img src="images/educational/img3-large.jpg" name="PhotoBig">
    <div id="caption">WANT CAPTION TO GO HERE</div>

    Any help appreciated!

    Many thanks.

  2. #2
    Join Date
    May 2006
    Odenton, MD
    var img = [];
    img.push('images/educational/img3-large.jpg, caption for this image');
    img.push('images/educational/img2-large.jpg, caption for this image');
    img.push('images/educational/img4-large.jpg, caption for this image');
    function update(which){
    document['PhotoBig'].src=img[which].split(', ')[0];
    document.getElementById('caption').innerHTML = img[which].split(', ')[1];
    the HTML is:
    <a onMouseOver="update(0);">
    <img src="images/educational/img1.jpg">
    notice that in this sample i create an array that contain a string. each entry is composed of the image url separated with a comma and a white space followed by the caption. i would prefer this approach, so you don't have to go different part of the document when you want to update which image to show. if you want to change an image position on the array, you simply move the line img.push(...) to the desired position.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    Oct 2008
    A follow up:

    Works fine.

    However, I can't put any commas in the caption area as it stops the text


    This is a, test


    This is a

    How can I encode commas so it doesn't assume that it's reached the end of the statement prematurely.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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