1) Script Title:
DHTML tooltip script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tmltooltip.htm
3) Describe problem:
I am currently using this script to successfully show an image in the tool tip when mouseing over a thumbnail.
Now I want to add the script and feature to a different page to show an image in the tool tip when mousing over a text link.
The issue is that I'm getting syntax errors because I'm not familiar enough with coding to do it right.
The DHTML script included on the page is:
and I'm trying to add to the following line with the mouseover additions:Code:<style type="text/css"> #dhtmltooltip{ position: absolute; width: 150px; border: 1px solid #BBC3D3; padding: 2px; background-color: lightred; FONT-SIZE: 9pt; font-family: verdana; visibility: hidden; z-index: 100; /*Remove below line to remove shadow. Below line should always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,directio n=135); } </style> <div id="dhtmltooltip"></div> <script type="text/javascript"> var offsetxpoint=50 //Customize x offset of tooltip var offsetypoint=-180 //Customize y offset of tooltip var ie=document.all var ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function ddrivetip(thetext, thecolor, thewidth){ if (ns6||ie){ if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor tipobj.innerHTML=thetext enabletip=true return false } } function positiontip(e){ if (enabletip){ var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft; var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop; //Find out how close the mouse is to the corner of the window var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20 var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20 var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000 //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<tipobj.offsetWidth) //move the horizontal position of the menu to the left by it's width tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px " : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px" else if (curX<leftedge) tipobj.style.left="5px" else //position the horizontal position of the menu where the mouse is positioned tipobj.style.left=curX+offsetxpoint+"px" //same concept with the vertical position if (bottomedge<tipobj.offsetHeight) tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px" else tipobj.style.top=curY+offsetypoint+"px" tipobj.style.visibility="visible" } } function hideddrivetip(){ if (ns6||ie){ enabletip=false tipobj.style.visibility="hidden" tipobj.style.left="-1000px" tipobj.style.backgroundColor='' tipobj.style.width='' } } document.onmousemove=positiontip </script>
In the same manner that it is coded (and working) on this line:Code:response.write "<img src='../UserMods/misc_Dot2.gif' width='11' height='7' align='absmiddle'><a class='sitemap' href= """ & urlNonSSL & "prodView.asp?idProduct=" &rsTemp("idProduct") & """>" & rsTemp("description") & "</a>
any help is greatly appreciated.Code:<a href="prodView.asp?idproduct=<%=IDProduct%>"><img src="<%=pImagesDir & smallimageURL%>" border="0" onMouseover="ddrivetip('<center><%=description%></center><img src=<%=pImagesDir & imageURL%> border=0 width=240>','#F5F5F5', 240)"; onMouseout="hideddrivetip()"></a>



Reply With Quote
Bookmarks