Results 1 to 5 of 5

Thread: RE need help in some Tooltip sc

  1. #1
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default RE need help in some Tooltip sc

    hello guys
    i just need some customization for Tooltip thats posted in this topic
    http://www.dynamicdrive.com/forums/s...ad.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
    Code:
    <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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    you cannot have duplicate ids so using a classname

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

  3. #3
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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
    Code:
     <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
    Code:
    <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

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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.

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •