Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Programming
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Databases
Mail Systems
openSolaris
Eclipse Documentation
Techotopia.com
Virtuatopia.com
Answertopia.com

How To Guides
Virtualization
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Windows
Problem Solutions
Privacy Policy

  




 

 

Rollover Submit Image

HTML allows us to use images to create submit buttons for forms. Unfortunately, creating a rollover submit image can be a little more tricky. The technique described here allows you to create a rollover submit image using a script which does most of the work for you.

Suppose we want to use these two images to make a submit rollover. The first is the image which is displayed when the mouse is not over the image, the second when the mouse is over the image.

OK
submit.out.gif
OK
submit.over.gif

First, copy this script into your page. Copy as-is without changing anything:

<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999-2001 Idocs, Inc. https://www.idocs.com/tags/
// Distribute this script freely, but keep this 
// notice with the code.
var submitRolls = new Object();

function submitroll(src, oversrc, name)
{
this.src=src;
this.oversrc=oversrc;
this.name=name;
this.alt="Submit Query";
this.write=submitroll_write;
}

function submitroll_write()
{
var thisform = 'document.forms[' + (document.forms.length - 1) + ']';
submitRolls[this.name] = new Object();
submitRolls[this.name].over = new Image();
submitRolls[this.name].over.src = this.oversrc;
submitRolls[this.name].out = new Image();
submitRolls[this.name].out.src = this.src;

document.write
	(
	'<A onMouseOver="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].over.src"' + 
	' onMouseOut="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].out.src"' + 
	' HREF="javascript:'
	);

if (this.sendfield)
	{
	if (! this.sendvalue)
		this.sendvalue = 1;
	document.write(thisform, ".elements['", this.sendfield, "'].value='", this.sendvalue, "';");
	}

document.write(thisform + '.submit();void(0);"');
if (this.msg)document.write(' onClick="return confirm(\'' , this.msg, '\')"');
document.write('>');

document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '" BORDER=0 NAME="' + this.name + '"');
if (this.height)document.write(' HEIGHT=' + this.height);
if (this.width)document.write(' WIDTH='  + this.width);
if (this.otheratts)document.write(' ' + this.otheratts);
document.write('></A>');
if (this.sendfield)
	{
	document.write('<INPUT TYPE=HIDDEN NAME="' + this.sendfield + '">');
	document.forms[document.forms.length - 1].elements[this.sendfield].value='';
	}
}

//-->
</SCRIPT>

Next, create a form like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<FORM ACTION="../cgi-bin/mycgi.pl">
email: <INPUT NAME="email">

<SCRIPT TYPE="text/javascript">
<!--
var sr = new submitroll("submit.out.gif","submit.over.gif","mysubmit");
sr.write();
//-->
</SCRIPT>

<NOSCRIPT>
<INPUT TYPE=SUBMIT VALUE="Go!">
</NOSCRIPT>

</FORM>

which gives us this form:

email:
Most of the form is as normal. Where we would have put the submit button we put some JavaScript instead. Our script has only two commands.

The first command at line 6 creates a new submitroll() object and takes three parameters. The first parameter ("submit.out.gif") sets the source for the image which is displayed when the mouse is not over. The second parameter ("submit.over.gif") sets the source for the image which is displayed when the mouse is over. The last parameter ("mysubmit") gives the image a nickname which is used by the script.

The next command at line 7 writes out the HTML and JavaScript to create the image.

We follow the script with a short <NOSCRIPT> element for browsers which don't have JavaScript.

This technique covers all the bases, creating a rollover submit image without a lot of hassle. In the next page we'll discuss a few optional settings you can add to the script.

 
 
  Copyright 1997-2002 Idocs inc. Published under the terms of the Open Content License Design by Interspire