JavaScript
[Geek Home] [PC Hints & Tips] [Internet] [Programming] [Nanet Sites]

Pick a BALLOON! Pick a BACKGROUND color!



 

To complete the above example, you will need these three .gif files:

Picture Picture Picture

Right click on each image to download it to your system. Do not link back to here.

Here is the source code:


<!-- JAVA SCRIPT --------------------------------------------->
<CENTER>
<FONT SIZE=3 FACE="Comic Sans MS, EnviroD">
<B>
Pick a BALLOON! Pick a BACKGROUND color!
</B>
</FONT>
<P>

<!-- The following uses Java script to change the page background color. -->
<TABLE BORDER = 0 BGCOLOR=WHITE CELLPADDING=0 CELLSPACING=0>
<TD ALIGN=CENTER BGCOLOR="red"></A><A HREF="" onmouseover="document.bgColor='red'; window.status='Red'; return true"><IMG SRC="cpik1.gif" BORDER=0></TD>
<TD ALIGN=CENTER BGCOLOR="yellow"></A><A HREF="" onmouseover="document.bgColor='yellow'; window.status='Yellow'; return true"><IMG SRC="cpik.gif" BORDER=0></TD>
<TD ALIGN=CENTER BGCOLOR="green"></A><A HREF="" onmouseover="document.bgColor='green'; window.status='Green'; return true"><IMG SRC="cpik.gif" BORDER=0></TD>
<TD ALIGN=CENTER BGCOLOR="magenta"></A><A HREF="" onmouseover="document.bgColor='magenta'; window.status='Magenta'; return true"><IMG SRC="cpik.gif" BORDER=0></TD>
<TD ALIGN=CENTER BGCOLOR="lightgrey"></A><A HREF="" onmouseover="document.bgColor='lightgrey'; window.status='Lightgrey'; return true"><IMG SRC="cpik.gif" BORDER=0></TD>
<TD ALIGN=CENTER BGCOLOR="cyan"></A><A HREF="" onmouseover="document.bgColor='cyan'; window.status='Cyan'; return true"><IMG SRC="cpik.gif" BORDER=0></TD>
<TD ALIGN=CENTER BGCOLOR="greem"></A><A HREF="" onmouseover="document.bgColor='greem'; window.status='Greem'; return true"><IMG SRC="cpik.gif" BORDER=0></TD>
<TD ALIGN=CENTER BGCOLOR="cream"></A><A HREF="" onmouseover="document.bgColor='cream'; window.status='Cream'; return true"><IMG SRC="cpik.gif" BORDER=0></TD>
<TD ALIGN=CENTER BGCOLOR="coral"></A><A HREF="" onmouseover="document.bgColor='coral'; window.status='Coral'; return true"><IMG SRC="cpik.gif" BORDER=0></TD>
<TD ALIGN=CENTER BGCOLOR="fusia"></A><A HREF="" onmouseover="document.bgColor='fusia'; window.status='Fusia'; return true"><IMG SRC="cpik.gif" BORDER=0></TD>
<TD ALIGN=CENTER BGCOLOR="white"></A><A HREF="" onmouseover="document.bgColor='white'; window.status='White'; return true"><IMG SRC="cpik2.gif" BORDER=0></TD>
</TD>
</TR>
</TABLE>
</CENTER>
<BR>
<BR>
<!-- END JAVA SCRIPT --------------------------------------------->

 

The above code uses the onmouseover with an image that contains a region that has been marked as transparent (the balloon). The image on the left could also be transparent, but since I’m using a red balloon there, I just left it red. The image on the right is for the white balloon. The middle image has the transparent balloon. The colors are filled in in the Javascript. Notice in the script above that I call the colorpick gif 1 at the front and 2 at the end.

You can create your own image, just make sure the image to be used in the middle has a transparent section. The end images were created so I could have a box border around the ends -- but I did not want boxes around the center images.

The result of this code is: when the user places the mouse over any image, the background color of the web page will change to the color selected. Try it out!

Picture
 Source  Java Code  C CGI  JavaScript  Java DBF  VAJava & DB2
[Geek Home] [PC Hints & Tips] [Internet] [Programming] [Nanet Sites]

Modified: 02/11/99

Picture