PDA

View Full Version : Ultimate Fade show - labels



SBSI
10-25-2006, 09:20 PM
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

jscheuer1
10-26-2006, 05:56 AM
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):


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:


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:


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:


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:


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:


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
}

tech_support
10-26-2006, 06:31 AM
Sticky

...for next time