PDA

View Full Version : Fadeshow - onmouseover call own function



kneissi
12-27-2008, 12:32 PM
1) DynamicDrive Fadeshow v.1.51

2) http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Hello,

I want to use the fadeshowscript and onmouseover i want to call my own function, which shows a tooltip. onmouseout, the tooltip should be gone.

can anybody tell me, how and where in the fadeshow-script to call my function?

thanks,
mike

jscheuer1
12-27-2008, 02:45 PM
Well, it depends. If you just want the sort of tool tip commonly associated with a title attribute, you should probably use:

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

which already has provision (optionally) for individual titles for each image, and can otherwise be made to look exactly like the script you are using.

If you have just one tip for all images and it can be a title type tool tip, you may edit the script you are currently using here:


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="My Tool Tip" 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
}

Or if you want to integrate another script that does tool tips, here would a good point of integration for that in the Ultimate Fade script:


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

You should enable the mouseover pause, and add to the highlighted functions. The cachobj.curimageindex property would reference the array item number of the currently displayed image if required. Integrating another script might present code conflicts though.

kneissi
12-27-2008, 03:59 PM
Hi,

Thanks a lot for your tip - i already found a solution for me. Im using not a normal tooltip, im calling a html-file with a function. My fault was that the call of my function was wrong, now im using:

fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
if (this.pausecheck==2){ //IF SLIDESHOW CALL Toooltip
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){Showtoolitip();}
crossobjcontainer.onmouseout=function(){Notoolitip();}
}

this.rotateimage()
}

Thanks a lot,
Michael

kneissi
12-27-2008, 05:36 PM
hi,

once again i need help. i modified the function:

fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas);
this.populateslide(crossobj, this.curimageindex);
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this;
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid);
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
if (this.pausecheck==2){ //IF SLIDESHOW SHOULD Call Tooltip-FUNCTION
var cacheobj=this;
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid);
crossobjcontainer.onmouseover=function(){Tip(help);}
crossobjcontainer.onmouseout=function(){UnTip();}
}
this.rotateimage();
}

And instead of the word help (red color) i want to call this.theimages[picindex][3] but this doesnt work. this position of the array holds the information for my tooltip.

see here:

var fadeimages1 = new Array();
fadeimages1[0] = ["/werbung/werbung.jpg", "http://www.test.com","_new", "information"];

can you help me once again?

thanks a lot,
mike

jscheuer1
12-27-2008, 06:59 PM
The math (the number represented by cacheobj.curimageindex) may be slightly off, but first try:


crossobjcontainer.onmouseover=function(){Tip(cacheobj.theimages[cacheobj.curimageindex][3]);}

That may mix up the tips, and/or sometimes give undefined or an error in some cases. Make sure you have a tip defined for each image. If there are still problems, the math can be worked out.

I just took a quick look at the code again, and it looks like cacheobj.curimageindex has a very good chance of being the number we want here.

Let me know what happens.

kneissi
12-27-2008, 08:07 PM
hello,

i the meantime i tried a lot and found out, that the problem was my own function, this way works:

fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas);
this.populateslide(crossobj, this.curimageindex);
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this;
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid);
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
if (this.pausecheck==2){ //IF SLIDESHOW SHOULD Call Tooltip-FUNCTION
var cacheobj=this;
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid);
var picid= this.curimageindex;
var output=this.theimages[picid][3];
crossobjcontainer.onmouseover=function(){Tip(output);}
crossobjcontainer.onmouseout=function(){UnTip();}
}
this.rotateimage();
}


thank you very much - and good luck for the new year!

cya,
mike

jscheuer1
12-27-2008, 08:28 PM
Yes, that is essentially the same code I was suggesting, as it gets the instance's (this or cachobj) curimageindex and theimages array in real time and in a form that the latter Tip function can trace back to the slide show object.