I want a box/frame/applet on my html webpage that will display an image and depending on where the user clicks i want text to popup/disappear somewhere else in the image. Does anyone know how to do this in javascript. Sorry Im new to web development and couldn't figure out how to do it in php. Thanks!
kinger29
0
Light Poster
Recommended Answers
Jump to PostThe above can be done through applet and no need for JavaScript. However if you insist on JavaScript solution of which I'm not sure can be done, then you are in wrong section (Java is not JavaScript) press Flag Bad Post option next to your original post and write "Please …
All 4 Replies
peter_budo
2,532
Code tags enforcer
Team Colleague
Featured Poster
The above can be done through applet and no need for JavaScript. However if you insist on JavaScript solution of which I'm not sure can be done, then you are in wrong section (Java is not JavaScript) press Flag Bad Post option next to your original post and write "Please move to JavaScript section".
Airshow
416
WiFi Lounge Lizard
Team Colleague
Kinger,
I'm away from home at the mo' and it's getting late. I'll post a DHTML solution a.s.a.p. It will employ HTML, CSS and JavaScript.
Airshow
Airshow
416
WiFi Lounge Lizard
Team Colleague
Kinger,
Here are three ways to do what you want using HTML and JavaScript, involving a mixture of mouseover and click events to cause text to be displayed.
Paste all the following code into a new text file - eg. test.html - then browse in your browser.
<!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>
Personally I would say that an Applet would be a sledgehammer-to-crack-a-nut but, there again, I am not an Applet person.
Airshow
almostbob
866
Retired: passive income ROCKS
<img src="image.jpg" width="145" height="126" alt="image" usemap="#map" />
<map name="map">
<area shape="rect" coords="0,0,82,126" href="1.htm" alt="1" onclick onmouseover onmouseout ondblclick />
<area shape="circle" coords="90,58,3" href="2.htm" alt="2" />
<area shape="circle" coords="124,58,8" href="3.htm" alt="3" />
</map>
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.