asked on

Fade In Hyper Link Effect

Please refer to this site:

http://www.32-bits.com/temp

If you put your mouse over the bird in the tree, you'll see that a text box will fade in. That's all fine and dandy, but is there a way to make the box (and not the text) transparent instead of opaque? Can I set the degree to which I want it transparent? Also, if I wanted to, could I do the same for the text? Thanks.

GwynforWeb

it is not a textbox it is a div that is being shown, to set it transparent but show the text remove the colors defined in the style definition of .navtext, ie set to

. {
font-size:8pt;
font-weight:bold;
font-family:book antiqua;
}

monolith_888

Here's a demo of for fading. Ask questions at will :)

Note: this is for IE only!

-Blake

<html>
<head><title>Fade Demo</title>
<script>
function fade( which, amt )
{
var theBox = document.getElementById('box');
var theTxt = document.getElementById('txt');

switch(which)
{
case 'box':
theBox.style.filter = "alpha(opacity="+amt+")";
theTxt.style.filter = theTxt.currentStyle.filter;
break;

case 'txt':
theBox.style.filter = theBox.currentStyle.filter;
theTxt.style.filter = "alpha(opacity="+amt+")";
break;

case 'combo':
theBox.style.filter = "alpha(opacity="+amt+")";
theTxt.style.filter = "alpha(opacity="+amt+")";
break;
}
}
</script>
<style>
INPUT {color:#666;border:1px solid #666;}
P {padding-bottom:10px;}
</style>
</head>
<body>
<div id="box" style="border:5px solid #000;width:100px;text-align:center;position:absolute;top:5px;left:5px;"></div>
<div id="txt" style="font-family:tahoma;font-size:16px;font-weight:bold;color:#000;position:absolute;top:9px;left:17px;">The Text</div>

<div style="position:relative;top:50px;">
<P>
Fade the Box:<BR>
<input type="button" onmouseover="fade('box',00)" value=" 0 ">
<input type="button" onmouseover="fade('box',10)" value="10">
<input type="button" onmouseover="fade('box',20)" value="20">
<input type="button" onmouseover="fade('box',30)" value="30">
<input type="button" onmouseover="fade('box',40)" value="40">
<input type="button" onmouseover="fade('box',50)" value="50">
<input type="button" onmouseover="fade('box',60)" value="60">
<input type="button" onmouseover="fade('box',70)" value="70">
<input type="button" onmouseover="fade('box',80)" value="80">
<input type="button" onmouseover="fade('box',90)" value="90">
<input type="button" onmouseover="fade('box',100)" value="100">
</P>
<P>
Fade the Text:<BR>
<input type="button" onmouseover="fade('txt',00)" value=" 0 ">
<input type="button" onmouseover="fade('txt',10)" value="10">
<input type="button" onmouseover="fade('txt',20)" value="20">
<input type="button" onmouseover="fade('txt',30)" value="30">
<input type="button" onmouseover="fade('txt',40)" value="40">
<input type="button" onmouseover="fade('txt',50)" value="50">
<input type="button" onmouseover="fade('txt',60)" value="60">
<input type="button" onmouseover="fade('txt',70)" value="70">
<input type="button" onmouseover="fade('txt',80)" value="80">
<input type="button" onmouseover="fade('txt',90)" value="90">
<input type="button" onmouseover="fade('txt',100)" value="100">
</P>
<P>
Fade Both:<BR>
<input type="button" onmouseover="fade('combo',00)" value=" 0 ">
<input type="button" onmouseover="fade('combo',10)" value="10">
<input type="button" onmouseover="fade('combo',20)" value="20">
<input type="button" onmouseover="fade('combo',30)" value="30">
<input type="button" onmouseover="fade('combo',40)" value="40">
<input type="button" onmouseover="fade('combo',50)" value="50">
<input type="button" onmouseover="fade('combo',60)" value="60">
<input type="button" onmouseover="fade('combo',70)" value="70">
<input type="button" onmouseover="fade('combo',80)" value="80">
<input type="button" onmouseover="fade('combo',90)" value="90">
<input type="button" onmouseover="fade('combo',100)" value="100">
</P>
</div>
</body></html>

karithe

ASKER

monolith_888,

hey, that's a pretty nifty script you've provided. but i'm not exactly sure how it applies to what i need to do. i guess i mean, how do i incorporate that?

karithe

ASKER

GwynforWeb,

Thanks for showing me how to remove the div. But I guess I meant, how do I make the div *translucent*. And I was hoping that the degree to which it can be set translucent can be controlled, so that it could be darker in some places when need be.

mreuring

Does it have to be scripted? You can simply use css to set transparancy:
DIV.transparent {
background: white;
filter: Alpha(Opacity=20);
-moz-opacity:0.2;
}

You can set a value between 0 and 100 for the filter (IE) or 0 and 1 for the -moz property (Mozilla, duh ;)). I believe that you can set opacity: 0.2; for Opera.

Greets,

Martin

karithe

ASKER

mreuring,

yes, css would probably be best. but i don't know how to use it. i'll give it a try.

karithe

ASKER

ok, i can't figure it out. how do i control the "text box" (div) opacity without affecting the text? thanks.

karithe

monolith_888

You can only do that if the two elements are dependent of each other. If the "text box" div is inside the "the box" div, everything you do to the the wrapper div will inherently effect the inside one.

The solution I devised worked, because I physically moved the 2 divs apart in the code, then positioning them to look like they were on top of each other visually.

Your solution might look like:

<div id="box" style="filter: Alpha(Opacity=80); border:5px solid #000; width:100px; text-align:center; position:absolute; top:5px; left:5px;"></div>

<div id="txt" style="filter: Alpha(Opacity=20); font-family:tahoma; font-size:16px; font-weight:bold; color:#000; position:absolute; top:9px; left:17px;">The Text</div>

karithe

ASKER

in the url from my original question, the index calls for the script "alttext.js". below is that script. what it does is have an "alt" text fade in when you mouseover a link (in this case, the bird in the tree). what i'm trying to do is to have that script work as normal, except i'd like to control the opacity of the "text box" in which the word "malpt!" appears (the text itself should not be affected). i know that can use div tags to create that affect, but it believe it needs to be written into this script. it doesn't seem to work otherwise. the div tags only work when i use them with fixed text within the html (like the words "join the mailing list..." at the bottom of the screen). any help would be much appreciated. thanks to all those who have tried so far. -karithe

var dofade=true;
var center=false;
var centertext=true;

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var NS4 = (navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? true : false;
var IE4 = (document.all && !document.getElementById)? true : false;
var IE5 = (document.getElementById && document.all)? true : false;
var NS6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var W3C = (document.getElementById)? true : false;
var w_y, w_x, navtxt, boxheight, boxwidth;
var ishover=false;
var isloaded=false;
var ieop=0;
var op_id=0;

function getwindowdims(){
w_y=(NS4||NS6||window.opera)? window.innerHeight : (IE5||IE4)? document.body.clientHeight : 0;
w_x=(NS4||NS6||window.opera)? window.innerWidth : (IE5||IE4)? document.body.clientWidth : 0;
}

function getboxwidth(){
if(NS4)boxwidth=(navtxt.document.width)? navtxt.document.width : navtxt.clip.width;
if(IE5||IE4)boxwidth=(navtxt.style.pixelWidth)? navtxt.style.pixelWidth : navtxt.offsetWidth;
if(NS6)boxwidth=(navtxt.style.width)? parseInt(navtxt.style.width) : parseInt(navtxt.offsetWidth);
}

function getboxheight(){
if(NS4)boxheight=(navtxt.document.height)? navtxt.document.height : navtxt.clip.height;
if(IE4||IE5)boxheight=(navtxt.style.pixelHeight)? navtxt.style.pixelHeight : navtxt.offsetHeight;
if(NS6)boxheight=parseInt(navtxt.offsetHeight);

}

function movenavtxt(x,y){
if(NS4)navtxt.moveTo(x,y);
if(W3C||IE4){
navtxt.style.left=x+'px';
navtxt.style.top=y+'px';
}}

function getpagescrolly(){
if(NS4||NS6)return window.pageYOffset;
if(IE5||IE4)return ietruebody().scrollTop;
}

function getpagescrollx(){
if(NS4||NS6)return window.pageXOffset;
if(IE5||IE4)return ietruebody().scrollLeft;
}

function writeindiv(text){
if(NS4){
navtxt.document.open();
navtxt.document.write(text);
navtxt.document.close();
}
if(W3C||IE4)navtxt.innerHTML=text;
}

function writetxt(text){
if(isloaded){
if(text!=0){
ishover=true;
if(NS4)text='<div class="navtext">'+((centertext)?'<center>':'')+text+((centertext)?'</center>':'')+'</div>';
writeindiv(text);
getboxheight();
if((W3C || IE4) && dofade){
ieop=0;
incropacity();
}}else{
if(NS4)navtxt.visibility="hide";
if(IE4||W3C){
if(dofade)clearTimeout(op_id);
navtxt.style.visibility="hidden";
}
writeindiv('');
ishover=false;
}}}

function incropacity(){
if(ieop<=100){
ieop+=7;
if(IE4 || IE5)navtxt.style.filter="alpha(opacity="+ieop+")";
if(NS6)navtxt.style.MozOpacity=ieop/100;
op_id=setTimeout('incropacity()', 50);
}}

function moveobj(evt){
if(isloaded && ishover){
margin=(IE4||IE5)? 1 : 23;
if(NS6)if(document.height+27-window.innerHeight<0)margin=15;
if(NS4)if(document.height-window.innerHeight<0)margin=10;
//mx=(NS4||NS6)? evt.pageX : (IE5||IE4)? event.clientX : 0;
//my=(NS4||NS6)? evt.pageY : (IE5||IE4)? event.clientY : 0;
if (NS4){
mx=evt.pageX
my=evt.pageY
}
else if (NS6){
mx=evt.clientX
my=evt.clientY
}
else if (IE5){
mx=event.clientX
my=event.clientY
}
else if (IE4){
mx=0
my=0
}

if(NS4){
mx-=getpagescrollx();
my-=getpagescrolly();
}
xoff=(center)? mx-boxwidth/2 : mx+5;
yoff=(my+boxheight+30-getpagescrolly()+margin>=w_y)? -15-boxheight: 30;
movenavtxt( Math.min(w_x-boxwidth-margin , Math.max(2,xoff))+getpagescrollx() , my+yoff+getpagescrolly());
if(NS4)navtxt.visibility="show";
if(W3C||IE4)navtxt.style.visibility="visible";
}}

if(NS4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=moveobj;
window.onload=function(){
navtxt=(NS4)? document.layers['navtxt'] : (IE4)? document.all['navtxt'] : (W3C)? document.getElementById('navtxt') : null;
getboxwidth();
getboxheight();
getwindowdims();
isloaded=true;
if((W3C || IE4) && centertext)navtxt.style.textAlign="center";
if(W3C)navtxt.style.padding='4px';
if(IE4 || IE5 && dofade)navtxt.style.filter="alpha(opacity=0)";
}
window.onresize=getwindowdims;

MaB

Try changing this function:

function writeindiv(text){
if(NS4){
navtxt.document.open();
navtxt.document.write(text);
navtxt.document.close();
}
if(W3C||IE4)navtxt.innerHTML=text;
}

to this:

function writeindiv(text){
if(NS4){
navtxt.document.open();
navtxt.document.write(text);
navtxt.document.close();
}
if(W3C||IE4){
navtxt.innerHTML=text;
navtxt.innerHTML.style.filter="alpha(opacity="100")";
}
}

for the text to not fade in with IE. This is totally theoretical (i.e not tested) and I don't know how to do it for NS :-(

The div "box" opacity is changed with the "function incropacity()" that increases the opacity in steps by 7 with 50 milliseconds between each step. If you want to control the box opacity that's where you should change the values.

BR MaB

mreuring

The way you propose will set the text as 100% opaque to it's container, but since it's container is still partially transparent to the rest of the document, the text will also still be equally transparent to the rest of the document. And I know from experience this is how opacity works :)
The only way to leave the text non-transparent is by having something that is not it's parent become the transparent background.

MaB

OK! When experience talks you better listen.... :-)

Thanks for that clearafication, mreuring.

Then monolith's suggestion to create one div for the text and one div for the box and should be the best way to address this problem, shouldn't it?

MaB

mreuring

Hmmm, it does seem that way although I seem to remember seeying someone meddling with the alpha-transparancy filter to make a background image more or less transparent, this you could do without the text becoming transparent, can't for the life of me remember where/when I saw this though :(

You'd need two divs at the very least. I was thinking of going for a structure like this:
<div class="infotip">
<div class="background"></div>
<p>There's more than one way to skin a cat</p>
</div>

and then for css:
div.infotip { position: absolute; }
div.infotip div.background { position: absolute; width:100%; height: 100%; background: yellow; /*insert transparancy here*/ }
div.infotip p { position: relative; } /*This will lift th accual content out of the flow and allows it to rise over an absolute block while still reserving it's original block size in the container.*/

But I haven't had time to test with this yet.

Martin

MaB

>>But I haven't had time to test with this yet.

Same here. Interesting problem but right now my deadlines at work don't allow for testing this. I hope I'll have more time to dedicate to this Q soon....

MaB

monolith_888

@mreuring:
Works like a charm, wtg! Works great with imagery or colors. I hope this is what you were looking for karithe!

With image change mreuring's style to:
div.infotip div.background { position: absolute; width:100%; height: 100%; background-image:url('myBGImg.gif'); filter: Alpha(Opacity=80); }

With color (just like he has it):
div.infotip div.background { position: absolute; width:100%; height: 100%; background: yellow; filter: Alpha(Opacity=80); }

karithe

ASKER

hmm. works well. but only if i put those div tags around text that is not part of the alttext.js.

i've been told that since the div box (the malpt! alt text message) is generated by the javascript, the script would have to be altered. adding div tags and and changing the css simply does not work. below is the html code taken out of context:

<SCRIPT LANGUAGE="Javascript" SRC="alttext.js"></SCRIPT> // calls the fade-in link script ( my previous comment for full script)

<STYLE TYPE="text/css">
.navtext {
font-size:8pt;
font-weight:bold;
font-family:book antiqua;
color:#000000;
background:#FFFFFF;
}
</STYLE> // defines the font attributes and "text box" color specifically for the javascript

<DIV ID="navtxt" CLASS="navtext" STYLE="position:absolute; top:-100px; left:0px; visibility:hidden"></DIV> // defines the div to be used

<TD ALIGN="center" VALIGN="center"><A HREF="http://www.malpt.com" ONMOUSEOVER="writetxt('malpt!')" ONMOUSEOUT="writetxt(0)"><IMG SRC="image8c.jpg" WIDTH=14 HEIGHT=14 BORDER=0></A></TD> // runs the javascript

i've tried adding opacity definitions to the css, but that doesn't work. i cannot put div tags around the first set of div tags or the <A> tags.

you've all done a great job so far, and thanks for all the assistance. but it's the scriipt that needs to be tweeked, i think.

MaB, i tried your changes, but it didn't work. :(

but maybe there's no way to do this...?

MaB

>MaB, i tried your changes, but it didn't work. :(

No, mreuring pointed out that it wouldn't work. Sorry for misleading you.

You are right that the javascript fiddles with the div box. But what it does is setting the opacity and inserting text into the div with ID navtxt. So if you specify another div id for your text and put it in the proper place it should work. To use mreuring's example:

<div class="navtext">
<div ID="navtxt" class="background"></div>
<p>There's more than one way to skin a cat</p>
</div>

With this the javascript controls the div with ID=navtxt i.e the background and fades it in. The style declaration in the HEAD section of the page controls the div with class=navtext i.e the text within the box.

Then you can alter the style declaration in .navtext to change the layout of your text and alter the javascript for the fading effect on the background. Are you following me?

>but maybe there's no way to do this...?
Yes, I'm certain we can solve this so it behaves the way you want, just hang in there :-)

MaB

karithe

ASKER

i'm thinking about closing this question. does anyone have any new suggestions?

MaB

So my last suggestion didn't work out for you? Or have I misunderstood what you're after?

BR MaB

karithe

ASKER

MaB,

Your suggestion works fine for creating a DIV box whose transparency can be varied. But what I'm looking for specifiically is creating a similar DIV box which can be used within the frame work of the "fade-in" script provided in the initial question. If you return to http://www.32-bits.com/temp , you'll notice that if you put your mouse over the bird in the tree, a DIV box fades in. But the box is opaque. I want to be able to control the degree of transparency of the box (the text needs to stay solid/opaque). I've been told that the way the script works, conventional DIV commands won't cut it; the script needs to be rewritten. I don't necessarily need the box to fade in, but the transparency level is what I'm after. I know that it's difficult, and that everyone here can't devote too much time to it. That's okay. I appreciate everyone's input thus far. But I'll need to close this question eventually... Thanks.

ASKER CERTIFIED SOLUTION

mreuring

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

MaB

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

karithe

ASKER

MaB,

your interpretation is dead on. that's exactly what i'm looking for. the only reason i suggested that it's the javascript that needs to be manipulated was because that was what someone had suggested to me. honestly, i don't know where the problem (or solution) lies.

Martin,

your script seems to work. i'm afraid i don't know what problems you think may arise from it, though. (you sort of lost me at DOM...)

just some follow-up questions to anyone, seeing as how i'm pretty dense... where are the controls to the opacity level? will i still be able to control the font/size/color/etc. of the alt text itself? is there a way to get it to look/behave more like the original script?

thanks for all the input everyone!

mreuring

Just popping in for a quick infoboost on what I build.
The script I build will do the positioning in such a way that somewhat older browsers really won't understand. I used to be able to make Netscape 4 listen to me, but it's too long ago and usually takes a lot of extra work, like the scripts you already have which is basically a mesh of two scripts, one for Netscape 4 and one for IE4 and up and Netscape 6 and up, the way it's build will make Opera and the likes pick up on it too, most likely. Due to the duplicity of the scripts you have and the limited time on hands I can't really make the effort of altering it, so instead I grabbed some existing scripts and mixed them up to recreate, more or less, what you want.

For the display of the infotips my scripts rely on CSS, a much prefered way to go about styling your results. As such you can modify the looks of your popups relatively easy. But, CSS is again not really the same on all the browsers, thus some broken functionality.

To answer you on the controls:
div.infotip { position: absolute; color: black; width: 5em; border: 2px outset green; display: none; } /*This line controls the over all container, here you can modify the width/border of the popup*/
div.infotip div.background { position: absolute; width:100%; height: 100%; background: yellow; filter: Alpha(Opacity=60); -moz-opacity:0.6; } /*This line controls the background of the popup, here you can modify the opacity of the background.*/
div.infotip p { position: relative; margin:0; padding: 0; color: black; filter: Alpha(Opacity=100); } /*This line controls the text of the popup, here you can modify the text-size and color.*/

MaB

I was just in the process of writing the same thing :-)

I've been studying your excellent code, Martin, to try and pick up on that and alter the original script and page to reflect what karithe is after. I was thinking in the line of what you've done. Separate the text from the background and present them in the same place, giving the text box a higher z value to display it on top of the background box. I am however not enough familiar with the DOM to understand what a couple of your functions does. Could you please endulge me with a dummy description of what you are doing in these lines:

function AltController (textBoxId) {
this.textBoxId = textBoxId;
this.ie = document.all?true:false;
this.opacity = 1;
this.sprite = document.createElement("div");
var bg = this.sprite.cloneNode(false); // I don't understand the cloneNode() function
this.sprite.id = textBoxId;
this.sprite.className = "infotip";
bg.className = "background";
this.sprite.appendChild(bg); //The appendChild() is new to me too
this.sprite.appendChild(document.createElement("p"));
document.body.appendChild(this.sprite);
}

and in this function:

setAltText: function(altText) {
if (!this.sprite.lastChild.firstChild) this.sprite.lastChild.appendChild(document.createTextNode(""));
this.sprite.lastChild.firstChild.nodeValue = altText;
}

TXIA MaB

mreuring

Hmmm, some extra info on DOM-scripting first. All html-elements from a document are represented in DOM as a node and where applicable an element. The name element in this case may point to either a DOM-element or an HTML-element.

Ah, clondeNode is a verry nice DOM function that basically returns a clone of any element, when you supply the attribute false it only clones the element and it's attributes, when true it clones all descendants as well. I.E. is you have a link: '<a href="doh">hello world</a>' and clone it false you'll get an element along the lines of <a href="doh"></a> and with true the textnode is also cloned so you'll get the whole deal back.
In the case of that line I've been told the fastest way to create a new div is copying an existing one. Since I just created a fresh and shining new div I just clone it so that I have a second one to work with.

appendChild will append a node (element) to the node you're working with.
In the case of the line you pointed out, the sprite is the container I'm shuffling around and I'm adding the freshly created background-node to the end of it, since there's no children in this node yet it'll become the first as well off course...
I then add another node, a p-element to contain the text I will later on add to the infobox.

Ok the function in broken english:
If the sprite not already has a p-tag (lastchild) with childnode (firstchild) add a new textnode to the p-tag
set the altText as the value of the textnode

Hope it helps,

Martin

MaB

Most helpful. Thanks for the tutorial. :-))

MaB

karithe

ASKER

Martin,

thanks for the info. i just got the chance to play around with your script, and realized that only the very tip of the div box is tranlucent. that's some nifty scripting you've got there. cool.

MaB

Just checking up were we are with this. Did Martins excellent code solve your problem or do you need some further help with this?

karithe

ASKER

hi. thanks for checking in.

yes, martin's code does indeed work quite well! it just needs to behave more like the original code. i had problems getting rid of the colors and borders, and positioning the div box where i wanted.

MaB

OK, nice too see that you're on the right track :-)

If you need someone to juggle with just holler.

karithe

ASKER

i don't mind splitting the points between mreuring and MaB. both have been very, very helpful. but i should say that i haven't been able to get the script to work exactly how i want.

cheers.

MaB

What problems do you have? I'll try and help you if I can, but my time is a bit limited these days since I'm in the process of looking for a new employer and this is rather time consuming. So it will probably not be a fast answer, but I do keep up with the questions I'm participating in even though I'm not at the computer as much as before. :-)

MaB

karithe

ASKER

Well, I just can't seem to get the DIV box to look like it does in the original script. The way the tool tip behaves now, there is a border around the box and the top portion is a different color. Other than that, it functions rather well. Any assistance would be great.

MaB

Sorry for being out of touch. I've been on a weeks vacation (much needed).

Let me read up on the Q to refresh what we've been discussing and I'll get back to you later.