PDA

View Full Version : RE need help in some Tooltip sc



lolita
06-18-2009, 02:54 AM
hello guys
i just need some customization for Tooltip thats posted in this topic
http://www.dynamicdrive.com/forums/showthread.php?t=45743

i just need the java script to read image title also
only when i give the image an id the java script read it and when the mouse over it the letters shows as previous script

for example


<img src="images/karyn.gif" title="welcome" id="image_tooltip" />
<img src="images/sara.gif" title="hello" id="image_tooltip" />


only the image that have an id
thanks all
Karyn B.W

vwphillips
06-18-2009, 11:50 AM
you cannot have duplicate ids so using a classname


<!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[*/




var OOP=[];

function Init(cls,ms){
var objs=zxcByClassName(cls,false,'IMG');
for (var cnt=0,z0=0;z0<objs.length;z0++){
if (objs[z0].title){
OOP[cnt]=new WordPop(objs[z0],cnt,ms);
}
}
}

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;
}


function PopUp(nu,ud){
zxcES(OOP[nu].pop,{visibility:(ud?'visible':'hidden'),left:zxcPos(OOP[nu].obj)[0]+(OOP[nu].obj.width-OOP[nu].pop.width)/2+'px',top:Math.max(zxcPos(OOP[nu].obj)[1]-OOP[nu].pop.height-5,zxcWWHS()[3]+5)+'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 zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function WordPop(word,nu,ms){
this.obj=word;
letters=word.title.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){
this.pop.src=this.ary[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>
<img title="Some Text" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" class="tst" />
<br />
<br />
<img title="Some More Text" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" class="tst" />

</body>
</html>

lolita
06-20-2009, 03:07 AM
hello vwphillips thanks for quick reply

i tested the script the images appear and its ok but the normal text dosn't work or show any action
also
i have an image that have map on it
something like that


<map name="Map">
<area shape="rect" coords="233,128,361,235" href="#" title="quiz" class="tst">
<area shape="rect" coords="106,6,211,93" href="#" title="blog" class="tst">
<area shape="rect" coords="223,8,310,93" href="#" title="games" class="tst">
<area shape="rect" coords="315,9,397,93" href="#" title="story" class="tst">
<area shape="rect" coords="361,129,487,236" href="#" title="about us" class="tst">
<area shape="rect" coords="486,130,602,237" href="#" title="lessons" class="tst">
<area shape="rect" coords="629,136,733,234" href="#" target="_blank" title="dictionary" class="tst">
<area shape="rect" coords="510,3,581,96" href="#" title="home" class="tst">
<area title="video" shape="rect" coords="400,13,471,97" href="#" class="tst">
</map>

i modified the script to read the AREA but i it dosn't work it just repeat one word "video" when i mouse over any href

the modified script


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

var OOP=[];

function Init(cls,ms){
var objs=zxcByClassName(cls,false,'AREA');
for (var cnt=0,z0=0;z0<objs.length;z0++){
if (objs[z0].title){
OOP[cnt]=new WordPop(objs[z0],cnt,ms);
}
}
}

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;
}


function PopUp(nu,ud){
zxcES(OOP[nu].pop,{visibility:(ud?'visible':'hidden'),left:zxcPos(OOP[nu].obj)[0]+(OOP[nu].obj.width-OOP[nu].pop.width)/2+'px',top:Math.max(zxcPos(OOP[nu].obj)[1]-OOP[nu].pop.height-5,zxcWWHS()[3]+5)+'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 zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function WordPop(word,nu,ms){
this.obj=word;
letters=word.title.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]='/view/img/'+letters[z0]+'.gif';
}
if (this.ary.length>0){
this.pop.src=this.ary[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>


also its dosn't work on IE

regards
Karyn B.W

vwphillips
06-22-2009, 01:21 PM
I have been away for a few days.

You are going to need a script for text, images and image maps.

Please confirm that you still want this before I expend more time on this concept.

vwphillips
06-22-2009, 03:04 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 InitWords(id,ms){
var obj=document.getElementById(id);
zxcWords(document.getElementById(id))
var words=zxcByClassName('word',obj,'A');
for (var oop,z0=0;z0<words.length;z0++){
oop=new WordPop(words[z0],ms);
}
}

function WordPop(word,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){
this.addevt(word,'mouseover','popup',true);
this.addevt(word,'mouseout','popup',false);
this.cnt=0;
this.ms=ms||1000;
this.to=null;
}
}


WordPop.prototype.popup=function(e,ud){
zxcES(this.pop,{visibility:(ud?'visible':'hidden'),left:zxcPos(this.obj)[0]+5+'px',top:zxcPos(this.obj)[1]+15+'px'});
this.cnt=0;
clearTimeout(this.to);
var oop=this
if (ud) this.to=setTimeout(function(){ oop.rotate(); },10);
}

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);
}
}

WordPop.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}


function InitImages(cls,ms){
var objs=zxcByClassName(cls,false,'IMG');
for (var oop,z0=0;z0<objs.length;z0++){
if (objs[z0].title){
oop=new ImagePop(objs[z0],ms);
}
}
}

function ImagePop(word,nu,ms){
this.obj=word;
letters=word.title.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){
this.pop.src=this.ary[0];
this.addevt(word,'mouseover','popup',true);
this.addevt(word,'mouseout','popup',false);
this.cnt=0;
this.ms=ms||1000;
this.to=null;
}
}


ImagePop.prototype.popup=function(e,ud){
zxcES(this.pop,{visibility:(ud?'visible':'hidden'),left:zxcPos(this.obj)[0]+5+'px',top:zxcPos(this.obj)[1]+15+'px'});
this.cnt=0;
clearTimeout(this.to);
var oop=this
if (ud) this.to=setTimeout(function(){ oop.rotate(); },10);
}

ImagePop.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);
}
}


ImagePop.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

function InitMap(cls,ms){
var objs=zxcByClassName(cls);
for (var oop,area,z0=0;z0<objs.length;z0+=2){
if (objs[z0].tagName=='IMG'&&objs[z0+1].tagName=='MAP'){
area=objs[z0+1].getElementsByTagName('AREA')
for (var z0a=0;z0a<area.length;z0a++){
if (area[z0a].title){
oop=new MapPop(area[z0a],objs[z0],ms);
}
}
}
}
}

function MapPop(area,obj,ms){
this.obj=obj;
letters=area.title.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){
this.pop.src=this.ary[0];
var s=area.coords.split(',');
this.lft=s[0]*1;
this.top=s[1]*1;
this.addevt(area,'mouseover','popup',true);
this.addevt(area,'mouseout','popup',false);
this.cnt=0;
this.ms=ms||1000;
this.to=null;
}
}


MapPop.prototype.popup=function(e,ud){
zxcES(this.pop,{visibility:(ud?'visible':'hidden'),left:zxcPos(this.obj)[0]+this.lft+'px',top:zxcPos(this.obj)[1]+this.top+'px'});
this.cnt=0;
clearTimeout(this.to);
var oop=this
if (ud) this.to=setTimeout(function(){ oop.rotate(); },10);
}

MapPop.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);
}
}

MapPop.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}


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);
}
}
}

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;
}

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 zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

/*]]>*/
</script>

</head>

<body onload="InitWords('tst',1000);InitImages('img',1000);InitMap('map',1000);" >
<div id="tst" >
abc def hello
</div>
<img title="Some Text" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" class="img" />

<img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" class="map" alt="WinterPalace" usemap="#Map" ismap="ISMAP" />

<map name="Map" class="map">
<area shape="rect" coords="233,128,361,235" href="#" title="quiz" class="tst">
<area shape="rect" coords="106,6,211,93" href="#" title="blog" class="tst">
<area shape="rect" coords="223,8,310,93" href="#" title="games" class="tst">
<area shape="rect" coords="315,9,397,93" href="#" title="story" class="tst">
<area shape="rect" coords="361,129,487,236" href="#" title="about us" class="tst">
<area shape="rect" coords="486,130,602,237" href="#" title="lessons" class="tst">
<area shape="rect" coords="629,136,733,234" href="#" target="_blank" title="dictionary" class="tst">
<area shape="rect" coords="510,3,581,96" href="#" title="home" class="tst">
<area title="video" shape="rect" coords="400,13,471,97" href="#" class="tst">
</map>
</body>

</html>