Solved

Fade In Hyper Link Effect

Posted on 2004-04-12
38
744 Views
Last Modified: 2007-12-19
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.
0
Comment
Question by:karithe
  • 13
  • 12
  • 6
  • +2
38 Comments
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 10812992
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;
}
0
 
LVL 4

Expert Comment

by:monolith_888
ID: 10813186
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>
0
 

Author Comment

by:karithe
ID: 10813480
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?
0
 

Author Comment

by:karithe
ID: 10813500
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.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 10813781
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
0
 

Author Comment

by:karithe
ID: 10814652
mreuring,

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

Author Comment

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

karithe
0
 
LVL 4

Expert Comment

by:monolith_888
ID: 10819402
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>
0
 

Author Comment

by:karithe
ID: 10820901
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;
0
 
LVL 7

Expert Comment

by:MaB
ID: 10821491
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
0
 
LVL 17

Expert Comment

by:mreuring
ID: 10821569
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.
0
 
LVL 7

Expert Comment

by:MaB
ID: 10821597
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
0
 
LVL 17

Expert Comment

by:mreuring
ID: 10821689
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

0
 
LVL 7

Expert Comment

by:MaB
ID: 10821722
>>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
0
 
LVL 4

Expert Comment

by:monolith_888
ID: 10823849
@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);  }
0
 

Author Comment

by:karithe
ID: 10824657
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...?
0
 
LVL 7

Expert Comment

by:MaB
ID: 10830503
>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
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:karithe
ID: 11080336
i'm thinking about closing this question.  does anyone have any new suggestions?
0
 
LVL 7

Expert Comment

by:MaB
ID: 11087313
So my last suggestion didn't work out for you? Or have I misunderstood what you're after?

BR MaB
0
 

Author Comment

by:karithe
ID: 11095698
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.
0
 
LVL 17

Accepted Solution

by:
mreuring earned 125 total points
ID: 11095933
My personal main concern on not putting too much time in it derives from old-browser compatibility. The script you provided allows for Netscape 4, too be honest I can't be bothered writing anything that's pre-DOM browser compatible (for the knowledgable, I'm discarding the minor DOM-controls of Netscape as being a DOM-enabled browser, yes). I've been working on a script that could work, on and off, but I keep having some issues with it. I'll post it here, maybe MaB can pick it up and get it ironed out.
The script (save as alttext.js):
/**
 * Never re-invent the wheel, I always grab these finders from quirksmode.org, by PPK
 */
function findPosX(obj)
{
      var curleft = 0;
      if (obj.offsetParent)
      {
            while (obj.offsetParent)
            {
                  curleft += obj.offsetLeft
                  obj = obj.offsetParent;
            }
      }
      else if (obj.x)
            curleft += obj.x;
      return curleft;
}

function findPosY(obj)
{
      var curtop = 0;
      if (obj.offsetParent)
      {
            while (obj.offsetParent)
            {
                  curtop += obj.offsetTop
                  obj = obj.offsetParent;
            }
      }
      else if (obj.y)
            curtop += obj.y;
      return curtop;
}
//End of alien code :)

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);
      this.sprite.id = textBoxId;
      this.sprite.className = "infotip";
      bg.className = "background";
      this.sprite.appendChild(bg);
      this.sprite.appendChild(document.createElement("p"));
      document.body.appendChild(this.sprite);
}

AltController.prototype = {
      setopacity: function() {
            var style = this.sprite.style
            if (this.opacity<=100) {
                  this.opacity+=7;
                  if (this.ie)style.filter="alpha(opacity="+this.opacity+")";
                  else {
                        style.MozOpacity=this.opacity/100;
                        style.Opacity=this.opacity/100;
                  }
      }},
      incropacity: function() {
            if (this.opacity<=100) {
                  this.setopacity();
                  var self = this;
                  this.timeout=setTimeout(function(){self.incropacity();}, 50);
      }},
      setAltText: function(altText) {
            if (!this.sprite.lastChild.firstChild) this.sprite.lastChild.appendChild(document.createTextNode(""));
            this.sprite.lastChild.firstChild.nodeValue = altText;
      },
      moveElement: function( ev ) {
            var element = document.getElementById(this.textBoxId);
            var loEvent = ev||event;
            var target = loEvent.srcElement||loEvent.target
            var altText = target.alt||target.getAttribute("alt");
            this.setAltText(altText);
            var x = findPosX(target);
            var y = findPosY(target) + 20;
            this.incropacity();
            var style = this.sprite.style;
            try {
                  style.position = "absolute";
                  style.left = x + "px";
                  style.top = y + "px";
                  style.display = "block";
            } catch (e) {
                  style.display = "none";
            }
      },
      hide: function() {
            var style = this.sprite.style;
            this.opacity = 1;
            this.setopacity();
            style.display = "none";
      }
}      

The html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script language="javascript" type="text/javascript" src="alttext.js"></script>
<style type="text/css">
html body { margin: 0; padding: 0; }
div.infotip { position: absolute; color: black; width: 5em; border: 2px outset green; display: none; }
div.infotip div.background { position: absolute; width:100%; height: 100%; background: yellow; filter: Alpha(Opacity=60); -moz-opacity:0.6; }
div.infotip p { position: relative; margin:0; padding: 0; color: black; filter: Alpha(Opacity=100);  }
</style>
</head>
<body onload="controller = new AltController('dodo')">
<div class="infotip" id='navtext'>
<div class="background"><p>There's more than one way to skin a cat</p></div>
<p style="margin-top: 1em;">There's more than one way to skin a cat</p>
</div>
<p>(Quis)quis amat valeat pereat qui nescit amare bis tanto pereat quisquis amare vetat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eros nisl, eleifend quis, consectetuer in, congue et, dui. Fusce feugiat nibh nec libero. Pellentesque tellus sem, bibendum vel, posuere in, cursus id, diam. Aliquam ultricies aliquet enim. Nullam pharetra blandit lorem. Sed eget tortor nec eros faucibus laoreet. In hac habitasse platea dictumst. Quisque tristique egestas magna.</p>
<p>Lorem ipsum <a href="#" alt="This is just a text to test with. I hope it'll work." onmouseover="controller.moveElement(event);" onmouseout="controller.hide();">dolor</a> sit amet, consectetuer adipiscing elit. Morbi eros nisl, eleifend quis, consectetuer in, congue et, dui. Fusce feugiat nibh nec libero. Pellentesque tellus sem, bibendum vel, posuere in, cursus id, diam. Aliquam ultricies aliquet enim. Nullam pharetra blandit lorem. Sed eget tortor nec eros faucibus laoreet. In hac <a href="#" alt="And yet another infotip hidden here." onmouseover="controller.moveElement(event);" onmouseout="controller.hide();">habitasse</a> platea dictumst. Quisque tristique egestas magna.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eros nisl, eleifend quis, consectetuer in, congue et, dui. Fusce feugiat nibh nec libero. Pellentesque tellus sem, bibendum vel, posuere in, cursus id, diam. Aliquam ultricies aliquet enim. Nullam pharetra blandit lorem. Sed eget tortor nec eros faucibus laoreet. In hac <a href="#" alt="I doubt I will ever use this script, but it was a good exorsize." onmouseover="controller.moveElement(event);" onmouseout="controller.hide();">habitasse</a> platea dictumst. Quisque tristique egestas magna.</p>
</body>
</html>


Problems are in displaying the stuff properly in IE, can't seem to get the stuff to behave, but I think it needs a second pair of eyes going over the css. It works like a charm on Moz browsers though. It'll need a little tweaking to work in Opera, the popup seems to be populated but again the css doesn't show it properly.

Remember, have fun :)

  Martin
0
 
LVL 7

Assisted Solution

by:MaB
MaB earned 125 total points
ID: 11096694
I can pick it up if this is in the vicinity of what karithe wishes. What I fail to understand right now is the exact nature of the problem. It was some time since I was in this Q and I have trouble pinpointing it. Memory tends to loose focus fast, when you occupy it with other problems ;-)

If I understand you correct karithe you wish to control the transparency of the box and possibly the transparency of the text (but not necessary, the text can be non transparent) and you wish this to be done from the javascript file, not from the HTML page itself. As it is now the box (with text) fades in and ends up non transparent. You would like to have the box stay in a opacity level that makes it transparent and the text to be non transparent (but possible to change to transparent). Am I correct in this interpretation of the problem area?

If I'm correct in this it should be possible to copy the code for the textbox div from the javascript and paste it with another class name and use that for the text. Then it's all about changing the line "if (this.opacity<=100) {" for each div box to reflect the opacity level you want the box to end up at after the fade in. The only problem with this that I haven't looked into yet is the positioning of the boxes, but that should be able to solve since the positioning alredy exists and possibly adding a z value to position the text above the background box.

This might be what Martins already done. I haven't had the time yet to take a closer look on that code. I need to download Mozilla to see what it's supposed to look like since I'm on IE6 only right now.

MaB
0
 

Author Comment

by:karithe
ID: 11105638
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!
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11105949
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.*/
0
 
LVL 7

Expert Comment

by:MaB
ID: 11106024
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
0
 
LVL 17

Expert Comment

by:mreuring
ID: 11106341
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

0
 
LVL 7

Expert Comment

by:MaB
ID: 11106783
Most helpful. Thanks for the tutorial. :-))

MaB
0
 

Author Comment

by:karithe
ID: 11115035
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.
0
 
LVL 7

Expert Comment

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

Author Comment

by:karithe
ID: 11235888
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.
0
 
LVL 7

Expert Comment

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

If you need someone to juggle with just holler.
0
 

Author Comment

by:karithe
ID: 11413557
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.
0
 
LVL 7

Expert Comment

by:MaB
ID: 11415106
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
0
 

Author Comment

by:karithe
ID: 11462074
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.
0
 
LVL 7

Expert Comment

by:MaB
ID: 11527241
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.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now