Welcome to WebmasterWorld Guest from

Forum Moderators: keyplyr & mack

Message Too Old, No Replies

Java Script newbie question

not really getting this.

3:00 pm on Dec 12, 2002 (gmt 0)

Full Member

10+ Year Member

joined:Aug 12, 2002
votes: 0

Below is an example piece of coding -

This coding creates three images that one you move the mouse over they change to a new image and also open another image elsewhere on the page.

This works fine but I decided to add a fourth image but can not get anywhere! even just adding dinoText = new Image in the first bit of script causes things to stop working.

How do I get this to work and why's it so damn hard? I heard JavaScript was not that much harder to learn than HTML and CSS but it is proving impossible to adapt/change code I have.

<TITLE>An example Rollover</TITLE>
<!-- Hide script from old browsers

if (document.images) {
flyText = new Image
tankText = new Image
bgText = new Image
heliText = new Image

flyText.src = "images/fmText.gif"
tankText.src = "images/tankText.gif"
bgText.src = "images/bg.gif"
heliText.src = "images/heliText.gif"

flyOff = new Image
tankOff = new Image
heliOff = new Image
flyOn = new Image
tankOn = new Image
heliOn = new Image

flyOff.src = "images/flyer.gif"
tankOff.src = "images/tanks.gif"
heliOff.src = "images/helicopter.gif"
flyOn.src = "images/flyer2.gif"
tankOn.src = "images/tanks2.gif"
heliOn.src = "images/helicopter2.gif"

function chgImg(imgField,newImg) {
if (document.images) {
document[imgField].src= eval(newImg + ".src")

// End hiding script from old browsers -->
<IMG SRC="images/leoText.gif" WIDTH=375 HEIGHT=26><BR>
<A HREF="flyPage.html" onMouseover="chgImg('flyImg','flyOn');chgImg('textField','flyText')" onMouseout="chgImg('flyImg','flyOff');chgImg('textField','bgText')"><IMG SRC="images/flyer.gif" WIDTH=293 HEIGHT=165 BORDER=0 VSPACE=20 NAME="flyImg"></A><BR>
<A HREF="tankPage.html" onMouseover="chgImg('tankImg','tankOn');chgImg('textField','tankText')" onMouseout="chgImg('tankImg','tankOff');chgImg('textField','bgText')"><IMG SRC="images/tanks.gif" WIDTH=325 HEIGHT=92 BORDER=0 NAME="tankImg"></A><BR>
<A HREF="heliPage.html" onMouseover="chgImg('heliImg','heliOn');chgImg('textField','heliText')" onMouseout="chgImg('heliImg','heliOff');chgImg('textField','bgText')"><IMG SRC="images/helicopter.gif" WIDTH=224 HEIGHT=160 BORDER=0 VSPACE=20 NAME="heliImg"></A>
<IMG SRC="images/DaVinci.jpg" WIDTH=144 HEIGHT=219 HSPACE=50><BR>
<IMG SRC="images/bg.gif" WIDTH=208 HEIGHT=27 NAME="textField" VSPACE=20>

3:14 pm on Dec 12, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
votes: 0

The first thing that I notice is the absence of semi-colon's after every arguement.

eg: tankText = new Image;

Are you specifying the dinoText.src as well as just making the new Image call?

dinoText = new Image;
dinoText.src = "images/dinoText.gif"

4:25 pm on Dec 12, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member txbakers is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Sept 1, 2001
votes: 0

basically javascript is pretty easy. The code you copied from somewhere is WAY TOO complex for what you are trying to do.

A rollover effect can be written in about 3 lines of code if you plan it correctly.

Do a search of this forum for "effective rollovers" and you'll find a plethora of examples.

A good tutorial and reference on javascript can be found at www.w3schools.com