homepage Welcome to WebmasterWorld Guest from 23.23.57.144
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

    
Java Script newbie question
not really getting this.
Dino_M

10+ Year Member



 
Msg#: 210 posted 3:00 pm on Dec 12, 2002 (gmt 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.

<HTML>
<HEAD>
<TITLE>An example Rollover</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!-- 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 -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#EECC99">
<TABLE>
<TR VALIGN=TOP>
<TD>
<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>
</TD>
<TD>
<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>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

BlobFisk

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



 
Msg#: 210 posted 3:14 pm on Dec 12, 2002 (gmt 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"

txbakers

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



 
Msg#: 210 posted 4:25 pm on Dec 12, 2002 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved