JavaScipt Help!

Verim · #1 30-May-2005, 16:46

I need help with JavaScipt. My exercise is to create a HTML page which shows sectors of several images. If the user clicks on one of the images, it has to be shown completely on the same page. If the user clicks on the completely shown image, the original view should be shown again.

I have an example in which when you click on the image it displays information about that country.On basis of this I have to solve the problem...

Any idea how to begin???????? I will appreciate very much you help.

HTML Code:


<html><head><title>Northern Rocky Mountain States</title>
<script type="text/javascript" language="JavaScript" >
<!--
/* Arrays to hold info about the states. */
var statename = new Array("Wyoming","Idaho","Montana");
var capital = new Array("Cheyenne","Boise","Helena");
var population = new Array("455,975","1,011,986","803,655");
var admissionorder = new Array("44th","43rd","41st");
var admissionyear = new Array("1890","1890","1889");

/*Callout: Retrieves a name from the statename array and displays it in the facts field. */
function showStateName(index){
    document.rockies.facts.value = statename[index];
}
/*Callout: Retrieves information from all the arrays, adds label text and line breaks, and displays it all in the facts field. */
function showStateFacts(index){
    var justthefacts = statename[index] + "\n";
    justthefacts += "Population: " + population[index] + "\n";
    justthefacts += "Capital: " + capital[index] + "\n";
    justthefacts += "Entered the union in " + admissionyear[index];
    justthefacts += " as the " + admissionorder[index] + " state.";
    document.rockies.facts.value = justthefacts;
}
//-->
</script>
</head>
<body bgcolor="white">
<div align="CENTER">
<h2>Northern Rocky Mountain States</h2>
<p><b>Roll your mouse over the map to view state names.</b><br>
<b>Click the states to view the facts.</b></p>
<form name="rockies"><img src="images/rockymts.gif" width="135"
height="90" border="0" usemap="#RockiesMap"> 
<p><textarea name="facts" cols="50" rows="5"></textarea></p>
</form>
</div>
<map name="RockiesMap">
<!--Callout: The image map areas are defined by coordinates.-->
<area shape="POLY" coords="69,83,118,85,121,50,73,45" href=
"javascript:showStateFacts(0);" alt="Wyoming" title="Wyoming"
onmouseover="showStateName(0);">
<!--Callout: When the mouse rolls over a defined area, the onmouseover handler passes a number to the showStateName() function.-->
<area shape="POLY" coords="38,1,27,64,68,71,70,48,57,43,45,5" href=
"javascript:showStateFacts(1);" alt="Idaho" title="Idaho"
onmouseover="showStateName(1);">
<!--Callout: When the mouse is clicked on a defined area the href attribute sends a pseudo-URL that passes a number to the showStateFacts() function. -->
<area shape="POLY" coords="120,47,121,10,46,1,59,44" href=
"javascript:showStateFacts(2);" alt="Montana" title="Montana"
onmouseover="showStateName(2);">
</map>
</body>
</html>

aleppos · #2 03-Jun-2005, 16:01

hi,

i make to you this maybe help ....

HTML Code:

<html><head><title>Northern Rocky Mountain States</title>
<script type="text/javascript" language="JavaScript" >
<!--
/* Arrays to hold info about the states. */
var statename = new Array("Wyoming","Idaho","Montana");
var capital = new Array("Cheyenne","Boise","Helena");
var population = new Array("455,975","1,011,986","803,655");
var admissionorder = new Array("44th","43rd","41st");
var admissionyear = new Array("1890","1890","1889");

var sector = new Array("globe_gettingstarted.gif","globe_radio.gif","globe_search.gif");

/*Callout: Retrieves a name from the statename array and displays it in the facts field.

*/
function showStateName(index){
    document.rockies.facts.value = statename[index];
}
/*Callout: Retrieves information from all the arrays, adds label text and line breaks,

and displays it all in the facts field. */
function showStateFacts(index){
    var justthefacts = statename[index] + "n";
    justthefacts += "Population: " + population[index] + "n";
    justthefacts += "Capital: " + capital[index] + "n";
    justthefacts += "Entered the union in " + admissionyear[index];
    justthefacts += " as the " + admissionorder[index] + " state.";
    document.rockies.facts.value = justthefacts;
    
    document.rockies.image.src = sector[index];
    document.rockies.original.style.visibility = "hidden";
    document.rockies.image.style.visibility = "visible";
}

function showOriginal(){
    document.rockies.original.style.visibility = "visible";
    document.rockies.image.style.visibility = "hidden";
}

//-->
</script>
</head>
<body bgcolor="white">
<div align="CENTER">
<h2>Northern Rocky Mountain States</h2>
<p><b>Roll your mouse over the map to view state names.</b><br>
<b>Click the states to view the facts.</b></p>
<form name="rockies"><img src="globe_channels.gif" width="135"
height="90" border="0" usemap="#RockiesMap" name="original">
<img src="globe_channels.gif" width="135"
height="90" border="0" name="image" onclick="showOriginal();">
<p><textarea name="facts" cols="50" rows="5"></textarea></p>
</form>
</div>
<map name="RockiesMap">
<!--Callout: The image map areas are defined by coordinates.-->
<area shape="POLY" coords="69,83,118,85,121,50,73,45" href=
"javascript:showStateFacts(0);" alt="Wyoming" title="Wyoming"
onmouseover="showStateName(0);">
<!--Callout: When the mouse rolls over a defined area, the onmouseover handler

passes a number to the showStateName() function.-->
<area shape="POLY" coords="38,1,27,64,68,71,70,48,57,43,45,5" href=
"javascript:showStateFacts(1);" alt="Idaho" title="Idaho"
onmouseover="showStateName(1);">
<!--Callout: When the mouse is clicked on a defined area the href attribute sends a

pseudo-URL that passes a number to the showStateFacts() function. -->
<area shape="POLY" coords="120,47,121,10,46,1,59,44" href=
"javascript:showStateFacts(2);" alt="Montana" title="Montana"
onmouseover="showStateName(2);">
</map>
</body>
</html>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
using session variables	josemiguel	MySQL / PHP Forum	1	05-Jan-2005 01:39