Member Avatar for veledrom

Hi,

I need an effect like in this linkhttp://markgrantcables.co.uk/shop/

I simply put a "?" mark next to a textarea. When mouse is over "?" then a little explanation box will appear.

Thanks

  • 3 Contributors
  • 4 Replies
  • 112 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by veledrom
Member Avatar for Airshow

Veledrom,

No question marks here. Are you sure that's the full URL?

Airshow

Member Avatar for almostbob 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type='text/css'>
<!--
.top { background-color: #000070; color: #ffffff; text-align: right; }
td.top { background-color: #000070; color: #ffffff; text-align: right; }
td.bottom { background-color: #efefef; padding: 15px; }
.bottom {  background-color: #efefef; padding: 15px; }
-->
</style>
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt() {
 if (dom) {document.getElementById("layer1").style.visibility='hidden';}
 if (document.layers) {document.layers["layer1"].visibility='hide';} }
function showIt() {
 if (dom) {document.getElementById("layer1").style.visibility='visible';}
 if (document.layers) {document.layers["layer1"].visibility='show';} }
onResize="window.location.href = window.location.href"
//--></script>
</head>
<body>
<button onmouseover="showIt();">?</button> Question mark help
<div id="layer1" style="position:fixed; left:20px; width:45%; top:20px; visibility:hidden;">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td Align="right" onClick="hideIt()" class="top">
<font Color="#ffffff"><Strong>Close</strong></font>
</td>
</tr>
<tr>
<td class="bottom">
<center><font size="+1"><b>help page</b>:</font></center>
Blah blah blah
<UL compact>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul>
</td>
</tr>
<tr>
<td Align="right" onClick="hideIt()" class="top">
<font Color="#ffffff"><Strong>Close</strong></font>
</td>
</tr>
</table>
</div>
</body></html>

the javascript can be recoded to display any of multiple hidden divs dependant on which button is mouseovered

Member Avatar for almostbob 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type='text/css'>
<!--
.top { background-color: #000070; color: #ffffff; text-align: right; }
.bottom {  background-color: #efefef; padding: 15px; text-aliign:right;}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt(textID) {
 if (dom) {document.getElementById(textID).style.visibility='hidden';}
 if (document.layers) {document.layers[textID].visibility='hide';} }
function showIt(textID) {
 if (dom) {document.getElementById(textID).style.visibility='visible';}
 if (document.layers) {document.layers[textID].visibility='show';} }
//--></script>
</head>
<body>
<button onmouseover="showIt('layer1');" onmouseout="hideIt('layer1');">?</button> Question mark help
<br>
<button onmouseover="showIt('layer2');" onmouseout="hideIt('layer2');">?</button> second Question mark help
<div id="layer1" style="position:fixed; left:20px; top:40px; visibility:hidden;">
<ul compact='compact' class='bottom'>
<font size="+1"><b>help page</b>:<br/>
Blah blah blah
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul>
</div>
<div id="layer2" style="position:fixed; left:20px; top:40px; visibility:hidden;">
<ul compact='compact' class='bottom'>
<font size="+1">second help page:</font><br/>
Blah blah blah
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
<li>blah blah blah</li>
</ul>
</div>
</body></html>

same script, recoded for multiple divs

Member Avatar for veledrom

Solved.
Thank you almostbob

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.