guestbook

sign or view my guestbook


Contact Us

















--------------

Welcome to Freetools.gr

Javascript --> Εικόνα αντί για κουμπί στις φόρμες σας.
Posted by adgram on Μάρτιος 5, 2007, 05:50μμ
Αλλάξτε του κουμπί μιας φόρμας με μια εικόνα και  αλλάξτε αυτήν την εικόνα όταν το ποντίκι περνάει από πάνω.
Παράδειγμα 1
Εδώ βλέπετε μια φόρμα με το κλασικό κουμπί.
Αν παρατηρήσετε  τον κώδικα θα δείτε ότι αν πατηθεί το κουμπί θα μας στείλει στο
freetools.gr.
<form name="form1" method="POST" action="www.freetools.gr" target="_blank">
<input type="text" name="text1" size="20"><br>
<input type="submit" value="go"  >
Βλέπετε ότι η τιμή στην ιδιότητα target της φόρμας είναι "_blank", αυτό σημαίνει ότι η σελίδα που σας στέλνει  η φόρμα θα ανοίξει σε άλλο παράθυρο.


Παράδειγμα 2
Για να αλλάξουμε το κουμπί της φόρμας με την εικόνα αλλάζουμε την γραμμή 3 της προηγούμενης φόρμας όπως βλέπετε παρακάτω.
<form name="form2" method="POST" action="http://www.freetools.gr" target="_blank">
<input type="text" name="text1" size="20"><br>
<input type="image" src="images/arrow.gif"  >


Παράδειγμα 3
Αν θέλετε τώρα να αλλάζει η εικόνα όταν το ποντίκι περνάει από πάνω πρέπει να χρησιμοποιήσουμε το συμβάν
onMouseOver.
Όμως η εικόνα δεν υποστηρίζει αυτό το συμβάν, έτσι χρειάζεται να συμπεριλάβουμε την εικόνα με το
bookmark <A> για να της ορίσουμε  το Mouse Over (γραμμή 4).
<form name="form3" method="POST" >
<input type="text" name="text1" size="20"><br>
<A href="#" onMouseOver="return changeImage()" >
<img name="jsbutton" src="images/arrow.gif" border="0"
alt="javascript button"></A> </form>
Εχουμε ορίσει το συμβάν onMouseOver να οδηγεί στην συνάρτηση changeImage() η οποία είναι η παρακάτω.
<SCRIPT language="JavaScript">
function changeImage()
{
document.images["jsbutton"].src= "images/arrowback.gif";
return true;
}
</SCRIPT>
Έτσι στην παρακάτω φόρμα όταν περάσετε το ποντίκι  πάνω από το κουμπί θα αλλάξει η εικόνα.


javascript button

Παράδειγμα 4
Όπως βλέπετε όμως στο προηγούμενο παράδειγμα η εικόνα αλλάζει αλλά δεν επανέρχεται όταν φεύγει το ποντίκι από πάνω . Για να αλλάξουμε την εικόνα πρέπει να προσθέσουμε και  το συμβάν
onMouseOut (γραμμή 4).
<form name="form4" method="POST" >
<input type="text" name="text1" size="20"><br>
<A href="#" onMouseOver="return changeImage2()" onMouseOut= "return changeImageBack()" >
<img name="jsbutton2" src="images/arrow.gif" border="0" alt="javascript button"></A></form>
Προσθέτουμε και την συνάρτηση για το onMouseOut
<SCRIPT language="JavaScript">
function changeImage2()
{
document.images["jsbutton2"].src= "images/arrowback.gif";
return true;
}
function changeImageBack()
{
document.images["jsbutton2"].src = "images/arrow.gif";
return true;
}
</SCRIPT>

Και το τελικό αποτέλεσμα το βλέπετε παρακάτω.


javascript button

Στείλτε τα σχόλια σας για το παραπάνω άρθρο 7731

Σχόλια για το παραπάνω άρθρο 0
 
Welcome Guest


Εγγραφή στην mailing list
mail list
(ανανεώσεις, καινούργιες υπηρεσίες κλπ)


woodworking.gr

FreeStuff . GR

FORa.GR-YPOSTHRI$H

Copyright 2000-2007 Freetools.gr