PDA

View Full Version : Image w/ description tooltip v2.0 not working properly



alakbd
09-11-2012, 04:08 AM
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.net/DA%20committee1.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/dynamicindex4/imagetooltip.htm .

Here is my code that I have used


<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>

<p><a href="http://www.dublinawamileague.net46.net"rel="imgtip[0]">Mr. Miraz Shikdar</a></p>


</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

jscheuer1
09-11-2012, 05:41 AM
Move this:


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


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

alakbd
09-11-2012, 06:04 PM
Thanks very much. Its now working....I am just impressed as you know so many things.

alakbd
09-14-2012, 01:53 AM
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/dynamicindex3/vmlfireworks_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.net/DA%20committee1.html

<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


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>

alakbd
09-16-2012, 02:44 AM
Guys,
Any one else can help me with this?

jscheuer1
09-16-2012, 02:57 AM
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.

alakbd
09-20-2012, 03:37 AM
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.