Results 1 to 7 of 7

Thread: Image w/ description tooltip v2.0 not working properly

  1. #1
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image w/ description tooltip v2.0 not working properly

    Dear all,
    I am having problem with this feature. I dont know how to configure this. This is my test website ( http://www.dublinawamileague.net46.n...ommittee1.html) where I am trying to use this script.But its now working for me.Can you guys pls help me.

    I was trying use this features from this website http://www.dynamicdrive.com/dynamici...agetooltip.htm .

    Here is my code that I have used

    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="DA Committee/ddimgtooltip.css" />
    
    <script type="text/javascript" src="DA Committee/ddimgtooltip.js">
    
    /***********************************************
    * Image w/ description tooltip v2.0- (c) 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 this script and 100s more
    ***********************************************/
    
    </script>
    
    <body>
    
    [COLOR="#FF0000"]<p><a href="http://www.dublinawamileague.net46.net"rel="imgtip[0]">Mr. Miraz Shikdar</a></p>[/COLOR]
    
    
    </body>
    I did little change to "ddimgtooltip.js" for this "Miraz Shikdar" Pic.
    tooltips[0]=["DA Images/AL pre.JPG", "Dublin Awamileague<br /> President", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]

    I cant find where did I make that mistake that it is not working.I need your help.

    Thanks & Regards,
    alak
    Last edited by alakbd; 09-14-2012 at 01:42 AM.

  2. #2
    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

    Move this:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="DA Committee/ddimgtooltip.css" />
    
    <script type="text/javascript" src="DA Committee/ddimgtooltip.js">
    
    /***********************************************
    * Image w/ description tooltip v2.0- (c) 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 this script and 100s more
    ***********************************************/
    
    </script>
    To here:

    Code:
     . . . om: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <link href="DA/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    /* Give the menu bar a width and set the margins to "auto"
     * so that the browser does the centering.
     */
    
    ul.MenuBarHorizontal {
    	width: 83.85em;
    	margin: auto;
    }
    -->
    </style>
    <meta name="google-translate-customization" content="62b02790e74d2f53-aa86af24eaf3d614-g61581530cc63684a-1f"></meta>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="DA Committee/ddimgtooltip.css" />
    
    <script type="text/javascript" src="DA Committee/ddimgtooltip.js">
    
    /***********************************************
    * Image w/ description tooltip v2.0- (c) 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 this script and 100s more
    ***********************************************/
    
    </script>
    </head>
    
    <body>
        <p></p>
    
    	<ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Home&nbsp</a>
          <ul>
              <li><a href="#">Ite . . .
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks very much. Its now working....I am just impressed as you know so many things.

  4. #4
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Jscheuer,
    Thanks for the previous help.If I am not asking too much is it possible to add Fire works script with that from here http://www.dynamicdrive.com/dynamici...eworks_dev.htm. As I trierd It seems not working. I am not sure if it is conflicting with the other script. I did try myself several ways before submit this thread here. Here is the example the way I used the script in body section. Testing website address is http://www.dublinawamileague.net46.n...ommittee1.html
    Code:
    <body>
        <p></p>
    
    	<ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Home&nbsp</a>
          <ul>
              <li><a href="#">Item 1.1</a></li>
              <li><a href="#">Item 1.2</a></li>
              <li><a href="#">Item 1.3</a></li>
            </ul>
          </li>
          <li><a href="#">Activities&nbsp</a></li>
          <li><a href="#">News</a>
            <ul>
              <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                <ul>
                  <li><a href="#">Item 3.1.1</a></li>
                  <li><a href="#">Item 3.1.2</a></li>
                </ul>
              </li>
              <li><a href="#">Item 3.2</a></li>
              <li><a href="#">Item 3.3</a></li>
            </ul>
          </li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
       
    <div class="container" style="height:2250px">
      <div class="header">
    <p align="center">
    <p> </p>
      
      <!-- end .header --></p>
    <p>&nbsp;<table border="1" width="14%"; height="25">
    	<tr>
    		<td><!--[if IE ]>
     <script language="JavaScript">
     
    /*
     VML Fireworks script -- By Jacco IJzerman (j.ijzerman1@REMOVETHISchello.nl)
     Permission granted to Dynamicdrive.com to feature script in archive.
     For full source code, visit http://www.dynamicdrive.com/
     */
     
    //Customize fireworks colors:
     colors = new Array();
     colors[0] = new Array('yellow', 'lime');
     colors[1] = new Array('silver', 'green')
     colors[2] = new Array('silver', 'blue');
     colors[3] = new Array('silver', 'purple');
     colors[4] = new Array('purple', 'white');
     colors[5] = new Array('blue', 'silver');
     colors[6] = new Array('red', 'fuchsia');
     colors[7] = new Array('yellow', 'red');
     
    maximum = 1000;
     
    vmlobj=''; 
     for(i = 0; i < 12; i++){ 
     vmlobj += '<div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">';
     vmlobj += '<v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">';
     vmlobj += '<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>';
     vmlobj += '<v:stroke on="false" /></v:shape></div>';
     }
     document.write(vmlobj); vmlobj = null;
     
    aantal = 0;
     
    function begin()
     {
     try {
     if(aantal == maximum){ return;}
     kleurschema = Math.floor(Math.random() * colors.length);
     posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180));
     posLinks = (posLinks < 170)? 170: posLinks;
     posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180));
     posBoven = (posBoven < 170)? 170: posBoven;
     straal = 0; uiteen = true; teller = 1; flikkereffect = false;
     for(var i = 0; i < 12; i++){
     document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]);
     document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix
     document.getElementById('ster'+i).style.left = posLinks;
     document.getElementById('ster'+i).style.top = posBoven;
     }
     document.getElementById('ster0').style.top = (document.body.clientHeight - 20); 
     document.getElementById('ster0').style.visibility = 'visible';
     omhoog();
     } catch(e){}
     }
     
    function omhoog()
     {
     try {
     positie = parseInt(document.getElementById('ster0').style.top);
     if(positie > posBoven){
     document.getElementById('ster0').style.top = (positie - 25); 
     setTimeout('omhoog()', 50);
     } else {
     for(i = 1; i < 12; i++){
     document.getElementById('ster'+i).style.top = positie;
     document.getElementById('ster'+i).style.visibility = 'visible';
     } 
     uiteenspatten();
     }
     } catch(e){}
     }
     
    function uiteenspatten()
     {
     try {
     if(straal > 120 && straal % 10 == 0){ 
     flikkereffect = true;
     teller = (teller == colors[kleurschema].length)? 0: (teller+1);
     }
     for(var i = 0; i < 12; i++){
     var hoek = i * 30; 
     var piHoek = Math.PI - Math.PI / 180 * hoek;
     var links = posLinks + Math.round(straal * Math.sin(piHoek)); 
     var boven = positie + Math.round(straal * Math.cos(piHoek));
     document.getElementById('ster'+i).style.left = links;
     document.getElementById('ster'+i).style.top = boven;
     if(flikkereffect){
     document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]);
     }
     }
     if(straal < 160 && uiteen){
     straal += (straal < 120)? 10: 5;
     setTimeout('uiteenspatten()', 50);
     }
     else if(straal > 120){
     uiteen = false; straal -= 5;
     setTimeout('uiteenspatten()', 50);
     }
     else if(straal <= 120){
     for(var i = 0; i < 12; i++){
     document.getElementById('ster'+i).style.visibility = 'hidden';
     }
     aantal++;
     setTimeout('begin()', 500);
     }
     } catch(e) {}
     }
     
    window.onload=begin;
     
    </script>
     <![endif]-->
     </td>
    	</tr>
    </table>
    	</div>
        <div class="sidebar1"; style="width: 80px; height: 400px">
    And here is the Head section

    Code:
    ul.MenuBarHorizontal {
    	width: 83.85em;
    	margin: auto;
    }
    -->
    </style>
    <!-- Insert following in the <HEAD> section of your page -->
    
    <!--[if IE ]>
     <style type="text/css">
     body { overflow-x: hidden; }
     v\:* { behavior: url(#default#VML); }
     </style>
     <![endif]-->
     
    </head>
     <body bgcolor="black">
    
    <meta name="google-translate-customization" content="62b02790e74d2f53-aa86af24eaf3d614-g61581530cc63684a-1f"></meta>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="DA Committee/ddimgtooltip.css" />
    
    <script type="text/javascript" src="DA Committee/ddimgtooltip.js">
    
    /***********************************************
    * Image w/ description tooltip v2.0- (c) 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 this script and 100s more
    ***********************************************/
    
    </script>
    
    </head>

  5. #5
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Guys,
    Any one else can help me with this?

  6. #6
    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

    You really should start a new thread for a new question. I took a look at this earlier and since you said, "If it's not too much trouble". I figured I could skip it. Others are not as likely to respond unless you make a new thread.

    I can tell you though that the fireworks script is IE only because it uses IE's proprietary VML syntax. And that the fireworks script is written for IE in quirks mode and as such will not work on a standards invoking page like you're trying it there. The other script and the page's layout itself may or may not suffer if you use quirks mode for the page, and that might not solve the problem, but it's worth a shot. Remove the DOCTYPE from the page. If that doesn't fix it or causes other problems, then start a new thread. Or consider a different fireworks script or no fireworks script.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

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

  7. #7
    Join Date
    Jul 2011
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry John for the late reply.I did as the way said and it worked fine. Although i used another firworks Jquery and that is working with all browsers.Thanks very much.

Similar Threads

  1. Image w/ description tooltip - Description hidden
    By Lady Rogue in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 01-25-2010, 05:39 PM
  2. Image w/ description tooltip bug?
    By srcoffee in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-13-2007, 12:02 AM
  3. Image w/ description tooltip (Runtime Error + not working in IE)
    By ~jc in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 08-14-2007, 07:32 PM
  4. Image w/ description tooltip *not working for me*
    By Sparkle in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-04-2006, 05:48 AM

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
  •