Forum Moderators: mack
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>
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"
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
