JavaScript image

tail_gunner · #1 05-26-2007, 11:37 PM

ok was looking to turn this js into where you can click the whole image and it opens in a new window and roll over the whole image and it displays the text. But i have no real experince with js could some1 help me out (this is the example for w3schools

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>

Capers · #2 05-27-2007, 09:20 AM

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

tail_gunner · #3 05-27-2007, 11:05 AM

Thanks Capers works perfectly!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Javascript BBCode insertion	Lakie	Web design and Programming	5	01-05-2007 03:27 AM
JavaScript Help!	Webviper2006	Web design and Programming	9	02-05-2006 12:56 AM
javascript	King	Web design and Programming	3	01-03-2005 11:35 AM
New Image	BlackMass	Sigs and Graphics	13	11-15-2004 10:58 AM
Help with javascript	Acid	Web design and Programming	5	10-28-2003 07:30 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)