ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ
Η DHTML (Dynamic HTML)
Η
DHTML
είναι η τέχνη τού να κάνουμε τις
HTML
σελίδες δυναμικές χρησιμοποιώντας
scripting
για να μπορέσουμε να
χειριστούμε το στυλ (style),
τη διάταξη (layout)
και τα περιεχόμενα (contents)
ενός εγγράφου.
Εισαγωγή στην DHTML
Η DHTML (Dynamic HTML), δηλ. Δυναμική HTML, δεν αποτελεί ένα στάνταρτ (πρότυπο) που έχει ορισθεί από το World Wide Web Consortium (W3C) ούτε μια καινούργια γλώσσα προγραμματισμού ή μορφοποίησης. Σημαίνει απλά έναν συνδυασμό της HTML 4.0, των Φύλλων Στυλ (Style Sheets) και της σεναρίων (scripts) της JavaScript και της VBScript και που δίνει τη δυνατότητα στα έγγραφα να περιέχουν κίνηση (animation) και άλλα εντυπωσιακά εφέ.
Τα Στοιχεία της DHTML
HTML 4.0, η HTML 4.0 εισήγαγε δύο σημαντικά πράγματα : τα Διαδοχικά Φύλλα Στυλ (Cascading Style Sheets, CSS) και το Μοντέλο Αντικειμένου Εγγράφου (Document Object Model, DOM). Η δημιουργία δυναμικών HTML εγγράφων δεν θα ήταν δυνατή χωρίς αυτές τις δύο προσθήκες.
Cascading Style Sheets (CSS), με τα CSS αποκτήσαμε ένα μοντέλο στυλ (style) και διάταξης (layout) για τα HTML έγγραφα. Η δημιουργία δυναμικών HTML εγγράφων δεν θα ήταν δυνατή χωρίς τα CSS.
Document Object Model (DOM), με το DOM αποκτήσαμε ένα μοντέλο περιεχομένου εγγράφου για τα HTML έγγραφα. Η δημιουργία δυναμικών HTML εγγράφων δεν θα ήταν δυνατή χωρίς το DOM.
JavaScript (και VBScript), με την HTML 4.0, τα CSS και το DOM έγιναν διαθέσιμα για συγγραφή (scripting). Η δημιουργία δυναμικών HTML εγγράφων δεν θα ήταν δυνατή χωρίς τη δυνατότητα να αλλάζουμε το στυλ, τη διάταξη και το περιεχόμενο των HTML εγγράφων μέσω των scripts.
Τα Cascading Style Sheets (Φύλλα Στυλ) της DHTML
Η HTML 4.0 εισήγαγε τα CSS, τα οποία μας έδωσαν ένα μοντέλο στυλ (style) και διάταξης (layout) για την HTML. Με τα CSS, τα στοιχεία της HTML μπορούν να αποκτήσουν χρώμα, φόντο, περιγράμματα, ακριβή θέση και ορατότητα.
Position:relative - Πώς να τοποθετήσουμε ένα στοιχείο σε σχέση με την κανονική του θέση
<html>
<head>
<style>
h1.ex1
{
position:relative;
left:20;
}
h1.ex2
{
position:relative;
left:-20;
}
</style>
</head>
<body>
<h1> Normal Heading </h1>
<h1 class="ex1"> Heading +20 </h1>
<h1 class="ex2"> Heading –20 </h1>
<p> Η σχετική τοποθέτηση μετακινεί ένα στοιχείο σε σχέση με την αρχική του θέση </p>
<p> το "left:20" προσθέτει 20 pixels στην αριστερή θέση του στοιχείου </p>
<p> το "left:-20" αφαιρεί 20 pixels από την αριστερή θέση του στοιχείου </p>
</body>
</html>
Position:absolute - Πώς να τοποθετήσουμε ένα στοιχείο χρησιμοποιώντας απόλυτη τιμή
<html>
<head>
<style>
h1.x
{
position:absolute;
left:100;
top:150;
}
</style>
</head>
<body>
<h1 class="x"> This is a heading </h1>
<p> Με την απόλυτη τοποθέτηση, μπορούμε να τοποθετήσουμε ένα στοιχείο οπουδήποτε σε μια σελίδα
</p>
<p> Η αριστερή θέση της επικεφαλίδας είναι 100 pixels από το
αριστερό μέρος της σελίδας και η θέση κορυφής είναι
150 pixels από την κορυφή της σελίδας </p>
</body>
</html>
Visibility - Πώς να κάνουμε ένα στοιχείο αόρατο
<html>
<head>
<style>
h1.one
{
visibility:visible;
}
h1.two
{
visibility:hidden;
}
</style>
</head>
<body>
<h1 class="one"> Heading one </h1>
<h1 class="two"> Heading two </h1>
<p> Πού βρίσκεται η επικεφαλίδα 2; </p>
</body>
</html>
Z-index - Το Z-index μπορεί να χρησιμοποιηθεί για να τοποθετήσουμε ένα στοιχείο πίσω από ένα άλλο στοιχείο με την ιδιότητα Z-index
<html>
<head>
<style>
img.x
{
position:absolute;
left:0;
top:0;
z-index:-1;
}
</style>
</head>
<body>
<h1> This is a Heading </h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p> Το default z-index είναι 0. Το z-index –1 έχει χαμηλότερη προτεραιότητα </p>
</body>
</html>
Filters - Πώς να αλλάξουμε το στυλ των επικεφαλίδων (headings) χρησιμοποιώντας την ιδιότητα filter
<html>
<head>
<style>
h2
{
width:100%;
}
</style>
</head>
<body>
<h2 style="filter:glow()"> Glow </h2>
<h2 style="filter:blur()"> Blur </h2>
<h2 style="filter:fliph()"> Flip H </h2>
<h2 style="filter:flipv()"> Flip V </h2>
<h2 style="filter:shadow()"> Shadow </h2>
<h2 style="filter:dropshadow()"> Drop Shadow </h2>
<h2 style="filter:wave(Strength=2)"> Wave </h2>
<p> Τα φίλτρα δεν δουλεύουν αν δεν έχει ορισθεί η ιδιότητα width του στοιχείου </p>
</body>
</html>
Watermark - Μια εικόνα φόντου που δεν μετακινείται όταν κυλάει το υπόλοιπο της σελίδας
<html>
<head>
<style>
body
{
background-attachment: fixed;
background-image: url("bulboff.gif");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p> Κυλήστε τη σελίδα και δείτε τι συμβαίνει </p>
<br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Η Ιδιότητα Position
Η ιδιότητα position μάς δίνει τη δυνατότητα να τοποθετήσουμε τα στοιχεία οπουδήποτε στο έγγραφο.
position:relative
Αυτή η ιδιότητα τοποθετεί ένα στοιχείο σε σχέση με την τρέχουσα θέση του.
H1
{
position:relative;
left:10;
}
Το παραπάνω παράδειγμα τοποθετεί την επικεφαλίδα 10 pixels στα δεξιά από την κανονική της θέση.
position:absolute
Αυτή η ιδιότητα τοποθετεί το στοιχείο σε σχέση με τα περιθώρια (margins) του παραθύρου.
H1
{
position:absolute;
left:10;
}
Το παραπάνω παράδειγμα τοποθετεί την επικεφαλίδα 10 pixels στα δεξιά από το αριστερό περιθώριο.
Η Ιδιότητα Visibility
Η ιδιότητα visibility καθορίζει αν ένα στοιχείο είναι ορατό ή όχι.
visibility:visible
Αυτή η ιδιότητα κάνει το στοιχείο ορατό.
H1
{
visibility:visible;
}
visibility:hidden
Αυτή η ιδιότητα κάνει το στοιχείο αόρατο.
H1
{
visibility:hidden;
}
Η Ιδιότητα Z-index
Η ιδιότητα z-index καθορίζει τη σειρά τοποθέτησης των στοιχείων.
H1
{
z-index:1;
}
H2
{
z-index:2;
}
Το στοιχείο H1 τοποθετείται πριν από το στοιχείο H2, έτσι αν αυτά τα δύο στοιχεία τύχει να τοποθετηθούν το ένα πάνω απ’ το άλλο, το στοιχείο H2 θα τοποθετηθεί πάνω από το στοιχείο H1.
Η Ιδιότητα Filters
Ο Internet Explorer 4.0 εισήγαγε την ιδιότητα filter στα CSS, η οποία μας δίνει τη δυνατότητα να προσθέσουμε εφέ στυλ (style effects) στο κείμενο και στις εικόνες μας.
H1
{
width:100%;
filter:glow;
}
Το στοιχείο στο οποίο θέλουμε να προσθέσουμε ένα φίλτρο, πρέπει να έχει ένα καθορισμένο πλάτος (width). Υπάρχουν πολλές τιμές στην ιδιότητα filter και το παραπάνω παράδειγμα έδειξε την τιμή glow, η οποία παράγει την εξής έξοδο :
Η Ιδιότητα Background
Η ιδιότητα background μάς δίνει τη δυνατότητα να επιλέξουμε το δικό μας φόντο, σ’ οποιοδήποτε στυλ.
background-attachment:scroll
Το φόντο κυλάει μαζί με το υπόλοιπο της σελίδας.
background-attachment:fixed
Το φόντο δεν μετακινείται όταν κυλάει το υπόλοιπο της σελίδας.
Τα Χειριστήρια Συμβάντων της DHTML
onmouseover & onmouseout - Πώς να αλλάξουμε το χρώμα ενός στοιχείου όταν ο δρομέας βρίσκεται πάνω (over) και έξω (out) από ένα στοιχείο
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Μετακινείστε το ποντίκι πάνω απ’ αυτό το κείμενο
</h1>
</body>
</html>
onclick - Ανάψτε το φως! Πώς μπορούμε να αλλάξουμε μια εικόνα όταν κάνουμε κλικ πάνω της και να εμφανίσουμε ξανά την αρχική εικόνα όταν κάνουμε πάλι κλικ πάνω της
<html>
<head>
<script language="JavaScript">
cc=0
function changeimage()
{
if (cc==0)
{
cc=1
myimage.src="bulbon.gif"
}
else
{
cc=0
myimage.src="bulboff.gif"
}
}
</script>
</head>
<body>
<img id="myimage" onclick="changeimage()"
border="0" src="bulboff.gif"
width="100" height="180" />
<p> Κάντε κλικ για να ανάψετε/σβήσετε το φως </p>
</body>
</html>
onmousedown & onmouseup - Αυτή τη φορά το φως ανάβει όταν κρατάμε πατημένο το πλήκτρο του ποντικιού
<html>
<head>
<script language="JavaScript">
function lighton()
{
myimage.src="bulbon.gif"
}
function lightoff()
{
myimage.src="bulboff.gif"
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()"
onmouseup="lightoff()"
src="bulboff.gif" width="100" height="180">
<p> Κάντε κλικ για να ανάψετε το φως </p>
</body>
</html>
onload - Εμφανίζει ένα πλαίσιο μηνύματος (alert box) όταν τελειώσει το φόρτωμα της σελίδας
<html>
<head>
<script language="JavaScript">
function mymessage()
{
alert("Αυτό το μήνυμα προήλθε από το συμβάν onload")
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
Τα Χειριστήρια Συμβάντων (Event Handlers)
Με τα event handlers μπορούμε να αλλάξουμε όλα τα στοιχεία οποτεδήποτε θελήσουμε. Όταν ο χρήστης κάνει κλικ σ’ ένα στοιχείο, όταν φορτώνεται μια σελίδα, όταν υποβάλλεται μια φόρμα κ.ά., αλλά χρειαζόμαστε βοήθεια από την JavaScript, τοποθετούμε μια μικρή γραμμή κώδικα στην τιμή του event handler.
<h1 onclick="style.color='red'"> Κάντε κλικ σ’ αυτό το κείμενο </h1>
Αυτό αναγκάζει ένα header να γίνεται κόκκινο όταν κάνουμε κλικ πάνω του.
Ή μπορούμε να γράψουμε το script σαν συνάρτηση (function) και να το τοποθετήσουμε στο τμήμα head της σελίδας, οπότε πρέπει να καλέσουμε τη συνάρτηση από το event handler :
<html>
<head>
<script language="JavaScript">
function changecolor()
{
header.style.color="red"
}
</script>
</head>
<body>
<h1 id="header" onclick="changecolor()">
Κάντε κλικ σ’ αυτό το κείμενο </h1>
</body>
</html>
Αυτή η μέθοδος προτιμάται αν έχουμε πολλές γραμμές κώδικα για εκτέλεση.
Τα Χειριστήρια Συμβάντων της HTML 4.0
|
Συμβάν |
Τι Χειρίζεται |
|
onabort |
Ο χρήστης σταμάτησε το φόρτωμα της σελίδας |
|
onblur |
Ο χρήστης άφησε το αντικείμενο |
|
onchange |
Ο χρήστης άλλαξε την τιμή ενός αντικειμένου |
|
onclick |
Ο χρήστης έκανε κλικ σ’ ένα αντικείμενο |
|
ondblclick |
Ο χρήστης έκανε διπλό κλικ σ’ ένα αντικείμενο |
|
onfocus |
Ο χρήστης έκανε ένα αντικείμενο ενεργό |
|
onkeydown |
Όταν πατιέται ένα πλήκτρο από το πληκτρολόγιο |
|
onkeypress |
Όταν είναι πατημένο ένα πλήκτρο από το πληκτρολόγιο |
|
onkeyup |
Όταν αφήνεται ένα πλήκτρο από το πληκτρολόγιο |
|
onload |
Τελείωσε το φόρτωμα της σελίδας |
|
onmousedown |
Ο χρήστης πάτησε ένα πλήκτρο του ποντικιού |
|
onmousemove |
Ο δρομέας μετακινείται σ’ ένα αντικείμενο |
|
onmouseover |
Ο δρομέας μετακινήθηκε πάνω απ’ ένα αντικείμενο |
|
onmouseout |
Ο δρομέας εγκατέλειψε ένα αντικείμενο |
|
onmouseup |
Ο χρήστης άφησε ένα πατημένο πλήκτρο του ποντικιού |
|
onreset |
Ο χρήστης μηδένισε μια φόρμα (reset) |
|
onselect |
Ο χρήστης επέλεξε κάτι σε μια σελίδα |
|
onsubmit |
Ο χρήστης υπέβαλε μια φόρμα (submit) |
|
onunload |
Ο χρήστης άφησε το παράθυρο |
Παραδείγματα της DHTML
Με τα CSS, μπορούμε να αλλάξουμε το στυλ ενός οποιουδήποτε HTML στοιχείου. Με το DOM, έχουμε έναν χάρτη όλων των στοιχείων σε μια HTML σελίδα. Με μια γλώσσα συγγραφής (scripting language), μπορούμε να έχουμε πρόσβαση στα στοιχεία του DOM. Με τα χειριστήρια συμβάντων (event handlers), μπορούμε να έχουμε πρόσβαση σ’ αυτά τα scripts οποτεδήποτε θελήσουμε.
Τώρα έχουμε απεριόριστες δυνατότητες για να δημιουργήσουμε δυναμικές ιστοσελίδες (dynamic web pages). Τα περισσότερα από τα παραδείγματα της DHTML που ακολουθούν απαιτούν τον Internet Explorer 4.0 τουλάχιστον.
Αλλαγή του Χρώματος Φόντου
<html>
<head>
<script language="JavaScript">
function bgChange(bg)
{
document.body.style.background=bg
}
</script>
</head>
<body>
<b> Μετακινείστε το ποντίκι πάνω απ’ αυτά τα κελιά πίνακα και θα αλλάξει το χρώμα φόντου </b>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('red')"
onmouseout="bgChange('transparent')"
bgcolor="red">
</td>
<td onmouseover="bgChange('blue')"
onmouseout="bgChange('transparent')"
bgcolor="blue">
</td>
<td onmouseover="bgChange('green')"
onmouseout="bgChange('transparent')"
bgcolor="green">
</td>
</tr>
</table>
</body>
</html>
Συμβάντα Παραθύρου (Window Events)
onload
<html>
<head>
<script language="JavaScript">
function mymessage()
{
alert("Αυτό το μήνυμα προήλθε από το συμβάν onload")
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
onunload
<html>
<head>
<script language="JavaScript">
function mymessage()
{
alert("Αυτό το μήνυμα προήλθε από το συμβάν onunload")
}
</script>
</head>
<body onunload="mymessage()">
<p> Ένα alert box θα εμφανίσει ένα μήνυμα όταν κλείσετε αυτό το έγγραφο </p>
</body>
</html>
Συμβάντα Φόρμας (Form Events)
onsubmit
<html>
<head>
<script language="JavaScript">
function confirmInput()
{
alert("Αυτό το μήνυμα προήλθε από το συμβάν onsubmit")
}
</script>
</head>
<body>
<form onsubmit="confirmInput()" action="http://www.w3schools.com/">
Δώστε το όνομά σας : <input type="text">
<input type="submit">
</select>
</form>
</body>
</html>
onreset
<html>
<head>
<script language="JavaScript">
function message()
{
alert("Αυτό το μήνυμα προήλθε από το event handler onreset ")
}
</script>
</head>
<body>
<form onreset="message()">
Δώστε το όνομά σας : <input type="text">
<input type="reset">
</select>
</form>
</body>
</html>
Συμβάντα Πληκτρολογίου (Keyboard Events)
onkeydown
<html>
<head>
<script language="JavaScript">
function writeMessage()
{
document.forms[0].mySecondInput.value = document.forms[0].myInput.value
}
</script>
</head>
<body>
<p> Το onkeydown event handler συμβαίνει τη στιγμή που πατιέται ένα πλήκτρο του πληκτρολογίου </p>
<form>
Δώστε το όνομά σας :
<input type="text" name="myInput" onkeydown="writeMessage()">
<input type="text" name="mySecondInput">
</select>
</form>
</body>
</html>
onkeyup
<html>
<head>
<script language="JavaScript">
function writeMessage()
{
document.forms[0].mySecondInput.value = document.forms[0].myInput.value
}
</script>
</head>
<body>
<p> Το onkeyup event handler συμβαίνει τη στιγμή που αφήνεται ένα πλήκτρο του πληκτρολογίου </p>
<form>
Γράψτε ένα μήνυμα : <br />
<input type="text" name="myInput" onkeyup="writeMessage()">
<input type="text" name="mySecondInput">
</select>
</form>
</body>
</html>
Συμβάντα Ποντικιού (Mouse Events)
onmouseover & onmouseout
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Μετακινείστε το ποντίκι πάνω από το κείμενο </h1>
</body>
</html>
onclick
<html>
<head>
<script language="JavaScript">
cc=0
function changeimage()
{
if (cc==0)
{
cc=1
myimage.src="bulbon.gif"
}
else
{
cc=0
myimage.src="bulboff.gif"
}
}
</script>
</head>
<body>
<img id="myimage" onclick="changeimage()"
border="0" src="bulboff.gif"
width="100" height="180" />
<p> Κάντε κλικ για ανάψει/σβήσει το φως </p>
</body>
</html>
onmousemove
<html>
<head>
<script language="JavaScript">
var i=1
function moveright()
{
header.style.position="relative"
header.style.left=i
i++
}
</script>
</head>
<body onmousemove="moveright()">
<h1 id="header"> Μετακινείστε το ποντίκι πάνω απ’ αυτή τη σελίδα </h1>
</body>
</html>
disable right-click
<html>
<head>
<script language="JavaScript">
function disable()
{
if (event.button == 2)
{
alert("Sorry no rightclick on this page.\nNow
you can not view my source\nand you
can not steal my images")
}
}
</script>
</head>
<body onmousedown="disable()">
<p> Κάντε δεξί κλικ στη σελίδα για να λάβει χώρα το συμβάν </p>
<p> Η ιδιότητα του συμβάντος δεν αναγνωρίζεται στο Netscape </p>
</body>
</html>
Κείμενο (Text)
Πρόσβαση σε Στοιχεία (Element access)
<html>
<body>
<h1 id="header"> My header </h1>
<script language="JavaScript">
header.style.color="red"
</script>
<p> Το script αλλάζει το στυλ του στοιχείου </p>
</body>
</html>
Αλλαγή Χαρακτηριστικών (Attribute change)
<html>
<body>
<img id="image" src="smiley.gif" width="32" height="32">
<script language="JavaScript">
image.src="landscape.jpg"
</script>
<p> Η αρχική εικόνα ήταν ένα χαμογελαστό πρόσωπο, αλλά το script την αλλάζει με μια εικόνα τοπίου </p>
</body>
</html>
onmousemove
<html>
<head>
<script language="JavaScript">
var i=1
function moveright()
{
header.style.position="relative"
header.style.left=i
i++
}
</script>
</head>
<body onmousemove="moveright()">
<h1 id="header"> Μετακινείστε το ποντίκι πάνω απ’ αυτή τη σελίδα </h1>
</body>
</html>
Μεγαλύτερο Κείμενο (Bigger Text)
<html>
<head>
<script language="JavaScript">
txtsize=0
maxsize=100
function writemsg()
{
if (txtsize<maxsize)
{
msgfield.style.fontSize=txtsize
txtsize++
timer=setTimeout("writemsg()",10)
}
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body onload="writemsg()" onunload="stoptimer()">
<p id="msgfield"> W3Schools </p>
</body>
</html>
Πεδία Κειμένου (Text Fields)
Αλλαγή Χρώματος Φόντου ενός Πεδίου Κειμένου
<html>
<head>
<script language="JavaScript">
function changeColor(color)
{
myForm.elements[0].style.background=color
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να αλλάξουμε το χρώμα φόντου ενός πεδίου κειμένου </p>
<p> Μετακινείστε το ποντίκι πάνω από τα τρία έγχρωμα κελιά του πίνακα και το πεδίο κειμένου θα αλλάξει χρώμα :
</p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="changeColor('red')"> </td>
<td bgcolor="blue" onmouseover="changeColor('blue')"></td>
<td bgcolor="green" onmouseover="changeColor('green')"> </td>
</tr>
</table>
<form name="myForm">
<input type="text" value="Mouse over the colors">
</form>
</body>
</html>
Αλλαγή Χρώματος Κειμένου ενός Πεδίου Κειμένου
<html>
<head>
<script language="JavaScript">
function changeColor(color)
{
myForm.elements[0].style.color=color
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να αλλάξουμε το χρώμα κειμένου ενός πεδίου κειμένου </p>
<p> Μετακινείστε το ποντίκι πάνω από τα τρία έγχρωμα κελιά του πίνακα και το κείμενο θα αλλάξει χρώμα : </p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="changeColor('red')"> </td>
<td bgcolor="blue" onmouseover="changeColor('blue')"></td>
<td bgcolor="green" onmouseover="changeColor('green')"></td>
</tr>
</table>
<form name="myForm">
<input type="text" value="Mouse over the colors">
</form>
</body>
</html>
Εισαγωγή Εικόνας Φόντου σ’ ένα Πεδίου Κειμένου
<html>
<head>
<script language="JavaScript">
function bgChange(bg)
{
myForm.elements[0].style.background = "url("+bg+")"
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να εισάγουμε μια εικόνα φόντου σ’ ένα πεδίο κειμένου </p>
<p> Μετακινείστε το ποντίκι πάνω απ’ αυτές τις εικόνες και το πεδίο κειμένου θα αποκτήσει μια εικόνα φόντου </p>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('paper.jpg')" background="paper.jpg"></td>
<td onmouseover="bgChange('bgdesert.jpg')" background="bgdesert.jpg"></td>
</tr>
</table>
<form name="myForm">
<input type="text" value="Mouse over the images">
</form>
</body>
</html>
Πλήκτρα Επιλογής (Radio Buttons)
Αλλαγή Χρώματος Φόντου ενός Πλήκτρου Επιλογής
<html>
<head>
<script language="JavaScript">
function changeColor(color)
{
myForm.elements[0].style.background=color
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς μπορούμε να αλλάξουμε το χρώμα φόντου ενός πλήκτρου επιλογής (radio button)
</p>
<p> Μετακινείστε το ποντίκι πάνω από τα τρία έγχρωμα κελιά του πίνακα και θα αλλάξει το χρώμα φόντου : </p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="changeColor('red')"></td>
<td bgcolor="blue" onmouseover="changeColor('blue')"></td>
<td bgcolor="green" onmouseover="changeColor('green')"></td>
</tr>
</table>
<form name="myForm">
Μετακινείστε το ποντίκι πάνω από τα χρώματα
<input checked type="radio">
</form>
</body>
</html>
Πλαίσια Ελέγχου (Checkboxes)
Επιλογή Όλων των Πλαισίων Ελέγχου
<html>
<head>
<script language="JavaScript">
function makeCheck(thisForm)
{
for (i = 0; i < thisForm.option.length; i++)
{
thisForm.option[i].checked=true
}
}
function makeUncheck(thisForm)
{
for (i = 0; i < thisForm.option.length; i++)
{
thisForm.option[i].checked=false
}
}
</script>
</head>
<body>
<form name="myForm">
<input type="button" value="Check" onclick="makeCheck(this.form)">
<input type="button" value="Uncheck" onclick="makeUncheck(this.form)"><br />
<input type="checkbox" name="option"> Μήλα<br />
<input type="checkbox" name="option"> Πορτοκάλια<br />
<input type="checkbox" name="option"> Μπανάνες<br />
<input type="checkbox" name="option"> Πεπόνια
</form>
</body>
</html>
Εισαγωγή Εικόνας Φόντου σ’ ένα Πλαίσιο Ελέγχου
<html>
<head>
<script language="JavaScript">
function bgChange(bg)
{
myForm.elements[0].style.background =
"url(" + bg + ")"
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να εισάγουμε μια εικόνα φόντου σ’ ένα πλαίσιο ελέγχου </p>
<p> Μετακινείστε το ποντίκι πάνω απ’ αυτές τις εικόνες και το πλαίσιο ελέγχου θα αποκτήσει μια εικόα φόντου </p>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('paper.jpg')" background="paper.jpg"></td>
<td onmouseover="bgChange('bgdesert.jpg')" background="bgdesert.jpg"></td>
</tr>
</table>
<form name="myForm">
Μετακινείστε το ποντίκι πάνω από τις εικόνες
<input type="checkbox" checked>
</form>
</body>
</html>
Πλήκτρα Εντολής (Buttons)
Αλλαγή Χρώματος Φόντου ενός Πλήκτρου Εντολής
<html>
<head>
<script language="JavaScript">
function changeColor(color)
{
myForm.elements[0].style.background=color
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να αλλάξουμε το χρώμα φόντου ενός πλήκτρου εντολής </p>
<p> Μετακινείστε το ποντίκι πάνω από τα τρία έγχρωμα κελιά πίνακα και θα αλλάξει το χρώμα φόντου </p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="changeColor('red')"></td>
<td bgcolor="blue" onmouseover="changeColor('blue')"></td>
<td bgcolor="green" onmouseover="changeColor('green')"></td>
</tr>
</table>
<form name="myForm">
<input type="button" value="Mouse over the colors">
</form>
</body>
</html>
Αλλαγή Χρώματος Κειμένου ενός Πλήκτρου Εντολής
<html>
<head>
<script language="JavaScript">
function changeColor(color)
{
myForm.elements[0].style.color=color
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να αλλάξουμε το χρώμα κειμένου ενός πλήκτρου εντολής </p>
<p> Μετακινείστε το ποντίκι πάνω από τα τρία έγχρωμα κελιά πίνακα και θα αλλάξει το χρώμα κειμένου </p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="changeColor('red')"></td>
<td bgcolor="blue" onmouseover="changeColor('blue')"></td>
<td bgcolor="green" onmouseover="changeColor('green')"></td>
</tr>
</table>
<form name="myForm">
<input type="button" value="Mouse over the colors">
</form>
</body>
</html>
Λίστα Επιλογής (Select Option)
Αλλαγή Χρώματος Φόντου μιας Λίστας Επιλογής
<html>
<head>
<script language="JavaScript">
function changeColor(color)
{
myForm.elements[0].style.background=color
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να αλλάξουμε το χρώμα φόντου μιας λίστας επιλογής </p>
<p> Μετακινείστε το ποντίκι πάνω από τα τρία έγχρωμα κελιά πίνακα και θα αλλάξει χρώμα η λίστα επιλογής </p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="changeColor('red')"></td>
<td bgcolor="blue" onmouseover="changeColor('blue')"></td>
<td bgcolor="green" onmouseover="changeColor('green')"></td>
</tr>
</table>
<form name="myForm">
<select>
<option> Mouse over the colored table cells
<option> Mouse over the colored table cells
<option> Mouse over the colored table cells
<option> Mouse over the colored table cells
</select>
</form>
</body>
</html>
Αλλαγή Χρώματος Κειμένου μιας Λίστας Επιλογής
<html>
<head>
<script language="JavaScript">
function changeColor(color)
{
myForm.elements[0].style.color=color
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να αλλάξουμε το χρώμα κειμένου μιας λίστας επιλογής </p>
<p> Μετακινείστε το ποντίκι πάνω από τα τρία έγχρωμα κελιά πίνακα και θα αλλάξει χρώμα η λίστα επιλογής </p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="changeColor('red')"></td>
<td bgcolor="blue" onmouseover="changeColor('blue')"></td>
<td bgcolor="green" onmouseover="changeColor('green')"></td>
</tr>
</table>
<form name="myForm">
<select>
<option> Mouse over the colored table cells
<option> Mouse over the colored table cells
<option> Mouse over the colored table cells
<option> Mouse over the colored table cells
</select>
</form>
</body>
</html>
Περιοχή Κειμένου (Textarea)
Αλλαγή Χρώματος Φόντου μιας Περιοχής Κειμένου
<html>
<head>
<script language="JavaScript">
function newColor(color)
{
myForm.elements[0].style.background=color
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να αλλάξουμε το χρώμα φόντου μιας περιοχής κειμένου </p>
<p> Μετακινείστε το ποντίκι πάνω από τα τρία έγχρωμα κελιά πίνακα και θα αλλάξει χρώμα η περιοχή κειμένου </p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="newColor('red')"> </td>
<td bgcolor="blue" onmouseover="newColor('blue')"> </td>
<td bgcolor="green" onmouseover="newColor('green')"> </td>
</tr>
</table>
<form name="myForm">
<textarea rows="5" cols="20">
This example can not be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</textarea>
</form>
</body>
</html>
Αλλαγή Χρώματος Κειμένου μιας Περιοχής Κειμένου
<html>
<head>
<script language="JavaScript">
function newColor(color)
{
myForm.elements[0].style.color=color
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να αλλάξουμε το χρώμα κειμένου μιας περιοχής κειμένου </p>
<p> Μετακινείστε το ποντίκι πάνω από τα τρία έγχρωμα κελιά πίνακα και θα αλλάξει χρώμα η περιοχή κειμένου </p>
<table width="100%">
<tr>
<td bgcolor="red" onmouseover="newColor('red')"> </td>
<td bgcolor="blue" onmouseover="newColor('blue')"> </td>
<td bgcolor="green" onmouseover="newColor('green')"> </td>
</tr>
</table>
<form name="myForm">
<textarea rows="5" cols="20">
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</textarea>
</form>
</body>
</html>
Εισαγωγή Εικόνας Φόντου σε μια Περιοχή Κειμένου
<html>
<head>
<script language="JavaScript">
function bgChange(bg)
{
myForm.elements[0].style.background =
"url(" + bg + ")"
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει πώς να εισάγουμε μια εικόνα φόντου σε μια περιοχή κειμένου </p>
<p> Μετακινείστε το ποντίκι πάνω απ’ αυτές τις εικόνες και η περιοχή κειμένου θα αποκτήσει μια εικόνα φόντου </p>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('paper.jpg')" background="paper.jpg"></td>
<td onmouseover="bgChange('bgdesert.jpg')" background="bgdesert.jpg"></td>
</tr>
</table>
<form name="myForm">
<textarea rows="5" cols="20">
This example can not be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</textarea>
</form>
</body>
</html>
Εικόνες (Images)
Αλλαγή του Μεγέθους μιας Εικόνας
<html>
<head>
<script language="JavaScript">
function moveover()
{
image.width="200"
image.height="360"
}
function moveback()
{
image.width="100"
image.height="180"
}
</script>
</head>
<body>
<b> Μετακινείστε το ποντίκι πάνω από την εικόνα </b>
<br />
<img id="image" src="bulbon.gif" onmouseover="moveover()"
onmouseout="moveback()" width="100" height="180" />
</body>
</html>
Αλλαγή του Αρχείου Προέλευσης μιας Εικόνας
<html>
<head>
<script language="JavaScript">
function moveover()
{
image.src="bulbon.gif"
}
function moveback()
{
image.src="bulboff.gif"
}
</script>
</head>
<body>
<b> Μετακινείστε το ποντίκι πάνω από την εικόνα </b>
<br />
<img id="image" src="bulboff.gif" onmouseover="moveover()"
onmouseout="moveback()" width="100" height="180" />
</body>
</html>
Αλλαγή της Εικόνας Φόντου
<html>
<head>
<script language="JavaScript">
function bgChange(bg)
{
document.body.background=bg
}
</script>
</head>
<body>
<b> Μετακινείστε το ποντίκι πάνω απ’ αυτές τις εικόνες και θα αλλάξει η εικόνα φόντου </b>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('paper.jpg')" background="paper.jpg"> </td>
<td onmouseover="bgChange('bluesilk.jpg')" background="bluesilk.jpg"></td>
<td onmouseover="bgChange('bgdesert.jpg')" background="bgdesert.jpg"></td></tr>
</table>
</body>
</html>
Κινούμενη Εικόνα
<html>
<head>
<script language="JavaScript">
var i=1
function starttimer()
{
myimage.style.position="relative"
myimage.style.left=+i
i++
timer=setTimeout("starttimer()", 10)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body onload="starttimer()" onunload="stoptimer()">
<img id="myimage" src="smiley.gif" width="32" height="32" />
</body>
</html>
Πλήκτρο Εντολής με Εικόνα Φόντου
<html>
<head>
<style>
input
{
background-image:url("landscape.jpg");
}
</style>
<script language="JavaScript">
function over()
{
if (event.srcElement.tagName=="INPUT")
{
event.srcElement.style.backgroundImage =
"url('w3schools.gif')"
}
}
function out()
{
if (event.srcElement.tagName=="INPUT")
{
event.srcElement.style.backgroundImage = "url('landscape.jpg')"
}
}
</script>
</head>
<body>
<p> Μετακινείστε το ποντίκι πάνω απ’ αυτά τα πλήκτρα </p>
<form onmouseout="out()" onmouseover="over()">
<input class="a" type="button" value="Button 1"><br />
<input class="b" type="button" value="Button 2"><br />
<input class="c" type="button" value="Button 3"><br />
</form>
</body>
</html>
Ψηφιακό Ρολόι
<html>
<head>
<script language="JavaScript">
function getDigits()
{
num=new Array("0fdr.gif", "1fdr.gif", "2fdr.gif", "3fdr.gif", "4fdr.gif", "5fdr.gif", "6fdr.gif", "7fdr.gif",
"8fdr.gif", "9fdr.gif")
time=new Date()
hour=time.getHours()
if (hour<10)
{
hour1.src=num[0]
h2="'" + hour + "'"
h2=h2.charAt(1)
hour2.src=num[h2]
}
else
{
h1="'" + hour + "'"
h1=h1.charAt(1)
hour1.src=num[h1]
h2="'" + hour + "'"
h2=h2.charAt(2)
hour2.src=num[h2]
}
minute=time.getMinutes()
if (minute<10)
{
minute1.src=num[0]
m2="'" + minute + "'"
m2=m2.charAt(1)
minute2.src=num[m2]
}
else
{
m1="'" + minute + "'"
m1=m1.charAt(1)
minute1.src=num[m1]
m2="'" + minute + "'"
m2=m2.charAt(2)
minute2.src=num[m2]
}
second=time.getSeconds()
if (second<10)
{
second1.src=num[0]
s2="'" + second + "'"
s2=s2.charAt(1)
second2.src=num[s2]
}
else
{
s1="'" + second + "'"
s1=s1.charAt(1)
second1.src=num[s1]
s2="'" + second + "'"
s2=s2.charAt(2)
second2.src=num[s2]
}
}
function showTime()
{
timer=setTimeout("getDigits()", 10)
interval=setInterval("getDigits()", 1000)
}
function stopInterval()
{
clearTimeout(timer)
clearInterval(interval)
}
</script>
</head>
<body onload="showTime()" onload="stopInterval()"
bgcolor="#000000">
<img id="hour1" />
<img id="hour2" />
<img id="minute1" />
<img id="minute2" />
<img id="second1" />
<img id="second2" />
</body>
</html>
<html>
<head>
<style>
img
{
filter:gray()
}
</style>
<script language="JavaScript">
function color()
{
myImage.style.filter=false
}
function gray()
{
myImage.style.filter="gray()"
}
</script>
</head>
<body>
<b> Μετακινείστε το ποντίκι πάνω από την εικόνα </b>
<br />
<img id="myImage" src="landscape.jpg"
onmouseover="color()" onmouseout="gray()"
width="160" height="120">
</body>
</html>
<html>
<head>
<style>
img
{
filter:alpha(opacity=10)
}
</style>
<script language="JavaScript">
function clean()
{
interval=setInterval("makeclean(myImage)", 10)
}
function foggy()
{
clearInterval(interval)
myImage.filters.alpha.opacity=10
}
function makeclean()
{
if (myImage.filters.alpha.opacity<100)
{
myImage.filters.alpha.opacity+=5
}
else if (window.interval)
{
clearInterval(interval)
}
}
</script>
</head>
<body>
<img id="myImage" src="landscape.jpg"
onmouseover="clean()" onmouseout="foggy()"
width="160" height="120">
<b> Μετακινείστε το ποντίκι πάνω από την εικόνα </b>
</body>
</html>
<html>
<head>
<style>
img
{
filter:invert()
}
</style>
<script language="JavaScript">
function getFilter()
{
myImage.style.filter="invert()"
}
function noFilter()
{
myImage.style.filter=false
}
</script>
</head>
<body>
<p> Αυτό το παράδειγμα δείχνει τη χρήση του φίλτρου αντιστροφής εικόνας </p>
<b> Μετακινείστε το ποντίκι πάνω από την εικόνα </b>
<br />
<img id="myImage" src="landscape.jpg"
onmouseover="noFilter()" onmouseout="getFilter()"
width="160" height="120">
</body>
</html>
Συνδέσεις (Links)
<html>
<head>
<style>
a:hover
{
text-transform:uppercase;
}
</style>
</head>
<body>
<a href="default.asp"> Μετακινείστε το ποντίκι πάνω απ’ αυτόν τον σύνδεσμο </a>
</body>
</html>
<html>
<head>
<script language="JavaScript">
function blinklink()
{
if (!blink.style.color)
{
blink.style.color="red"
}
if (blink.style.color=="red")
{
blink.style.color="black"
}
else
{
blink.style.color="red"
}
timer=setTimeout("blinklink()",100)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body onload="blinklink()" onunload="stoptimer()">
<a id="blink" href="default.asp"> Blinking link </a>
</body>
</html>
<html>
<head>
<script language="JavaScript">
function shakeleft()
{
myLink.style.position="relative"
myLink.style.left="3"
timer=setTimeout("shakeright()", 10)
}
function shakeright()
{
myLink.style.left="0"
timer=setTimeout("shakeleft()", 10)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body>
<a id="myLink" href="http://www.w3schools.com/"
onmouseover="shakeleft()" onmouseout="stoptimer()">
Μετακινείστε το ποντίκι πάνω απ’ αυτόν τον σύνδεσμο
</a>
</body>
</html>
Δρομέας (Cursor)
<html>
<head>
<script language="Javascript">
function cursorPos()
{
xxx.innerHTML=event.clientX
yyy.innerHTML=event.clientY
}
</script>
<body onmousemove="cursorPos()">
cursor X: <span id="xxx"></span>
<br />
cursor Y: <span id="yyy"></span>
</body>
</html>
<html>
<head>
<script language="JavaScript">
function cursor()
{
trail.style.visibility="visible"
trail.style.position="absolute"
trail.style.left=event.clientX+10
trail.style.top=event.clientY
}
</script>
</head>
<body onmousemove="cursor()">
<h1> Μετακινείστε τον δρομέα πάνω απ’ αυτή τη σελίδα
</h1>
<img id="trail" style="visibility:hidden" src="w3schools.gif" width="100" height="30">
</body>
</html>
Εφέ Εμφάνισης Σελίδας (Page Enter)
Η επόμενη σελίδα περιέχει ένα "Page-Enter" meta tag :
<meta http-equiv="Page-Enter" content="blendtrans(duration=2.0)">
Αν εισάγουμε αυτή τη γραμμή στο τμήμα head, το έγγραφό μας θα έχει ένα εφέ Page-Enter. Υπάρχουν 25 διαφορετικά εφέ Page-Enter και όλα ορίζονται στο meta tag. Η ιδιότητα (attribute) content περιγράφει το εφέ. Αυτό είναι το μοναδικό blendtrans Page-Enter, ενώ τα υπόλοιπα 24 είναι revealtrans Page-Enter. Η ιδιότητα duration περιγράφει πόσα δευτερόλεπτα κρατάει το εφέ.
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=0)">
Η ιδιότητα transition περιγράφει το εφέ που θα λάβει χώρα στο έγγραφο και παίρνει τιμές από 0–23.
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=1)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=2)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=3)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=4)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=5)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=6)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=7)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=8)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=9)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=10)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=11)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=12)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=13)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=14)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=15)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=16)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=17)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=18)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=19)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=20)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=21)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=22)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2, transition=23)">