Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Regular Coder
    Join Date
    May 2007
    Posts
    118
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any suggestion? Please.

  • #6
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #8
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •