PDA

View Full Version : Image w/ description tooltip



armis
02-17-2006, 08:33 PM
Hello,

This is really good script.
Can image be shown on top left corner of page?

Thank you.
Armis.

jscheuer1
02-18-2006, 07:40 AM
Probably.
Warning: Please include a link to the DD script in question in your post.
PLEASE: Include the URL to your problematic webpage that you want help with.

armis
02-20-2006, 12:47 AM
I'm very sorry.
Here is the link to script Image w/ description tooltip:
http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

Can image be shown on top left corner of page instead of middle of page?

Thank you for any help.
Armis.

jscheuer1
02-20-2006, 06:03 AM
Find this bit in the script:


if ((mouseX+offX+tpWd)>winWd)
tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";

Make it like so:


if ((mouseX+offX+tpWd)>winWd)
tipcss.left = (ns4)? 10: 10+"px";
else tipcss.left = (ns4)? 10: 10+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = (ns4)? 10: 10+"px";
else tipcss.top = (ns4)? 10: 10+"px";

The number 10 is how far from the top and left of the page the image will be. Use any number you like for either, just make sure all red 10's (top position) are set to the same number and all green 10's (left position) are set to the same number. Having four of each is to account for different browsers and different positions on the page for the triggering event.

armis
02-21-2006, 04:22 PM
Thank you, John.

Now image is on top left corner, but it was better with original script.
Only image has overlaps with <select> elements and CSS. You mentioned that is 'known bug/feature of IE'.
You can see problem here (http://www.lavinialingerie.com/CTGY/613).

Can it be fix (hide <select> elements, CSS) for this script?

Thank you.
Armis.

jscheuer1
02-21-2006, 06:21 PM
http://www.dynamicdrive.com/forums/showthread.php?p=11343

armis
02-22-2006, 07:13 PM
I tried to use:

document.getElementById('boxOne').style.visibility='hidden';
document.getElementById('boxOne').style.visibility='visible';
if (document.all){document.getElementById('boxOne').style.visibility='hidden'};

in code and did not work.

Also <div> did not work in <body>

<div onMouseover="if (document.all&&!window.opera){document.all('boxOne').style.visibility='hidden'};ddrivetip('Here is a tooltip that displays underneath the below dropdown')" onMouseout="hideddrivetip();if (document.all&&!window.opera){document.all('boxOne').style.visibility='visible'};"></div>

Here is a page (http://www.lavinialingerie.com/ImageTip.html)

Can you tell what is missing?

Thank you for your help.
Armis.

jscheuer1
02-22-2006, 09:30 PM
Your head was fine, so here is the updated body, works here.


<body>
<table width="500" cellspacing="4" cellpadding="4">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center"><select name="boxOne">
<option value="1">White</option>
<OPTION value="2">Brown</OPTION>
<option value="3">Black</option>
</select></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<table width="270" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100" height="30" align="left" valign="middle"><span class="style8">Available color:</span></td>
<td width="170" height="30" align="left" valign="middle"><table width="90" height="20" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCFF">
<tr onmouseover="hideShowSelect('boxOne', 'boxTwo');" onmouseout="hideShowSelect('boxOne', 'boxTwo');">
<th scope="col"><a href="http://www.lavinialingerie.com/CTGY/613" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"><img src="../Merchant2/graphics/00000001/fsaw.jpg" alt="Angel White" width="30" height="20" border="0"></a></th>
<th scope="col"><a href="http://www.lavinialingerie.com/CTGY/613" onmouseover="doTooltip(event,1)" onmouseout="hideTip()"><img src="../Merchant2/graphics/00000001/fsmp.jpg" alt="Midnight Passion" width="30" height="20" border="0"></a></th>
<th scope="col"><a href="http://www.lavinialingerie.com/CTGY/613" onmouseover="doTooltip(event,2)" onmouseout="hideTip()"><img src="../Merchant2/graphics/00000001/fsmd.jpg" alt="Mocha Delight" width="30" height="20" border="0"></a></th>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="500" cellspacing="4" cellpadding="4">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td align="center"><select name="boxTwo">
<option value="1">White</option>
<OPTION value="2">Brown</OPTION>
<option value="3">Black</option>
</select></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
</body>
</html>

armis
02-23-2006, 04:28 AM
Thanks, your are a life saver:)

Armis.