PDA

View Full Version : Cool DHTML Tooltip II - in IE



tamas
08-07-2006, 10:52 PM
I am using
Cool DHTML Tooltip II (http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm)
what I find very attractive and useful.

Please, see the site (sorry, the text is in Hungarian): www.vukovics.com (http://www.vukovics.com) ... When seeing it in Opera or in
Mozzila-FireFox, the first menu-image displays tips when navigated over some
photos on the wall... what is the menu itself.
However, seeing the page in IE, it displays always the same tip, meaning, it does not give differnet text tip when it goes over a menu-area of the photo.

Could you, please, help me, how can I make this script work fine in IE, as well?

Thanks and greetings

Tamas

ddadmin
08-08-2006, 01:41 AM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question. Also, your title says "Lightbox viewer 2.0", while in your post, you say "Cool DHTML tooltip II". Please edit your thread to clarify your question.

jscheuer1
08-08-2006, 04:05 AM
Events do not bubble up in IE so, I doubt there is a way to do this. If you remove the tip from the image, then the area shape's tips will work.

jscheuer1
08-08-2006, 04:43 AM
Ah, I spoke too soon. Event bubbling may not be possible in IE but, there's more than one way to skin a cat:


<html>
<head>
<title>www.vukovics.com - Nyitó oldal - menó</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta name="keywords" content=" kulcs, zár, kulcsmásolás, zárbetét, hengerzár betét, hevederzár, hevederzár betét, bevésozár, kódkártya, kártya, Cegléd, Elzett, Zone, Z1, Yale, zárszerviz, zárjavítás, zárszerelés, ajtó, ajtónyitás, muszaki ajtónyitás,
lakat, fúrásvédett, letapogatás védett, másolás védett, páncélszekrény,
segélyszolgálat, éjjel-nappal, Vukovics, Cegléd, Vukovics József, Zárcentrum">

<style type="text/css">
* html .notIE {
display:none;
}

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
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,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

</style>

</head>



<body bgcolor="#FF9933" text="#0000FF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<div align="center">
<p>
<script type="text/javascript">

/***********************************************
* Cool DHTML tooltip script II- Š Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip

var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer image

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") : ""

var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thewidth, thecolor){
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 nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20

var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-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=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
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+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=function(e){positiontip(e);
if(e)
return;
var et=window.event.srcElement;
if (et.tagName.toLowerCase()!=='area'&&et.id!=='isIE')
hideddrivetip();
if (et.id=='isIE')
ddrivetip('MENÜ - Kérem, válasszon a menüpontok közül', 300);
}

</script>
<b><font size="+3">VUKOVICS<br>
</font><font size="+1">ZÁRCENTRUM, KULCSMÁSOLÁS<br>
2700 Cegléd, Kossuth F. u. 8.<br>
Mobil: 06-30/619-6132<br>
</font></b><a href="mailto:info@vukovics.com"><strong>info@vukovics.com</strong></a><br>
<a href="mailto:info@vukovics.com"></a></p>
</div>
<div align="center">
<p><!--[if IE]>
<img id="isIE" src="menu.jpg" width="500" height="371" usemap="#Map" border="4"> <map name="Map">
<area shape="poly" coords="167,117,222,126,220,198,164,198" href="mult.htm"
onmouseover="ddrivetip('a múltról', 120)">
<area shape="poly" coords="54,123,136,129,133,187,49,185" href="uzlet.htm"
onmouseover="ddrivetip('az üzletrol - elérhetoség, nyitvatartás', 200)">
<area shape="poly" coords="268,145,328,150,324,195,267,190" href="szolg.htm"
onmouseover="ddrivetip('szolgáltatásaink', 150)">
<area shape="poly" coords="172,27,223,34,219,102,170,99" href="termek.htm"
onmouseover="ddrivetip('termékeink', 150)">
<area shape="poly" coords="452,158,487,149,488,216,456,217" href="ajanl.htm"
onmouseover="ddrivetip('ajánlom figyelmébe - barátok, partnerek, érdekességek', 170)">
</map>
<![endif]--><img class="notIE" src="menu.jpg" width="500" height="371" usemap="#Map" border="4"
onmouseover="ddrivetip('MENÜ - Kérem, válasszon a menüpontok közül', 300)";
onmouseout="hideddrivetip()" >
<map class="notIE" name="Map">
<area shape="poly" coords="167,117,222,126,220,198,164,198" href="mult.htm"
onmouseover="ddrivetip('a múltról', 120)";
onmouseout="hideddrivetip()">
<area shape="poly" coords="54,123,136,129,133,187,49,185" href="uzlet.htm"
onmouseover="ddrivetip('az üzletrol - elérhetoség, nyitvatartás', 200)";
onmouseout="hideddrivetip()">
<area shape="poly" coords="268,145,328,150,324,195,267,190" href="szolg.htm"
onmouseover="ddrivetip('szolgáltatásaink', 150)";
onmouseout="hideddrivetip()">
<area shape="poly" coords="172,27,223,34,219,102,170,99" href="termek.htm"
onmouseover="ddrivetip('termékeink', 150)";
onmouseout="hideddrivetip()">
<area shape="poly" coords="452,158,487,149,488,216,456,217" href="ajanl.htm"
onmouseover="ddrivetip('ajánlom figyelmébe - barátok, partnerek, érdekességek', 170)";
onmouseout="hideddrivetip()">
</map>
</p>
<p><i>Szeretettel köszöntjük honlapunkon és várjuk üzletünkben és telefonon.</i><br>
<i>Vukovics József és Ági</i></p>
<p>&nbsp;</p>
<p><a href="uzlet.htm">az üzletrol - elérhetoség, nyitvatartás</a> * <a href="termek.htm">termékeink</a>
* <a href="szolg.htm">szolgáltatásaink</a> * <a href="mult.htm">a múltról</a><br>
<a href="ajanl.htm">ajánlom figyelmébe - barátok, partnerek, érdekességek
</a></p>
</div>
</body>


</html>