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!

7 Years
Discussion Span
Last Post by almostbob

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



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.




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">
<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; }

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

<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" />
	<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">

<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>
	<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)">

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

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


Personally I would say that an Applet would be a sledgehammer-to-crack-a-nut but, there again, I am not an Applet person.



W3 image map

<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" />
This article has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.