Jump to content

Javascript help

Guest Maugan Ra

Recommended Posts

Guest Maugan Ra

Hi. I'm new to Javascript, and I was wondering if someone could help me out here.I have this HTML code that I wrote for a website:

<img src="images/ofclogo.gif" usemap="#OFCMain" alt="Logo" border="0"  /><map id="OFCMain" name="OFCMain" ><area shape="rect" coords="0,0,199,479" href="/forum" target="blank" alt="Forum" /><area shape="rect" coords="199,0,394,479" href="/gallery" target="blank" alt="gallery" /></map>

What I want to do, is get it to fade to a different picture, depending on which area the mouse is over. Is there any way to do this?Thanks.Maugan Ra.

Link to post
Share on other sites

Here's a basic example to keep you going:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html><head><!--- This is for rangana's test, feel free to remove this part -----><base href="http://www.w3schools.com/TAGS/"><!--************************End of rangana's test***********--><title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><script type="text/javascript">window.onload=function(){	var myid=document.getElementById('myid'); //replace the value inside the quotes with your desired id then	var defaultimg='planets.gif' // replace this with your default image.	var areas=document.getElementsByTagName('area');		//This is for your first area	areas[0].onmouseover=function()	{	myid.src='http://www.aerospaceguide.net/solar_system/our_sun.gif';	}	//This is for your second area	areas[1].onmouseover=function()	{	myid.src='http://pds.jpl.nasa.gov/planets/images/browse/mercury/mercury1.jpg';	}	//This is for your third area	areas[2].onmouseover=function()	{	myid.src='http://www.adlerplanetarium.org/cyberspace/planets/venus/images/venus_magellan.jpg';	}		/*****************************Script by rangana**********************	* Feel free to remove this part if you don't want to see the onmouseout function */		for(var i=0;i<areas.length;i++)		{		areas[i].onmouseout=function()			{myid.src=defaultimg;}		}				/******************************************************************/}</script><p>Click on the sun or on one of the planets to watch it closer:</p><img src="planets.gif" width="145" height="126"alt="Planets" usemap="#planetmap" id="myid"/><map id="planetmap" name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun"href="sun.htm" /><area shape="circle" coords="90,58,3" alt="Mercury"href="mercur.htm" /><area shape="circle" coords="124,58,8" alt="Venus"href="venus.htm" /></map><p><b>Note:</b> The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in the map element, therefore we have added both the "id" and "name" attributes to the map element.</p></body></html>

Hope it helps.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...