Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    help with multiple tool tips on mouse over

    Hey guys sorry if i sound like a retard trying to explain this or if i put this in the wrong section, but what i am trying to do is to get multiple tool tips to display at different locations on an image map. I have DHTML Tip Message version 1.2 and have the script currently set to have one style "style 0" to show on the mouse pointer, and style 1, to show at a specific spot on the image. I know both styles work as i can try each one individually with no problem. I just cant get it to show both at the same time.
    This is what im working with. The last line is what im working with

    Code:
     script language="JavaScript"> var message="This option has been disabled. Saving this image is not allowed!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>
    <script type="text/javascript" src="Java/mapper.js"></script>
    <script language="JavaScript1.2" src="Java/main.js" type="text/javascript"></script>
    <meta name="GENERATOR" content="MSHTML 9.00.8112.16446">
    </head>
    <body>
    <div id="TipLayer" style="visibility: hidden; position: absolute; z-index: 1000; top: -100px;"></div>
    <script language="JavaScript1.2" src="Java/style.js" type="text/javascript"></script>
    <div><img src="../pics/casino%20floor.jpg" class="mapper" usemap="#testing" border="0" height="307" hspace="0" width="450"></div>
    <h3> Map to big or to small?</h3>
    <h4> Try pressting Ctrl + or Ctrl -</h4>
    <map name="testing">
    <area class="noborder icolorff0000" onmouseover="stm(Text[0],Style[0])"; "stm(Text[1],Style[1];" onmouseout="htm()" onclick="alert('CC3202 \n Camera: 332')" nohref="nohref" shape="RECT" alt="CC3302 Camera: 332" coords="153,173,171,196">
    any and all help is greatly appreciated and again i'm just learning to use java and relearning html for a small project at work. So if you need me to clarify on anything please let me know.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    i'm just learning to use java
    No, you are not. Or at least you aren't demonstrating that on this page.

    You are demonstrating here that you are learning JavaSCRIPT. Java is an entirely different language, nowadays used mostly server-side. About the only thing the two languages have in common are the first 4 letters of their names.

    *********
    Now, back to your question about JavaSCRIPT.

    First of all, you have some incredibly ancient code in there.

    IE4 and NS4 are so long obsolete it's ridiculous. Shades of 1997 or so. Any time you see code using document.all or document.layers, it is a sign that you should run, not walk, away from such ancient crud.

    Secondly, your attempt to keep people from stealing an image is an utter waste of time. Anybody with 10% of a brain can steal your image no matter what you do playing with mouse clicks, etc.

    So okay, ignoring all that...

    Let's look at the *relevant* part of your code:
    Code:
    <map name="testing">
    <area class="noborder icolorff0000" 
         onmouseover="stm(Text[0],Style[0])"; 
         "stm(Text[1],Style[1];" 
         onmouseout="htm()" 
         onclick="alert('CC3202 \n Camera: 332')" 
         nohref="nohref" 
         shape="RECT" 
         alt="CC3302 Camera: 332" 
         coords="153,173,171,196">
    Ummm... where is your </map> tag? Without it, you do not *HAVE* a map.

    Anyway, notice how I "prettied up" your HTML there.

    And notice the code in red.

    That code is illegal HTML. It's just some text in quotes sitting in the middle of an HTML tag. It won't be recognized as anything, so it will just be thrown away.

    I assume that what you meant to do was
    Code:
         onmouseover="stm(Text[0],Style[0]); stm(Text[1],Style[1];"
    That is, you wanted to call the stm() function twice. To do so, both calls must be in the same "..." after the event name.

    If this doesn't work, try showing us your actual page. Most especially, show us the code for stm( ) and htm( ).

    **********

    And just to live up to my name as "pedant":

    Wrong:
    Code:
    <h3> Map to big or to small?</h3>
    Right:
    Code:
    <h3> Map too big or too small?</h3>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for the reply sorry i haven't been on to thank you sooner. Also i would like to apologize for calling it java instead of javascript... and having messy code.... and grammar. Hopefully in time you will forgive me. Unless you continue to read this and find grammatical errors, then all bets are off.

    I have tried to use ";" to have multiple tips one one mouseover, but it will still only load one.

    The I changed the javascript I'm using to overlib. I would link the code but its kinda big.
    Here is a link to the file if you would like to see it.
    http://www.bosrup.com/web/overlib/overlib.js

    I do not have an actual page set up as my project will just be accessed from a local server on a closed network. So i did the next best thing i could think of. I went to JSfiddle.net and made a mock up.
    http://jsfiddle.net/wqggG/2/

    So that is what i have. But what i am wanting is when you mouseover one of the image areas is to have tooltips show in different areas to point out information. I did a mock up to the image i used to show an example of what i am looking for.



    Thanks again for your help. Oh and the first area in my code is located near the middle of the picture if you are wondering.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    There is another way to do tooltips than the map method, javascript finds the mouse position and does a comparison with an array of values and puts up a tooltip if the position is within a certain range. I wrote a script for it quite a while ago.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I really really really think you need to dump that "overlib.js" code YESTERDAY and get some MODERN code.

    There is no reason to have to make two calls to create a tooltip like you show that has two sections to it. Really. None.

    And in any case, it was never designed to show more than one <div> overlay at a time. As is witnessed by the fact that you only *HAVE* one
    <div id="overDiv">
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Could you point me in the right direction?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Try this. See if it works for you.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div#myToolTip {
        position:absolute; 
        display: none;
        top: 0px; left: 0px;
        width: 200px; height: 30px;
        z-index:1000;
    }
    div#message1 {
        position: absolute;
        top: 0px; left: 0px;
        width: 200px; height: 20px;
        background-color: blue;
        padding-left: 5px; padding-bottom: 2px;
        color: white;
    }
    div#message2 {
        position: absolute;
        width: 200px; height: 20px;
        top: 20px; left: 0px;
        background-color: magenta;
        padding-left: 5px; padding-bottom: 2px;
        color: white;
    }
    </style>
    <script type="text/javascript">
    function showTip( where, msg1, msg2 )
    {
        document.getElementById("message1").innerHTML = msg1;
        var m2 = document.getElementById("message2");
        m2.style.display = "none";
        if ( msg2 != null && msg2.length > 0 )
        {
            m2.style.display = "block";
            m2.innerHTML = msg2;
        }
        var tip = document.getElementById("myToolTip");
        var coords = where.coords.split(",");
        var pic = document.getElementById("PIC");
        var node = pic;
        var x = Number(coords[0]);
        var y = Number(coords[1]);
        while ( node != null )
        {
            x += node.offsetLeft;
            y += node.offsetTop;
            node = node.offsetParent;
        }
        tip.style.left = x + "px";
        tip.style.top  = y + "px";
        tip.style.display = "block";
        return false;
    }
    function hideTip( )
    {
        document.getElementById('myToolTip').style.display='none';
    }
    </script>
    </head>
    <body>
    <div id="myToolTip" onmouseout="hideTip()">
        <div id="message1">first</div>
        <div id="message2">second</div>
    </div>
    
    <div style="margin-top: 130px; margin-left: 87px;">
          <img id="PIC"
               src="http://www.lusdesignassociates.com/media/HP+Casino+Partial+Floor+Plan+Web+pg.jpg"
               usemap="#testing"
               border="0"
               height="307"
               hspace="0"
               width="450">
    </div>
            
    <map name="testing" id="testing">
        <area href="#"
              onmouseover="showTip(this,'area 1, message1', 'area 1, second message');"
              onclick="alert('test1 \n message')"
              shape="rect"
              alt="bank1"
              coords="153,173,171,196"/>
        <area href="#"
              onmouseover="showTip(this,'area 2, only message');"
              onclick="alert('test2 \n message2')"
              shape="rect"
              alt="DD202 Cameras: 211 and 212"
              coords="277,188,309,210"/>
    </map>
    </body>
    </html>
    The positions of the tooltips can be adjusted to center on the <area>, if you prefer. As it is now, the top left corner of the tooltip matches the top left corner of the <area>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    xpeppyx (07-31-2012)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    The colors are all under your control, of course. Just look in the <style> section and adjust as desired. Notice how you can call the function with either one or two messages and it adjusts automatically.

    And I *assumed* that all your <area>s were shape="rect". If not, we would need to adjust the code more.

    Oh...and I used margin-left and margin-top to move the <img> away from the top left corner, to show that it works wherever the image is on the page.
    Last edited by Old Pedant; 07-31-2012 at 05:16 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Awesome! That's great, you're a saint and i don't care what anyone else says about you!

    One question though. Is there a way to have the position of the message start at the top of the picture?

    Code:
    div#message2 {
        position: absolute;
        width: 200px; height: 20px;
        top: 20px; left: 0px;
        background-color: magenta;
        padding-left: 5px; padding-bottom: 2px;
        color: white;
    As it is top 1 and left 1 is where the tooltip starts and

    Code:
    div#message2 {
        position: absolute;
        width: 200px; height: 20px;
        top: -165px; left:-155px;
        background-color: magenta;
        padding-left: 5px; padding-bottom: 2px;
        color: white;
    is the actual top left of the image. Also is there a way to sticky the tooltips until mouseover a new area? If not no biggie the code you supplied will help me out tremendously as it stands. again thank you

  • #10
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    The colors are all under your control, of course. Just look in the <style> section and adjust as desired. Notice how you can call the function with either one or two messages and it adjusts automatically.

    And I *assumed* that all your <area>s were shape="rect". If not, we would need to adjust the code more.

    Oh...and I used margin-left and margin-top to move the <img> away from the top left corner, to show that it works wherever the image is on the page.
    No not all will be rectangles most of them will be polygon

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    What? Where did this come from:
    Code:
        top: -165px; left:-155px;
    ??? That's not in my code.

    When I tested this in Firefox, as I stated, the top left corner of the tooltip is *AT* the first coordinate pair (for a rectangle, the top left corner) of the <area> that is moused over.

    If that didn't happen for you, what browser are you using?

    And, yes, the tool tip can be sticky. Or we could allow the user to click on it to close it. Or or or.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    If you use a polygon, just make sure that you put the coordinates where you want the tooltip to appear as the first in the list of pairs.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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