Results 1 to 3 of 3

Thread: Ultimate Fade show - labels

  1. #1
    Join Date
    Oct 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Ultimate Fade show - labels

    1) Script Title: Ultimate Fade show - mouseover labels

    2) Script URL (on DD):

    3) Describe problem: I need to see if there is a way to have a label appear next to the mouse when you mouseover the individual images. For example, I have 10 cakes that are in rotation and when one appears, the visitor would mouseover it and the cake discription would appear.

    Any Ideas?
    SBSI

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Cakes, yummy. This is a little tricky but, has been done. A little background, this (from the demo, where you put your images and optional links and targets):

    Code:
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
    Is a multidimensional array. The first dimension is fadeimages[#]. The other dimensions are items in an array assigned to the fadeimages[#], like:

    Code:
    fadeimages[#]=["image.jpg", "optional link", "optional target"]
    You will note that in this script, even if a dimension is not used, it must be present, as a blank string:

    Code:
    fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
    OK, I could go on and on about arrays but, that's what you need to know here. These array items are used here, later in the script:

    Code:
    fadeshow.prototype.populateslide=function(picobj, picindex){
    var slideHTML=""
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
    slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }
    Here, whatever the array was named, is now represented by 'this.theimages'. The 'this.postimages' was used for preloading, so it is used for the image src attribute. Anyways, [picindex] refers to the first dimension of the array and numbers following it [1] and [2] refer to items in the other dimensions.

    Let's go back to the top and add a dimension to the array for the title attribute:

    Code:
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["photo1.jpg", "", "", "Yummy Cake One"] //plain image syntax
    fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", "", "Another Yummy Cake"] //image with link syntax
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", "The Yummiest Cake of all!"] //image with link and target syntax
    Now that we've added this dimension, we can use it here, like so:

    Code:
    fadeshow.prototype.populateslide=function(picobj, picindex){
    var slideHTML=""
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
    slideHTML+='<img title="'+this.theimages[picindex][3]'" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }
    Last edited by jscheuer1; 10-27-2006 at 06:51 AM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

    ...for next time
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

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
  •