www.webdeveloper.com
Results 1 to 3 of 3

Thread: Onhover text replace

  1. #1
    Join Date
    Oct 2008
    Posts
    2

    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)
    {
    document['PhotoBig'].src=url;
    }
    </script>

    Thumbnail div:

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

    Large image div:

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


    Any help appreciated!

    Many thanks.

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    Code:
    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">
    </a>
    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.

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

    Works fine.

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

    i.e.

    This is a, test

    displays:

    This is a

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

    Thanks!

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



Recent Articles