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. See this thread for the proper posting format for asking a question.
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/dynamici...agetooltip.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:

Code:

	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:

Code:

	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.

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/s...ad.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

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.

Code:

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

Thread: Image w/ description tooltip

Thread Tools

Search Thread

Image w/ description tooltip

Bookmarks

Bookmarks

Posting Permissions