AJAX

Simple Javascript Graphics

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Mar 2008

Posts: 31

Reputation: kinger29 is an unknown quantity at this point

Solved Threads: 1

kinger29

Offline

Light Poster

Simple Javascript Graphics

Apr 22nd, 2009

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!

•

Join Date: Dec 2004

Posts: 4,200

Reputation: peter_budo has much to be proud of

Solved Threads: 486

peter_budo peter_budo is online now

Online

Code tags enforcer

Re: Simple Javascript Graphics

-1

Apr 22nd, 2009

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

Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
LJC - London Java Community, Graduate & Undergraduate Software Development Community, JAVAWUG (Java Web User Group), The London Android Group

•

Join Date: Apr 2009

Posts: 856

Reputation: Airshow is on a distinguished road

Solved Threads: 122

Airshow

Offline

Practically a Posting Shark

Re: Simple Javascript Graphics

Apr 25th, 2009

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

•

Join Date: Apr 2009

Posts: 856

Reputation: Airshow is on a distinguished road

Solved Threads: 122

Airshow

Offline

Practically a Posting Shark

Re: Simple Javascript Graphics

Apr 26th, 2009

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.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!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>
<!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

•

Join Date: Jan 2009

Posts: 1,349

Reputation: almostbob has a spectacular aura about

Solved Threads: 163

almostbob

Offline

Nearly a Posting Virtuoso

Re: Simple Javascript Graphics

Apr 26th, 2009

W3 image map

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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>
<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>

Last edited by almostbob; Apr 26th, 2009 at 11:09 am.

Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved