Results 1 to 4 of 4

Thread: Cool DHTML Tooltip II - in IE

  1. #1
    Join Date
    Aug 2006
    Location
    Budapest, Hungary
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Cool DHTML Tooltip II - in IE

    I am using
    Cool DHTML Tooltip II
    what I find very attractive and useful.

    Please, see the site (sorry, the text is in Hungarian): 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
    Last edited by tamas; 08-08-2006 at 07:29 AM. Reason: correction

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread 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.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •