need help in some Tooltip sc

**lolita** · 06-08-2009, 01:14 AM

hyy guys

i need some kind of Tooltip that extract all words automatically from web page and when the mouse go over any word it shows letters of this word as image in animation or even dump
i know it will be slow to load all images soo is there any way to load all images from A-Z with page startup

A have image call A.gif
B have image call B.gif
...
Z have image call Z.gif

for example

word " configuration " when the mouse come over it show its letter as images in animated Tooltip

please help as soon as

thanks guys

regards
karyn B.W

**vwphillips** · 06-08-2009, 12:07 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/



function zxcWords(zxcn){
 var zxcnu=zxcn.childNodes.length;
 for(var zxc0=0;zxc0<zxcnu;zxc0++) {
  var zxctxt=zxcn.firstChild.data;
  var zxcrn=zxcn.removeChild(zxcn.firstChild);
  if(zxcrn.nodeType==3){
   var zxcs=zxctxt.split(' ');
   for(var zxc1=0;zxc1<zxcs.length; zxc1++) {
    var zxcnn=document.createTextNode(zxcs[zxc1]+' ');
    zxcnn=document.createElement('A');
    zxcnn.className='word';
    zxcnn.appendChild(document.createTextNode(zxcs[zxc1]+' '));
    zxcn.appendChild(zxcnn);
   }
  }
  else {
   zxcWords(zxcrn);
   zxcn.appendChild(zxcrn);
  }
 }
}

var OOP=[];
function Init(id){
 var obj=document.getElementById(id);
 zxcWords(document.getElementById(id))
 var words=zxcByClassName('word',obj,'A');
 for (var z0=0;z0<words.length;z0++){
  OOP[z0]=new WordPop(words[z0],z0);
 }
}
function PopUp(nu,ud){
 zxcES(OOP[nu].pop,{visibility:(ud?'visible':'hidden'),left:zxcPos(OOP[nu].obj)[0]+5+'px',top:zxcPos(OOP[nu].obj)[1]+15+'px'});
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft-objp.scrollLeft;
  rtn[1]+=objp.offsetTop-objp.scrollTop;
  obj=objp;
 }
 return rtn;
}


function WordPop(word,nu){
 this.obj=word;
 letters=word.firstChild.data.replace(/\s/g,'').split('');
 this.pop=zxcES('DIV',{position:'absolute',zIndex:'101',visibility:'hidden',width:'50px',height:'50px'},document.body);
 this.ary=[];
 for (var z0=0;z0<letters.length;z0++){
  this.ary[z0]=zxcES('IMG',{position:'absolute',zIndex:(z0==0?1:0),left:'0px',top:'0px'},this.pop);
  this.ary[z0].src=letters[z0]+'.gif';
 }
 if (this.ary.length>0){
  word.onmouseover=function(){ PopUp(nu,true); }
  word.onmouseout=function(){ PopUp(nu,false); }
  this.cnt=0;
  this.to=null;
  this.rotate();
 }
}


WordPop.prototype.rotate=function(){
 zxcES(this.ary[this.cnt],{zIndex:'0'});
 this.cnt=++this.cnt%this.ary.length;
 zxcES(this.ary[this.cnt],{zIndex:'1'});
 var oop=this;
 this.to=setTimeout(function(){ oop.rotate(); },500);
}


function zxcES(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}


/*]]>*/
</script>

</head>

<body onload="Init('tst');">
<div id="tst" >
abc def
</div>
</body>

</html>

**lolita** · 06-08-2009, 02:14 PM

Hello vwphillips
thanks for your help
the letters of the word repeat i need it just appear for one time
also can the letter delay in appear .. 0.5 sec or 1 sec between each letter appearance in the word

thanks alot vwphillips
regards
Karyn B.White

**vwphillips** · 06-08-2009, 03:20 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/



function zxcWords(zxcn){
 var zxcnu=zxcn.childNodes.length;
 for(var zxc0=0;zxc0<zxcnu;zxc0++) {
  var zxctxt=zxcn.firstChild.data;
  var zxcrn=zxcn.removeChild(zxcn.firstChild);
  if(zxcrn.nodeType==3){
   var zxcs=zxctxt.split(' ');
   for(var zxc1=0;zxc1<zxcs.length; zxc1++) {
    var zxcnn=document.createTextNode(zxcs[zxc1]+' ');
    zxcnn=document.createElement('A');
    zxcnn.className='word';
    zxcnn.appendChild(document.createTextNode(zxcs[zxc1]+' '));
    zxcn.appendChild(zxcnn);
   }
  }
  else {
   zxcWords(zxcrn);
   zxcn.appendChild(zxcrn);
  }
 }
}

var OOP=[];
function Init(id,ms){
 var obj=document.getElementById(id);
 zxcWords(document.getElementById(id))
 var words=zxcByClassName('word',obj,'A');
 for (var z0=0;z0<words.length;z0++){
  OOP[z0]=new WordPop(words[z0],z0,ms);
 }
}
function PopUp(nu,ud){
 zxcES(OOP[nu].pop,{visibility:(ud?'visible':'hidden'),left:zxcPos(OOP[nu].obj)[0]+5+'px',top:zxcPos(OOP[nu].obj)[1]+15+'px'});
 OOP[nu].cnt=0;
 clearTimeout(OOP[nu].to);
 if (ud) OOP[nu].to=setTimeout(function(){ OOP[nu].rotate(); },OOP[nu].ms);
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft-objp.scrollLeft;
  rtn[1]+=objp.offsetTop-objp.scrollTop;
  obj=objp;
 }
 return rtn;
}


function WordPop(word,nu,ms){
 this.obj=word;
 letters=word.firstChild.data.replace(/\s/g,'').split('');
 this.pop=zxcES('DIV',{position:'absolute',zIndex:'101',visibility:'hidden',width:'50px',height:'50px'},document.body);
 this.ary=[];
 for (var z0=0;z0<letters.length;z0++){
  this.ary[z0]=zxcES('IMG',{position:'absolute',zIndex:(z0==0?1:0),left:'0px',top:'0px'},this.pop);
  this.ary[z0].src=letters[z0]+'.gif';
 }
 if (this.ary.length>0){
  word.onmouseover=function(){ PopUp(nu,true); }
  word.onmouseout=function(){ PopUp(nu,false); }
  this.cnt=0;
  this.ms=ms||1000;
  this.to=null;
  this.lst=this.ary[2]
 }
}


WordPop.prototype.rotate=function(){
 zxcES(this.lst,{zIndex:'0'});
 zxcES(this.ary[this.cnt],{zIndex:'1'});
 this.lst=this.ary[this.cnt];
 this.cnt++;
 var oop=this;
 if (this.cnt<this.ary.length-1) this.to=setTimeout(function(){ oop.rotate(); },this.ms);
}


function zxcES(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}


/*]]>*/
</script>

</head>

<body onload="Init('tst',1000);">
<div id="tst" >
abc def
</div>
</body>

</html>

**lolita** · 06-09-2009, 12:31 AM

hello Mr.vwphillips
thanks again for you help
i think there is something wrong
if there is word like " hello " the letters appear like that " e l l o h " or some times " h e l l " without " o "
i attached the scr with images please get a look on it and tell me
thanks alot

regards
Karyn B.White

**forum_amnesiac** · 06-09-2009, 07:48 AM

I like the idea behind this script.

How easy would it be to modify it to not use letters but to use words, eg in 'show images for each word" when the cursor is over any word an image with that word name is shown.

The other side of this would be to have an optional switch in a sentence eg don't show images for certain words.

**vwphillips** · 06-09-2009, 10:34 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/



function zxcWords(zxcn){
 var zxcnu=zxcn.childNodes.length;
 for(var zxc0=0;zxc0<zxcnu;zxc0++) {
  var zxctxt=zxcn.firstChild.data;
  var zxcrn=zxcn.removeChild(zxcn.firstChild);
  if(zxcrn.nodeType==3){
   var zxcs=zxctxt.split(' ');
   for(var zxc1=0;zxc1<zxcs.length; zxc1++) {
    var zxcnn=document.createTextNode(zxcs[zxc1]+' ');
    zxcnn=document.createElement('A');
    zxcnn.className='word';
    zxcnn.appendChild(document.createTextNode(zxcs[zxc1]+' '));
    zxcn.appendChild(zxcnn);
   }
  }
  else {
   zxcWords(zxcrn);
   zxcn.appendChild(zxcrn);
  }
 }
}

var OOP=[];

function Init(id,ms){
 var obj=document.getElementById(id);
 zxcWords(document.getElementById(id))
 var words=zxcByClassName('word',obj,'A');
 for (var z0=0;z0<words.length;z0++){
  OOP[z0]=new WordPop(words[z0],z0,ms);
 }
}
function PopUp(nu,ud){
 zxcES(OOP[nu].pop,{visibility:(ud?'visible':'hidden'),left:zxcPos(OOP[nu].obj)[0]+5+'px',top:zxcPos(OOP[nu].obj)[1]+15+'px'});
 OOP[nu].cnt=0;
 clearTimeout(OOP[nu].to);
 if (ud) OOP[nu].to=setTimeout(function(){ OOP[nu].rotate(); },10);
}

function zxcPos(obj){
 var rtn=[obj.offsetLeft,obj.offsetTop];
 while(obj.offsetParent!=null){
  var objp=obj.offsetParent;
  rtn[0]+=objp.offsetLeft-objp.scrollLeft;
  rtn[1]+=objp.offsetTop-objp.scrollTop;
  obj=objp;
 }
 return rtn;
}

function WordPop(word,nu,ms){
 this.obj=word;
 letters=word.firstChild.data.replace(/\s/g,'').split('');
 this.pop=zxcES('IMG',{position:'absolute',zIndex:'101',visibility:'hidden',left:'0px',top:'0px'},document.body);
 this.ary=[];
 for (var z0=0;z0<letters.length;z0++){
  this.ary[z0]=letters[z0]+'tilelc.png';
 }
 if (this.ary.length>0){
  word.onmouseover=function(){ PopUp(nu,true); }
  word.onmouseout=function(){ PopUp(nu,false); }
  this.cnt=0;
  this.ms=ms||1000;
  this.to=null;
 }
}


WordPop.prototype.rotate=function(){
 if (this.ary[this.cnt]){
  this.pop.src=this.ary[this.cnt];
  this.cnt++;
  var oop=this;
  this.to=setTimeout(function(){ oop.rotate(); },this.ms);
 }
}


function zxcES(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
}

function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}


/*]]>*/
</script>

</head>

<body onload="Init('tst',1000);">
<div id="tst" >
abc def hello
</div>
</body>

</html>

**vwphillips** · 06-09-2009, 10:40 AM

How easy would it be to modify it to not use letters but to use words, eg in 'show images for each word" when the cursor is over any word an image with that word name is shown.

Would need an array to match the word to an image.

The other side of this would be to have an optional switch in a sentence eg don't show images for certain words.
Reply With Quote

if the word is not specified in the array do not attach the popup event

**forum_amnesiac** · 06-09-2009, 11:22 AM

Originally Posted by vwphillips

Would need an array to match the word to an image.

if the word is not specified in the array do not attach the popup event

At the moment you read each letter, how difficult would it be to keep reading until you, hit a defined end of word, eg space, full stop, comma, etc., and then look for an image with that word name. ie retain a similar process to what is already there.

As to the second part, have an array of words that you do not want the popup event for.

And finally, can the popup be stopped if the image file does not exist.

Sorry to be a bother but I'm just brainstorming

**vwphillips** · 06-09-2009, 03:43 PM

forum_amnesiac

The function zxcWords examins all nodes within a defined parent for text nodes then splits the text node on spaces then replaces the text node with A tags containing each word plus a space.

I guess this text node could be split by word boundary and reconstructed.

Seververside code wold be required to establish if a file name existed(this could be used to construct an array).

Easier to assume that the image did exist and only open the popup if the image object was complete or width greater than 50px or as I suggested from an array.

You have the key function zxcWords, have a go.

Thread: need help in some Tooltip sc

Thread Tools

Search Thread

need help in some Tooltip sc

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions