...

View Full Version : Change Image By Clicking



jiapei_jen
05-14-2007, 12:40 AM
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.

smalldog
05-14-2007, 01:13 AM
You can use images with display:none style and certain coordinates and when user hits some continent set display:block for certain image.

jiapei_jen
05-14-2007, 01:11 PM
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
05-14-2007, 06:45 PM
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:


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



<!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
05-15-2007, 05:57 PM
Any suggestion? Please.

ambisinistral
05-15-2007, 06:19 PM
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.

riptide
05-15-2007, 06:22 PM
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

arachnid
05-23-2007, 08:46 PM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum