Go Back   CodingForums.com > :: Client side development > JavaScript programming
Reload this Page Change Image By Clicking

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-14-2007, 12:40 AM   PM User | #1
jiapei_jen
New Coder

 
Join Date: Mar 2005
Posts: 82
Thanks: 0
Thanked 0 Times in 0 Posts
jiapei_jen is an unknown quantity at this point
Change Image By Clicking
The world map (an image map) that I have shows three continents; namely, America, Asia, and Europe. They are in yellow color. This world map is placed in a HTML file.

Every continent is clickable. By clicking on a continent; say, America, I pop up a window in which some information America is displayed.

And when a continent is active, its color on the map is changed to orange color. Therefore, I have made three more image maps: America is in orange color, Asia is in orange color, and Europe is in orange color.

How do I switch image (i.e. showing the orange color of the continent) after a certain continent is clicked by users?

Thanks for your time and help.
jiapei_jen is offline   Reply With Quote
Old 05-14-2007, 01:13 AM   PM User | #2
smalldog
Regular Coder

 
Join Date: May 2007
Posts: 118
Thanks: 0
Thanked 0 Times in 0 Posts
smalldog is an unknown quantity at this point
You can use images with display:none style and certain coordinates and when user hits some continent set display:block for certain image.
__________________
Forum for webmasters and developers
http://www.htmlfrenzy.com
Are you an IT expert? Join our Reward system
www.htmlfrenzy.com/reward-system.php
smalldog is offline   Reply With Quote
Old 05-14-2007, 01:11 PM   PM User | #3
jiapei_jen
New Coder

 
Join Date: Mar 2005
Posts: 82
Thanks: 0
Thanked 0 Times in 0 Posts
jiapei_jen is an unknown quantity at this point
Huh?

Thanks for your reply; but, I still have no idea about what to do.

I have made four image maps. I plan to switch maps upon clicks.
jiapei_jen is offline   Reply With Quote
Old 05-14-2007, 06:45 PM   PM User | #4
jiapei_jen
New Coder

 
Join Date: Mar 2005
Posts: 82
Thanks: 0
Thanked 0 Times in 0 Posts
jiapei_jen is an unknown quantity at this point
The code I have can "either" change image "or" pop up child window depending on the url that I supply to the HREF attribute. The code shown below can pop up windows. And if I modify the code to:
Code:
<map name="imap_Map">
<area shape="rect" alt="Event" coords="312,94,457,191" href="finin030_event.html">
I can switch and display another map "finin030_event.html", in which the "event" is highlighted (i.e. it is in another color.)

I cannot do both (change image and popup child window). Please help me with suggestions.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<SCRIPT TYPE="text/javascript">
		<!--
		function popup( url, windowname )
		{
			if ( !window.focus )return true;
			var href;
			if ( typeof( url ) == 'string' )
			   href = url;
			else
			   href = url.href;
			window.open( href, windowname, 'width=1024,height=768,scrollbars=no' );
			return false;
		}
		//-->
	</SCRIPT>
	<title></title>
</head>
<body class="bodyDefault" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" align="center">
	<tr>
		<td>
			<table align="center">
				<tr>
					<td>
						<IMG SRC="../../images/imap.gif" width="763" height="336" border="0" alt="" usemap="#imap_Map">
						<map name="imap_Map">
							<area shape="rect" alt="Event" coords="312,94,457,191" href="../popupInput/event.html" onClick="return popup(this, 'event')">
							<area shape="rect" alt="Subjects" coords="64,242,147,308" href="../popupInput/subjects.html" onClick="return popup(this, 'subjects')">
							<area shape="rect" alt="Property" coords="203,242,286,308" href="../popupInput/property.html" onClick="return popup(this, 'property')">
							<area shape="rect" alt="Offenses" coords="341,242,424,308" href="../popupInput/offenses.html" onClick="return popup(this, 'offenses')">
							<area shape="rect" alt="Addresses" coords="480,242,563,308" href="../popupInput/addresses.html" onClick="return popup(this, 'addresses')">
							<area shape="rect" alt="Narratives" coords="619,242,702,308" href="../popupInput/narratives.html" onClick="return popup(this, 'narrativeList')">
							<area shape="rect" alt="Linked Events" coords="60,115,198,181" href="../popupInput/linkedEvents.html" onClick="return popup(this, 'linkedEvents')">
							<area shape="rect" alt="Assisting Agencies" coords="562,115,700,181" href="../popupInput/assistingAgencies.html" onClick="return popup(this, 'assistingAgencies')">
						</map>						
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</body>
</html>
jiapei_jen is offline   Reply With Quote
Old 05-15-2007, 05:57 PM   PM User | #5
jiapei_jen
New Coder

 
Join Date: Mar 2005
Posts: 82
Thanks: 0
Thanked 0 Times in 0 Posts
jiapei_jen is an unknown quantity at this point
Any suggestion? Please.
jiapei_jen is offline   Reply With Quote
Old 05-15-2007, 06:19 PM   PM User | #6
ambisinistral
New to the CF scene

 
Join Date: May 2007
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
ambisinistral is an unknown quantity at this point
ID your image to something like "continents". Then in your code:

temp_img=getElementById("continents");
temp_img.setAttribute("src","path");

where path=the path to the image you want to switch in.
ambisinistral is offline   Reply With Quote
Old 05-15-2007, 06:22 PM   PM User | #7
riptide
Regular Coder

 
riptide's Avatar
 
Join Date: Jan 2007
Posts: 143
Thanks: 1
Thanked 0 Times in 0 Posts
riptide is an unknown quantity at this point
maybe you should wrap it in an a tag

and visited orange image
and alink yellow image

or yellow image onclick= orange display"block" and orange has a higher z-index
riptide is offline   Reply With Quote
Old 05-23-2007, 08:46 PM   PM User | #8
arachnid
New to the CF scene

 
Join Date: May 2007
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
arachnid is an unknown quantity at this point
I think this is what u r looking for? note i had to introduce onmouseover function before this would work, so dont remove this.

also i only did the first two retangle hotspots only. its just a matter of entering the extra code to other hotspots, and adjust also the image links as i amended them to link to a map image on my pc.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<SCRIPT TYPE="text/javascript">
<!--
function popup( url, windowname )
{
if ( !window.focus )return true;
var href;
if ( typeof( url ) == 'string' )
href = url;
else
href = url.href;
window.open( href, windowname, 'width=800,height=600,scrollbars=no' );
return false;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>
<title></title>
</head>
<body class="bodyDefault" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" align="center">
<tr>
<td>
<table align="center">
<tr>
<td>
<IMG SRC="../mediaTaran/politf.gif" alt="" name="Image1" width="763" height="336" border="0" usemap="#imap_Map" id="Image1">
<map name="imap_Map">
<area shape="rect" coords="312,94,457,191" href="event.html" alt="Event" onClick="return popup(this, 'event');MM_swapImage('Image1','','../mediaTaran/politfSA.gif',0)" onMouseOver="MM_swapImage('Image1','','../mediaTaran/politfSA.gif',0)">
<area shape="rect" alt="Subjects" coords="64,242,147,308" href="../popupInput/subjects.html" onClick="return popup(this, 'subjects')">
<area shape="rect" alt="Property" coords="203,242,286,308" href="../popupInput/property.html" onClick="return popup(this, 'property')">
<area shape="rect" alt="Offenses" coords="341,242,424,308" href="../popupInput/offenses.html" onClick="return popup(this, 'offenses')">
<area shape="rect" alt="Addresses" coords="480,242,563,308" href="../popupInput/addresses.html" onClick="return popup(this, 'addresses')">
<area shape="rect" alt="Narratives" coords="619,242,702,308" href="../popupInput/narratives.html" onClick="return popup(this, 'narrativeList')">
<area shape="rect" coords="60,115,198,181" href="linkedEvents.html" alt="Linked Events" onClick="return popup(this, 'linkedEvents');MM_swapImage('Image1','','../mediaTaran/politfNA.gif',0)" onMouseOver="MM_swapImage('Image1','','../mediaTaran/politfNA.gif',0)">
<area shape="rect" alt="Assisting Agencies" coords="562,115,700,181" href="/assistingAgencies.html" onClick="return popup(this, 'assistingAgencies')">
</map>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
arachnid is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 06:33 AM.
Advertisement
Log in to turn off these ads.