PDA

View Full Version : Resolved 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
<!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
<!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
<!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
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.

forum_amnesiac
06-09-2009, 04:06 PM
Thanks for the info, I'll certainly have a go at it

forum_amnesiac
06-10-2009, 01:14 PM
Took a bit of time but I've finally done it, here is a version that displays a popup image for words. I have added a regex to get rid of punctuation, eg !, ?, ", etc., so if the word is fred's, the image looked for is freds.gif.

I realised that I could combine the "check if file exists" and "don't display certain words" actions into 1 so I don't need an array of words not to display.

If you don't want a word to have a popup don't create the file.

I also added a path variable for the images

Thanks for the challenge, I've used the bulk of your code, my solution may not be as neat as you would write it but it works.


<!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 getFile(filename)
{

oxmlhttp = null;
try
{ oxmlhttp = new XMLHttpRequest();
oxmlhttp.overrideMimeType("text/xml");
}
catch(e)
{ try
{ oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{ return null;
}
}
if(!oxmlhttp) return null;
try
{ oxmlhttp.open("GET",filename,false);
oxmlhttp.send(null);
}
catch(e)
{return false;
}

if (oxmlhttp.responseText != ""){
return true;
}
}

function trim(strg) {
return strg.replace(/^\s+|\s+$/g,"");
}

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){ // checks the nodeType to see if it is text
var zxcs=zxctxt.split(' ');
for(var zxc1=0;zxc1<zxcs.length; zxc1++) { // splits it up into separate words
var zxcnn=document.createTextNode(zxcs[zxc1]+' ');
zxcnn=document.createElement('A'); // creates an <a href element
zxcnn.className='word'; // sets the class name
zxcnn.appendChild(document.createTextNode(zxcs[zxc1]+' '));
zxcn.appendChild(zxcnn);
}
} else {
zxcWords(zxcrn);
zxcn.appendChild(zxcrn);
}
}
}

var OOP=[];

function Init(id,ms){
var j0=0;
var file="abc.gif";
var obj=document.getElementById(id); // gets the Node type ( in this case DIV )
zxcWords(document.getElementById(id))
var words=zxcByClassName('word',obj,'A'); // this is an array of all the words in the DIV
for (var z0=0;z0<words.length;z0++){
OOP[z0]=new WordPop(words[z0],z0,ms,j0);
}
}

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,j0){ //this function gets each word
subpath="";
this.obj=word;
//letters=word.firstChild.data.replace(/\s/g,'').split(''); // separates the letters in the word by commas
this.pop=zxcES('IMG',{position:'absolute',zIndex:'101',visibility:'hidden',left:'0px',top:'0px'},document.body);
this.ary=[];
this.ary[j0]=subpath+trim(this.obj.innerHTML.replace(/[&#'"\/;:?,.<>\\*%$@()]/img, ""))+'.gif';
if (this.ary.length>0 && getFile(this.ary[j0])){
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);
//alert("par "+par.innerHTML);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}

function zxcByClassName(nme,el,tag){ // sets the word into an element with the TagName 'A'
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 pragmatism that's mine the others fred's.
<script>FileExists("def.gif")</script>
</div>
</body>

</html>

vwphillips
06-10-2009, 04:40 PM
with some redundancy removed(untested)


<!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 getFile(filename)
{

oxmlhttp = null;
try
{ oxmlhttp = new XMLHttpRequest();
oxmlhttp.overrideMimeType("text/xml");
}
catch(e)
{ try
{ oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{ return null;
}
}
if(!oxmlhttp) return null;
try
{ oxmlhttp.open("GET",filename,false);
oxmlhttp.send(null);
}
catch(e)
{return false;
}

if (oxmlhttp.responseText != ""){
return true;
}
}

function trim(strg) {
return strg.replace(/^\s+|\s+$/g,"");
}

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){ // checks the nodeType to see if it is text
var zxcs=zxctxt.split(' ');
for(var zxc1=0;zxc1<zxcs.length; zxc1++) { // splits it up into separate words
var zxcnn=document.createTextNode(zxcs[zxc1]+' ');
zxcnn=document.createElement('A'); // creates an <a href element
zxcnn.className='word'; // sets the class name
zxcnn.appendChild(document.createTextNode(zxcs[zxc1]+' '));
zxcn.appendChild(zxcnn);
}
} else {
zxcWords(zxcrn);
zxcn.appendChild(zxcrn);
}
}
}

var OOP=[];

function Init(id,ms){
var j0=0;
var file="abc.gif";
var obj=document.getElementById(id); // gets the Node type ( in this case DIV )
zxcWords(document.getElementById(id))
var words=zxcByClassName('word',obj,'A'); // this is an array of all the words in the DIV
for (var z0=0;z0<words.length;z0++){
OOP[z0]=new WordPop(words[z0],z0,ms,j0);
}
}

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,ms,j0){ //this function gets each word
subpath="";
this.obj=word;
var img=subpath+trim(this.obj.innerHTML.replace(/[&#'"\/;:?,.<>\\*%$@()]/img, ""))+'.gif';
if (getFile(img)){
this.pop=zxcES('IMG',{position:'absolute',zIndex:'101',visibility:'hidden',left:'0px',top:'0px'},document.body);
this.pop.src=img;
word.onmouseover=function(){ PopUp(nu,true); }
word.onmouseout=function(){ PopUp(nu,false); }
this.cnt=0;
this.ms=ms||1000;
this.to=null;
}
}


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);
//alert("par "+par.innerHTML);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}

function zxcByClassName(nme,el,tag){ // sets the word into an element with the TagName 'A'
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 pragmatism that's mine the others fred's.
</div>
</body>

</html>

forum_amnesiac
06-11-2009, 07:30 AM
Thanks for that, I've tested it and it works fine.

I see that the biggest change you've made is to eliminate the timeout, can you give a bit of explanation as to why that is necessary in the 'letters' version and not in this.

Doing this was a great exercise, I hopefully picked up a lot.

Do you think this might be a useful script to submit here, or are you going to have it on your site.

vwphillips
06-11-2009, 09:10 AM
biggest change you've made is to eliminate the timeout,

as there is only one image for each word there is no need to change the scr which is what the rotate function and timeout was for.


be a useful script to submit here,

I have no interest is submitting the script but there is no reason why you should not although I think the ajax call needs more thought.

my thoughts


<!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 getFile(oop,fun,nu)
{

oxmlhttp = null;
try
{ oxmlhttp = new XMLHttpRequest();
oxmlhttp.overrideMimeType("text/xml");
}
catch(e)
{ try
{ oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{ return null;
}
}
if(!oxmlhttp) return null;
try
{ oxmlhttp.open("GET",oop.img,false);
oxmlhttp.send(null);
}
catch(e)
{return oop[fun](nu);
}

if (oxmlhttp.responseText != ""){
return true;
}
}

function trim(strg) {
return strg.replace(/^\s+|\s+$/g,"");
}

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){ // checks the nodeType to see if it is text
var zxcs=zxctxt.split(' ');
for(var zxc1=0;zxc1<zxcs.length; zxc1++) { // splits it up into separate words
var zxcnn=document.createTextNode(zxcs[zxc1]+' ');
zxcnn=document.createElement('A'); // creates an <a href element
zxcnn.className='word'; // sets the class name
zxcnn.appendChild(document.createTextNode(zxcs[zxc1]+' '));
zxcn.appendChild(zxcnn);
}
} else {
zxcWords(zxcrn);
zxcn.appendChild(zxcrn);
}
}
}

var OOP=[];

function Init(id){
var file="abc.gif";
var obj=document.getElementById(id); // gets the Node type ( in this case DIV )
zxcWords(document.getElementById(id))
var words=zxcByClassName('word',obj,'A'); // this is an array of all the words in the DIV
for (var z0=0;z0<words.length;z0++){
OOP[z0]=new WordPop(words[z0],z0);
}
}

function PopUp(nu,ud){
if (OOP[nu]) 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 function gets each word
subpath="";
this.obj=word;
this.img=subpath+trim(this.obj.innerHTML.replace(/[&#'"\/;:?,.<>\\*%$€@()]/img, ""))+'.gif';
getFile(this,'add',nu);
}

WordPop.prototype.add=function(nu){
this.pop=zxcES('IMG',{position:'absolute',zIndex:'101',visibility:'hidden',left:'0px',top:'0px'},document.body);
this.pop.src=this.img;
this.obj.onmouseover=function(){ PopUp(this.nu,true); }
this.obj.onmouseout=function(){ PopUp(thisnu,false); }
this.cnt=0;
this.ms=ms||1000;
this.to=null;
}


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);
//alert("par "+par.innerHTML);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}

function zxcByClassName(nme,el,tag){ // sets the word into an element with the TagName 'A'
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 hello pragmatism that's mine the others fred's.
</div>
</body>

</html>

BTW
I have an old script which adds popups

http://www.vicsjavascripts.org.uk/AddAcronym/AddAcronym.htm

lolita
06-11-2009, 04:42 PM
hello Mr.vwphillips
i just tested your script but it dosn't work any more .. the letters dosn't appear any more
please test it if you can and attach it as attachment
thanks alot for your help
regards
Karyn B.W

forum_amnesiac
06-12-2009, 06:55 AM
lolita:

The script to display the letters does work, I've just tested it again. Make sure that you are not using the script that I was working on so that an image of the whole word is shown.

Here is the script you want:


<!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]+'.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;
}
}


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" >
Hello Testing
</div>
</body>

</html>

Vic:

I tried your mods to the AJAX but got a number of errors, the first one when loading the page was that 'ms' is undefined.

I will keep looking at the AJAX to improve it.

lolita
06-14-2009, 12:01 AM
thanks forum_amnesiac for your help its working now