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
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
Jump to PostVeledrom,
No question marks here. Are you sure that's the full URL?
Airshow
Veledrom,
No question marks here. Are you sure that's the full URL?
Airshow
<!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
<!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
Solved.
Thank you almostbob
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.