The code is mostly correct. 2 small issues causing the problem though.
You need a semicolon after this line to show that it is the end of the expression/statement.
PHP Code:
document.getElementById("desc").innerHTML=txt
You have line breaks in the area tag invalidating the function call. I.e.
PHP Code:
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was
often considered a twin sister to the Earth because
Venus is the nearest planet to us, and because the
two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
should be.
PHP Code:
<area shape ="circle" coords ="124,58,8" onMouseOver="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')" href ="venus.htm" target ="_blank" alt="Venus" />
</map>
Leading to the corrected code:
PHP Code:
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById('desc').innerHTML=txt;
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126" onMouseOver="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')" href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3" onMouseOver="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')" href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8" onMouseOver="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')" href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
You may also want to consider keeping the text in an array and keeping it inside the function, considering that you are not using the function for multiple purposes.
For example:
PHP Code:
<script type="text/javascript">
function writeText(id)
{
var planetText = new Array()
planetText[0] = "The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System";
planetText[1] = "The planet Mercury...";
planetText[2] = "Until the 1960.....";
document.getElementById('desc').innerHTML=planetText[id];
}
</script>
Then the html would be:
PHP Code:
<area shape ="rect" coords ="0,0,82,126" onMouseOver="writeText(0)" href ="sun.htm" target ="_blank" alt="Sun" />
HTH