pagerunners.com html form rollovers

What we're doing here is using rollovers via a hyperlink. At the same time---using a quick form attribute---we can have text appear in a form box upon onMouseOver and onMouseOut. The key is using a semicolon to link the two attributes.

Stars

Movies

Source code:

<--Between the <head></head> tags-->
<script LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

<!-- Hide script from old browsers

if (document.images) {

arrowRed = new Image

arrowBlue = new Image

arrowGreen = new Image

arrowRed.src = "stars.jpg"

arrowBlue.src = "video.jpg"

arrowGreen.src= "movies.jpg"

}

else {

arrowRed = ""

arrowBlue = ""

arrowGreen = ""

document.arrow = ""

}

// End hiding script from old browsers -->

</SCRIPT>

<table border=0 cellpadding=4 cellspacing=3>
<tr>
<td>
<a HREF="index.htm" onMouseover="document.arrow.src=arrowRed.src;theForm.out.value='Shoot for the stars'" onMouseout="document.arrow.src=arrowBlue.src;theForm.out.value=''"><font face="Verdana, Arial, Helvetica" size="4" color="#660000"><b>Stars</b></font></a>

<p>
<a HREF="index.htm" onMouseover="document.arrow.src=arrowGreen.src;theForm.out.value='Go watch a movie tonight'" onMouseout="document.arrow.src=arrowBlue.src;theForm.out.value=''"><font face="Verdana, Arial, Helvetica" size="4" color="#660000"><b>Movies</b></font></a></td>
<td>
<img SRC="video.jpg" WIDTH="204" HEIGHT="150" NAME="arrow">
</td></tr>
</table>
</CENTER>
</P>
<p ALIGN="center">
<form name="theForm">
<input type="text" name="out" size="30">
</form></p>

Imagework Examples:

	"popping" out at the beach

	ah, natural blonde highlights

	making that special one stand out