|
|
|
|
|
Κεφάλαιο 4
Σ’αυτό το σημείο θα ασχοληθούμε με την υλοποίηση των χαρακτηριστικών της DHTML που είναι γνωστά ως δυναμικά στυλ. Τα δυναμικά στυλ είναι απλά η δυναμική αλλαγή των χαρακτηριστικών των στοιχείων της σελίδας που αντιτίθενται με την αλλαγή των χαρακτηριστικών που παρέχει η στατική HTML.
Η αλλαγή του στυλ των γραμματοσειρών σε μια σελίδα είναι για παράδειγμα ένα δυναμικό στυλ. Βέβαια μπορείτε να χρησιμοποιήσετε την τροποποίηση του στυλ των φύλλων για την αλλαγή του στυλ της γραμματοσειράς σε μια ιστοσελίδα, ωστόσο εάν θέλετε να αλλάξετε το στυλ της
Αλλαγή του στυλ της γραμματοσειράς με DHTML
Η εγκατάσταση του δυναμικού στυλ ξεκινά με το αντικειμενικό στυλ. Η κυριότητα της γραμματοσειράς ανήκει στο αντικειμενικό στυλ και έχει τις ακόλουθες τιμές: μέγεθος και σχήμα. Τα στοιχεία που χρησιμοποιούνται στα παραδείγματα κληρονομούν τις ιδιότητές τους με τον ακόλουθο τρόπο
:Στυλ -->Γραμματοσειρά --> Μέγεθος, Σχήμα
Παράδειγμα :
01. <HTML>
02. <HEAD>
03. <TITLE> Changing the Font Family </ TITLE>
04. </ HEAD>
05.
06. <SCRIPT LANGUAGE = ‘‘JavaScript’’>
07.
08. function mytext_onmouseover( ) {
09. mytext.style.fontFamily = ‘‘serif ’’;
10. }
11.
12. function mytext_onmouseout ( ) {
13. mytext.style.fontFamily = ‘‘sans.serif ’’ ;
14. }
15.
16. < / SCRIPT>
17.
18. <DIV id = mytext style = ‘‘font.family : serif ; font-size: 16pt’’
19. onmouseover = ‘‘mytext_onmouseover ( ) ’’
20. onmouseout = ‘‘mytext_onmouseout ( ) ’’>
21. Flipping between serif and sans-serif faces.
22. < /DIV>
23.
24. < /BODY>
25. < /HTML>
Αλλαγή του μεγέθους της γραμματοσειράς με DHTML
Η αλλαγή του σχήματος της γραμματοσειράς μπορεί να γίνει ένα χρήσιμο εργαλείο για σχεδιασμούς .
Παράδειγμα :
01. <HTML>
02. <HEAD>
03. <TITLE> Font SizeChanges < / TITLE>
04. < /HEAD>
05.
06. <SCRIPT LANGUAGE = ‘‘JavaScript’’>
07.
08. function mytext_onmouseover ( ) {
09. mytext.style.fontSize = ‘‘5’’ ;
10. }
11.
12. function mytext_onmouseout ( ) {
13. mytext.style.fontSize = ‘‘2’’ ;
14. }
15. < /SCRIPT>
16.
17.<DIV id = mytex STYLE=‘‘font-size=2; color=blue;
font-family=sans.serif’’
18. onmouseover = ‘‘mytext_onmouseover ( ) ;’’
19. onmouseout = ‘‘mytext_onmouseout ( ) ;’’>
20. This is a Dynamic Size Change !
21. < /DIV>
22.
23.< /BODY>
24. < /HTML>
Αλλαγή του χρώματος της γραμματοσειράς
Μπορείτε επίσης να αλλάξετε το χρώμα της γραμματοσειράς με χρήση DHTML. Επειδή το χρώμα αποτελεί μια ιδιότητα της γραμματοσειράς, μπορεί να το χειριστεί επιδέξια από τη JavaScript.
Παράδειγμα :
01. <HTML>
02. <HEAD>
03. <TITLE>Color Changes< / TITLE>
04. < /HEAD>
05.
06. <SCRIPT LANGUAGE = ‘‘JavaScript’’>
07.
08. function mytext_onmouseover ( ) {
09. mytext.style.color = ‘‘red’’ ;
10. }
11.
12. function mytext_onmouseout ( ) {
13. mytext.style.color = ‘‘red’’
14. }
15.
16. < /SCRIPT>
17.
18.<H2 id = ‘‘mytext’’ style = ‘‘color : blue ; font-family : sans-serif’’>
19. onmouseover = ‘‘mytext_onmouseover ( ) ;’’
20. onmouseout = ‘‘mytext_onmouseout ( ) ;’’>
21.This is a Dynamic Color Change !< / H2>
22.
23.
24.< / BODY>
25.< /HTML>
Εμφάνιση και κρύψιμο στοιχείων
Η
δυνατότητα εμφάνισης και απόκρυψης στοιχείων στη σελίδα είναι ένα βασικό τμήμα της DHTML.Παράδειγμα : Κρύψιμο εικόνας
01.<HTML>
02.<HEAD>
03.<TITLE>Color Changes< /TITLE>
04.< / HEAD>
05.<BODY>
06.<SCRIPT LANGUAGE = ‘‘JavaScript’’>
07.
08.function picture_onmouseover ( ) {
09. picture.style.visibility = ‘‘hidden’’ ;
10. }
11.
12. .function picture_onmouseout( ) {
13. picture.style.visibility = ‘‘visible’’ ;
14. }
15
16.< / SCRIPT>
17.
18.
19.<DIV STYLE = ‘‘color = blue ; font-family=sans-serif ;’’
20. onmouseover = ‘‘picture_onmouseover ( ) ;’’
21. onmouseout = ‘‘picture_onmouseout ( ) ;’’>
22.Pass over the text , and watch me disappear !
23.< / DIV>
24.<P>
25.<IMG ID = picture src = ‘‘picture.gif’’ visibility = ‘‘visible’’>
26.
27.< / BODY>
28.< / HTML>
|
|
|
|
|
