Very simple tooltip image

@IcelineMay 25.2006

I’m looking for the simplest way to make a little 115×115 image show up at the location of the cursor when it hovers over a specific table cell, I have a few different cells that should show different images.

I don’t need special features like fading or borders, just an image being displayed on the lower right side of the cursor. I’ve searched online for scripts but they all seemed so complicated and as I’m very new to js, I’m not really able to filter out all the features and code I don’t need.

Does anyone have an idea how to do this?

to post a comment

JavaScript

3 Comments(s) _↴

@vwphillipsMay 25.2006 — #

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 <!--
 // ToolTip Image (25-May-2006)
 // by Vic Phillips http://www.vicsjavascripts.org.uk
 
 
 
 
 // ***** Functional Code - NO NEED to Change
 
 var zxcOOPCnt=0;
 var zxcObj;
 var zxcEvt=0;
 
 function zxcToolTip(zxcevt,zxcsrc){
 var zxcobj=zxcEventObj(zxcevt);
 if (!zxcobj.tt){
 zxcobj.tt=new  zxcOOPToolTip(zxcobj,zxcsrc);
 }
 clearTimeout(zxcobj.tt.to);
 zxcobj.tt.pos=[zxcMse(zxcevt)[0],zxcMse(zxcevt)[1]];
 if (zxcsrc){ zxcobj.tt.setTimeOut('show()',100); }
 else { zxcobj.tt.setTimeOut('hide()',10); }
 }
 
 
 function zxcOOPToolTip(zxcobj,zxcsrc){
 this.tt=zxcStyle('DIV',{position:'absolute',visibility:'hidden'});
 var zxcimg=zxcStyle('IMG',{position:'absolute',left:'0px',top:'0px'});
 zxcimg.src=zxcsrc;
 this.tt.appendChild(zxcimg);
 document.getElementsByTagName('BODY')[0].appendChild(this.tt);
 this.tt.className='tt1';
 this.ref='zxcooptt'+zxcOOPCnt++;
 window[this.ref]=this;
 this.to=null;
 }
 
 zxcOOPToolTip.prototype.show=function(){
 zxcStyle(this.tt,{visibility:'visible',left:this.pos[0]+'px',top:this.pos[1]+'px'});
 zxcObj=this.tt;
 }
 
 zxcOOPToolTip.prototype.hide=function(){
 zxcStyle(this.tt,{visibility:'hidden'});
 }
 
 zxcOOPToolTip.prototype.setTimeOut=function(zxcf,zxcd){
 this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
 }
 
 function zxcStyle(zxcele,zxcstyle,zxctxt){
 if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
 for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
 if (zxctxt){ zxcele.innerHTML=zxctxt; }
 return zxcele;
 }
 
 function zxcMseDown(event,zxcobj){
 if (zxcObj){ return; }
 document.onselectstart=function(event){window.event.returnValue=false; }
 zxcObj=zxcCkObject(zxcobj);
 zxcObj.pos=[zxcPos(zxcObj)[0],zxcPos(zxcObj)[1]];
 zxcObj.osx=zxcMse(event)[0]-zxcObj.offsetLeft;
 zxcObj.osy=zxcMse(event)[1]-zxcObj.offsetTop;
 }
 
 function zxcDrag(event){
 if (!zxcObj){ return; }
 zxcObj.style.left=(zxcMse(event)[0])+'px';
 zxcObj.style.top=(zxcMse(event)[1])+'px';
 }
 
 function zxcMse(event){
 if(!event) var event=window.event;
 if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
 else { return[event.pageX,zxcMseY=event.pageY]; }
 }
 
 function zxcDocS(){
 var zxcsx,zxcsy;
 if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
 else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
 return [zxcsx,zxcsy];
 }
 
 function zxcEventObj(zxce){
 if (!zxce) var zxce=window.event;
 if (zxce.target) zxceobj=zxce.target;
 else if (zxce.srcElement) zxceobj=zxce.srcElement;
 if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
 return zxceobj;
 }
 
 function zxcEventAdd(zxco,zxct,zxcf){
 if (zxco.addEventListener){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
 else if (zxco.attachEvent){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
 else {
 var zxcPrev=zxco['on'+zxct];
 if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
 else { zxco['on'+zxct]=zxco[zxcf]; }
 }
 }
 
 function zxcAddEvt(zxcobj,zxcfun,zxcevt){
 if (zxcobj[zxcevt+'add']){ return; }
 zxcobj['zxcaddEvt'+zxcEvt]=window[zxcfun];
 zxcobj[zxcevt+'add']=true;
 zxcEventAdd(zxcobj,zxcevt,'zxcaddEvt'+zxcEvt);
 zxcEvt++;
 }
 
 zxcAddEvt(document,'zxcDrag','mousemove');
 
 //-->
 </script>
 
 </head>
 
 <body>
 <span  >Link</span>
 <table border="1">
 <tr>
 <td width=100 onmouseover="zxcToolTip(event,'http://www.vicsjavascripts.org.uk/StdImages/One.gif');" onmouseout="zxcToolTip(this);">XXXXX</td>
 <td width=100 onmouseover="zxcToolTip(event,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" onmouseout="zxcToolTip(this);">XXXXX</td>
 </tr>
 <tr>
 <td width=100 onmouseover="zxcToolTip(event,'http://www.vicsjavascripts.org.uk/StdImages/Three.gif');" onmouseout="zxcToolTip(this);">XXXXX</td>
 <td width=100 onmouseover="zxcToolTip(event,'http://www.vicsjavascripts.org.uk/StdImages/Four.gif');" onmouseout="zxcToolTip(this);">XXXXX</td>
 </tr>
 </table>
 
 </body>
 
 </html>[/CODE]

@IcelineauthorMay 26.2006 — #Absolutely perfect, thanks a lot!

@wasim___drushtiMay 26.2006 — #OH! God it is such a huge code.

I have a better, Simple & an Easily Understanable code

[CODE]<html>
 
 <head>
 <meta http-equiv="Content-Language" content="en-us">
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 <title>ABC</title>
 <script language="javascript">
 function show(object)
 {
 document.getElementById(object).style.visibility='visible';
 document.getElementById(object).style.pixelLeft=event.x;
 document.getElementById(object).style.pixelTop=event.y;
 //			alert('Show');
 
 
   }
 
   function hide(object)
   {
 
   document.getElementById(object).style.visibility='hidden';
 //				alert('Hide');
 }
 
 </script>
 
 </head>
 
 <body>
 
 <div id="file1"  style="border:1px solid #FF6600; position: absolute; width: 135px; height: 49px; z-index: 2; left: 164px; top: 13px; visibility:hidden; background-color:#CCCCCC">
 <table border="0" width="100%" cellspacing="0">
 <tr>
 <td><font face="Verdana" size="2">Filename</font></td>
 <td><font face="Verdana" size="2">Type</font></td>
 <td><font face="Verdana" size="2">Size</font></td>
 </tr>
 <tr>
 <td><font face="Verdana" size="2">myFile</font></td>
 <td>
 <p align="center">
 <img border="0" src="http://www.webdeveloper.com/forum/images/smilies/eek.gif" width="16" height="16" onmouseover="show('file1')" onmouseout="hide('file1')"></td>
 <td><font face="Verdana" size="2">7kb</font></td>
 </tr>
 </table>
 </div>
 
 <div id="file2"  style="border:1px solid #FF6600; position: absolute; width: 135px; height: 49px; z-index: 1; left: 297px; top: 17px; visibility:hidden; background-color:#CCCCCC">
 <table border="0" width="100%" cellspacing="0">
 <tr>
 <td><font face="Verdana" size="2">Filename</font></td>
 <td><font face="Verdana" size="2">Type</font></td>
 <td><font face="Verdana" size="2">Size</font></td>
 </tr>
 <tr>
 <td><font face="Verdana" size="2">index.php</font></td>
 <td>
 <p align="center">
 <img border="0" src="http://www.webdeveloper.com/forum/images/smilies/eek.gif" width="16" height="16" onmouseover="show('file1')" onmouseout="hide('file1')"></td>
 <td><font face="Verdana" size="2">7kb</font></td>
 </tr>
 </table>
 </div>
 
 <table border="0" width="16%" cellspacing="0" cellpadding="2">
 <tr>
 <td width="116"><font face="Verdana" size="2">Filename</font></td>
 <td align="center"><font face="Verdana" size="2">Details</font></td>
 </tr>
 <tr>
 <td width="116"><font face="Verdana" size="2">myFile.html</font></td>
 <td align="center">
 <img border="0" src="http://www.webdeveloper.com/forum/images/statusicon/thread_hot_new.gif" width="16" height="16" onmousemove="show('file1'),this.style.cursor= 'pointer';" onmouseout="hide('file1')"></td>
 </tr>
 <tr>
 <td width="116"><font face="Verdana" size="2">index.php</font></td>
 <td align="center">
 <img border="0" src="http://www.webdeveloper.com/forum/images/statusicon/thread_hot_new.gif" width="16" height="16" onmouseover="show('file2'),this.style.cursor= 'pointer';" onmouseout="hide('file2')" ></td>
 </tr>
 </table>
 
 </body>
 
 </html>
 [/CODE]

Also in #JavaScript _↴

javascript problem Connecting to Database using Javascript bot in IE and FireFox [RESOLVED] Arithmetic Operation on HTML form element

Success!

Help @Iceline spread the word by sharing this article on Twitter...

Tweet This

Very simple tooltip image

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Very simple tooltip image

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴