Need Help with Textual tooltip II

[bigalo]

1) Script Title: Textual tooltip II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/linkinfo2.htm

3) Describe problem: Currently, the script fades to #ffffff(white) onmouseout. I would like to possibly fade to transparent or invisible on mouseout. Can anyone help?


Thanks!

[jscheuer1]

The script fades to the color set in the configuration:

FadingText('fade1', 10,"FFFFFF");

Set this to the color of the background that you want the text to fade into.

If you are fading into an image or an unknown color, this script (without a fairly major rewrite) is not for you.

Fading via opacity may be a better option. However, in IE 7 and recent Opera versions, this will distort the text. I have had some success in fading in an image or color over the text though. This looks the same to the user, without the distortion. It would depend to a degree upon your page's overall layout and upon where and when on it you want this effect to occur, as to how best to go about it:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[bigalo]

Here is the link to the page:

http://www.geocities.com/bigalo1/tooltiptest


Description: Click on the "Click here" link inside Title 1 portlet accordian. You will see the tooltip show to the right of "Title 1" when you mouseout, it fades out. But when you callapse "Title 1" the header changes to a lighter blue and you still see the tooltip in that darker color of the expanded header. I would like it to completely go away or if possible fade transparent.

[jscheuer1]

Sometimes a simpler solution is best. Try adding this rule to your stylesheet as shown:

 . . .
.opendiv{ /*header in open state*/
background: #D3DCEE;
font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#2A3E53; font-weight:normal;
}

.closeddiv{  /*header in closed state*/
color: #6688A4;
font-size:11px; font-weight:normal; font-family:Arial, Helvetica, sans-serif; text-decoration:none;
}

.closeddiv span * {
color:#EAEFF9!important;
}

.divcontent1 {padding:2px 5px; border-col . . .

I tested this out locally in Opera, FF and IE with good results. The key is in turning the text (color property) of all the span in question's children to the background color of the parent division, when the parent division has the .closeddiv (signifying that it is collapsed and has its lighter bg color) class applied to it (below is just a color coded illustration of the elements involved, no code change is required there):

<div class="maindiv1" title="">Title 1
<span style="width:300px; margin-left:20px;">
<script language="JavaScript1.2">//Tooltip Definition area
if (document.layers){
document.write('<ilayer name="nscontainer" width="100%" height="18">')
document.write('<layer name="fade1" width="100%" height="18">')
document.write('</layer></ilayer>')
}
else
document.write('<span ID="fade1"></span>')
</script>
</span>
</div>

[bigalo]

Thanks jscheuer1! I guess I was looking a bit deeper than I had to. That solution was so much simpler! I've applied the change and it works great!!!