WEB DESIGN GARAGE [Electronic resources] نسخه متنی

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

Working with Image Fields

An image field is a graphical replacement for a standard HTML submit button. The image field is clickable, and it works exactly like a submit button in that clicking it sends the form data to the Web server. The advantage to replacing a submit button with an image field is that you get to use whatever image file you like to submit the form, as in Figure 68.5. You don't have to accept the standard and generally ugly button widget that comes with your browser.

Listing 68.5. View Source for Figure 68.5.


<form>
<input type="image" name="goButton" src="/image/library/english/10077_go.gif" 
width="20" height="20">
</form>

Figure 68.5. Use an image field in place of a standard submit button.

[View full size image]

The src attribute contains the path to the image field's graphic file, and the width and height attributes supply the width and height of the image, just as in the img tag.

Replacing a Reset Button

Image fields always submit form data. There's no way to change an image field so that it functions as a reset button, for example. But don't let that stop you. Just use a regular image tag. Drop anchor tags around the image to make it clickable, and then add a simple JavaScript function to duplicate the reset behavior. Here's the complete script, plus a sample link:

[View full width]
<head>
<script language="JavaScript">
function doReset() {
document.formname.reset();
/* Replace formname with the value of the form tag's name attribute. */
}
</script>
</head>
<!-- The body of the page follows. -->
<body>
<a href="><img src="/image/library/english/10077_reset.gif" width="60" height="40"
  ></a>
</body>

Replacing a Generic Button

Along the same lines, you can use an image to launch a JavaScript function and replace the generic button widget. Try something like this:

[View full width]
<head>
<script language="JavaScript">
function 

yourFunction()yourFunction();"><img src="/image/library/english/10077_button.gif" width="60" height="40"
  ></a>
</body>

WEB DESIGN GARAGE [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی