SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you add captions to a javascript onMouserover slideshow?

    I need to add different captions for each image of my onmouseover gallery.
    The way this gallery works is when the mouse goes over the text the image on the right changes.
    What should I add to my javascript code?
    This is the code I put in the head:
    <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>

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean by a caption, do you just mean a title underneath/above the image?

    If so, you can just create a simple function which changes the innerHTML/innerText of the caption element to be that of the current event's target's (the moused-overed text) text.

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your response however I am totally new to javascript.
    Yes, I mean a title or some text under the image.

    How would you exactly write this code using the code I gave in my thread?
    thanks, S.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your easiest bet is to use jquery and do something like the following:

    HTML Code:
    <a href="images/image1.jpg" class="slideItem">Item 1</a>
    <a href="images/image2.jpg" class="slideItem">Item 2</a>
    <label id="lblCaption"></label>
    Code:
    $(document).ready(function() {
        $(".slideItem").click(function() {
            $("#lblCaption").text($(this).text());
        });
    });

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Location
    Exeter, Devon. UK.
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd agree with SlickAU,

    jQuery would be the easiest, and quickest solution for you. Have a look at the following examples; one of these will no doubt do what you need!

    http://vandelaydesign.com/blog/web-d...age-galleries/


    ------------------------------------------
    www.ipponsolutions.co.uk - website design in Exeter, UK.


Bookmarks

Posting Permissions

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