<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
/* General styles */
body { font-family:verdana,arial,helvetics,sans-serif; }
h1 { margin:0; font-size:14pt;}
h2 { margin:0; font-size:12pt; }
.method { margin:30px 0; }
p.note { margin:3px 0 0 0; font-size:8pt; }
p.sig { margin:12px 0 0 0; font-size:14pt; font-style:italic; }
/* Styles for Method 1 */
#altImageWrapper { margin:3px 0 0 0; }
#altImageWrapper img { border:0; }
/* Styles for Method 2 */
#imageWrapper { position:relative; margin:6px 0 0 0; }
#imageWrapper img { border-width:0; }
#imageWrapper .popUpTxt { position:absolute; display:none; padding:0px 3px; font-weight:bold; background-color:#FFFFFF; font-size:10pt; border:1px solid #999999; }/* Note: This causes all three text divs to be absolutely positioned and initially hidden */
#imageWrapper #popUpTxt1 { left:30px; top:35px; color:#800868; }
#imageWrapper #popUpTxt2 { left:78px; top:35px; color:#800868; }
#imageWrapper #popUpTxt3 { left:170px; top:35px; color:#F09000; }
/* Styles for Method 3 */
#imageWrapper2 { margin:6px 0 0 0; }
#imageWrapper2 img { border:0; }
#popUpTxtWrapper { margin:12px 0 0 0; width:120px; height:1.0em; font-size:14px; font-weight:bold; text-align:center; border:2px solid #999999; }
</style>
<script language="JavaScript" type="text/javascript">
//No JavaScript required for Method 1
//For Method 2
function showHideTxt(n, b_show){
if(!n) return false;
b_show = (!b_show) ? false : true;
var wrapper = (document.getElementById) ? document.getElementById('imageWrapper') : document.all.imageWrapper;
for(var i=1; i<=3; i++){
var txtWrapper = (document.getElementById) ? document.getElementById('popUpTxt'+i) : document.all['popUpTxt'+i];
txtWrapper.style.display = (b_show && i==n) ? 'block' : 'none';
}
return false;
}
//For Method 3
function showTxt(n, txt, color){
if(!n) return false;
txt = (!txt) ? '- - - - -' : txt;
color = (!color) ? '#000000' : color;
var txtWrapper = (document.getElementById) ? document.getElementById('popUpTxtWrapper') : document.all['popUpTxtWrapper'];
txtWrapper.innerHTML = txt;
txtWrapper.style.color = color;
return false;
}
</script>
</head>
<body>
<h1>Show/hide text in response to User Events with an Image</h1>
<p class="note">Three methods. In each method there is a "hot-spot" over the "D", "N" and "B" of <b>Daniweb</b>.</p>
<div class="method">
<h2>Method 1: Imagemap with "alt" Text</h2>
<p class="note">Place <b>mouse over</b> hot-spot to show text; move <b>mouse off</b> hot-spot to hide.</p>
<p class="note">This is the easiest method by far as it involves only HTML, no Javascript.</p>
<div id="altImageWrapper" class="method">
<img src="http://www.daniweb.com/alphaimages/logo/logo.gif" useMap="#altTxt" />
</div>
<map name="altTxt">
<area shape="rect" coords="30,0,58,30" href="" alt="D D D D D" onclick="this.blur(); return false">
<area shape="rect" coords="78,0,106,30" href="" alt="N N N N N" onclick="this.blur(); return false">
<area shape="rect" coords="170,0,195,30" href="" alt="B B B B B" onclick="this.blur(); return false">
</map>
</div>
<div class="method">
<h2>Method 2: Imagemap with DHTML (text over image)</h2>
<p class="note"><b>Click</b> hot-spot to show text; move <b>mouse off</b> hot-spot to hide.</p>
<p class="note">Text written directly into HTML divs; text colors defined in CSS</p>
<div id="imageWrapper">
<img src="http://www.daniweb.com/alphaimages/logo/logo.gif" useMap="#dhtmlTxt1" />
<div id="popUpTxt1" class="popUpTxt">D D D D D</div>
<div id="popUpTxt2" class="popUpTxt">N N N N N</div>
<div id="popUpTxt3" class="popUpTxt">B B B B B</div>
</div>
<map name="dhtmlTxt1">
<area shape="rect" coords="30,0,58,30" href="" onclick="return showHideTxt(1, true)" onMouseOut="return showHideTxt(1, false)">
<area shape="rect" coords="78,0,106,30" href="" onclick="return showHideTxt(2, true)" onMouseOut="return showHideTxt(2, false)">
<area shape="rect" coords="170,0,195,30" href="" onclick="return showHideTxt(3, true)" onMouseOut="return showHideTxt(3, false)">
</map>
</div>
<div class="method">
<h2>Method 3: Imagemap with DHTML (text outside image)</h2>
<p class="note">Place <b>mouse over</b> hot-spot to show text; move <b>mouse off</b> hot-spot to hide.</p>
<p class="note">Text and text color determined dynamically in event handler calls</p>
<div id="imageWrapper2">
<img src="http://www.daniweb.com/alphaimages/logo/logo.gif" useMap="#dhtmlTxt2" />
</div>
<div id="popUpTxtWrapper">- - - - -</div>
<map name="dhtmlTxt2">
<area shape="rect" coords="30,0,58,30" href="" onmouseover="this.blur(); return showTxt(1, 'D D D D D', '#800868')" onMouseOut="return showTxt(1, '')" onclick="this.blur(); return false">
<area shape="rect" coords="78,0,106,30" href="" onmouseover="this.blur(); return showTxt(2, 'N N N N N', '#800868')" onMouseOut="return showTxt(2, '')" onclick="this.blur(); return false">
<area shape="rect" coords="170,0,195,30" href="" onmouseover="this.blur(); return showTxt(3, 'B B B B B', '#F09000')" onMouseOut="return showTxt(3, '')" onclick="this.blur(); return false">
</map>
</div>
<p class="note">It shoud be fairly easy to mix and match methods 2 and 3 as necessary for the desired effect.</p>
<p class="sig">Airshow</p>
</body>
</html>
Unsolved 
Offline 
