Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member robbieM's Avatar
    Join Date
    Mar 2004
    Location
    Canada
    Posts
    23
    Member #
    5417
    I have thumbnail images that when the cursor is placed over them, a larger image appears. How can I have a corresponding text title appear with each larger image?

    here's the code for the thumnail image:

    <a href="#" onMouseOver="modifyimage('dynloadarea', 0)"><img src="images_hessel/images/1s.jpg" width="100" height="100"></a>

    here's the div for the larger image to appear.
    <div id="dynloadarea" style="position:absolute; left:394px; top:217px; width:525px; height:350px; z-index:1"></div>




    I know I will need another div for the image title, but how do get the title to appear? Or do i need to modify the image gallery script to do this.
    here's the image path for the gallery script:
    dynimages[0]=["images/1b.jpg", ""]
    Thanks

  2.  

  3. #2
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    You should post a link, but this is something like it...

    You have the big images in an array, correct? I've also added an array for captions, and assumed some CSS for formatting.

    Code:
    <script language="JavaScript">
    dynimages=array("images/1b.jpg");
    dyncaptions=array("Me on holidays");
    function modifyimage(DynLoadDivName,index) {
      document.getElementById(DynLoadDivName).innerHTML = '<img src="' + dynimages[index] + '"/><br/>' +
        '<span class="image_caption">' + dyncaptions[index] + '</span>';
    }
    </script>
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)

  4. #3
    Junior Member robbieM's Avatar
    Join Date
    Mar 2004
    Location
    Canada
    Posts
    23
    Member #
    5417
    James,

    I didn't want to post the gallery script by it'self as it's copyrighted.

    I tried to modify the script with a new array (dynacaption)but it didn't work for me.

    Take a look at:

    http://www.pixelative.com/hessel_gallery_sculptures.htm

    Thanks.

  5. #4
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    OK, we'll drop the separate dyncaptions array, and just add an extra element to each dynimages entry. Change:
    Code:
    //Specify image paths and optional link (set link to "" for no link):
    var dynimages=new Array()
    var dyncaptions=new Array()
    dynimages[0]=["images_hessel/images/1b.jpg", ""]
    //etc etc
    To
    Code:
    //Specify image paths and optional link (set link to "" for no link).
    //Also add a caption, "" for no caption
    var dynimages=new Array()
    dynimages[0]=["images_hessel/images/1b.jpg", "","Image 1 Caption"]
    //etc etc
    New code is underlined. The last entry in each array (or subarray) is the image caption.

    Then change the returnimgcode() function:
    Code:
    function returnimgcode(theimg){
    var imghtml=""
    if (theimg[1]!="")
    imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
    if (theimg[1]!="")
    imghtml+='</a>'
    return imghtml
    }
    To:
    Code:
    function returnimgcode(theimg){
    var imghtml=""
    if (theimg[1]!="")
    imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
    if (theimg[1]!="")
    imghtml+='</a>'
    imghtml+='<br/><p>'+theimg[2]+'</p>';
    return imghtml
    }
    This adds the image caption.

    Tested, and it works!
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)

  6. #5
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    Moderators, this should be moved to the Javascript forum.
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)

  7. #6
    Junior Member robbieM's Avatar
    Join Date
    Mar 2004
    Location
    Canada
    Posts
    23
    Member #
    5417
    James,

    Yes, it works! I can understand the process now.

    I appreciate your time and effort.

    Thanks

  8. #7
    Senior Member james's Avatar
    Join Date
    May 2003
    Location
    Melbourne, AUSTRALIA
    Posts
    364
    Member #
    1352
    Great!
    James H
    Home Page · Mars Page · www.fihsf1.net (formerly www·fihs·net)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:36 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com