1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
;;;
;;; WML::rollover - RollOver-Style Image-Button
;;;
;;; Package from WML <URL:http://www.engelschall.com/sw/wml/>
;;; wml::des::rollover - RollOver-Style Image-Button
;;; Copyright (c) 1997 Ralf S. Engelschall, All Rights Reserved.
;;;
<use name="WML:javascript" />
<set-var __ro:count=1 />
<define-tag rollover whitespace=delete>
<preserve name src oversrc href alt target hint />
<set-var %attributes />
<when <not <get-var name /> />>
<set-var name=unknown<get-var __ro:count /> />
<increment __ro:count />
</when>
<defvar alt <get-var href /> />
<defvar hint <get-var alt /> />
<defvar href "#" />
<when <not <get-var __rofuncs /> />>
;;; The <group> tag is to prevent the concatenation of the javascript code
<group "
<javascript>
function ro_imgNormal(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + \"_n.src\");
self.status = '';
}
}
function ro_imgOver(imgName, descript) {
if (document.images) {
document[imgName].src = eval(imgName + \"_o.src\");
self.status = descript;
}
}
</javascript>
<set-var __rofuncs=1 />
" />
</when>
<copy-var name __ro:name />
<copy-var src __ro:src />
<copy-var oversrc __ro:oversrc />
;;; The <group> tag is to prevent the concatenation of the javascript code
<group "
<javascript>
if (document.images) {
ro_img_<get-var __ro:name />_n = new Image();
ro_img_<get-var __ro:name />_n.src = \"<get-var __ro:src />\";
ro_img_<get-var __ro:name />_o = new Image();
ro_img_<get-var __ro:name />_o.src = \"<get-var __ro:oversrc />\";
}
</javascript>
" />
<a href="<get-var href />";;;
<if <get-var target /> " target=\"<get-var target />\"" /> ;;;
onMouseOver="ro_imgOver('ro_img_<get-var name />', '<get-var hint />'); return true" ;;;
onMouseOut="ro_imgNormal('ro_img_<get-var name />'); return true";;;
><img ;;;
name="ro_img_<get-var name />" ;;;
src="<get-var src />" ;;;
alt="<get-var alt />" ;;;
border="0";;;
/></a>
<restore name src oversrc href alt target hint />
</define-tag>
##EOF##
__END__
=head1 NAME
WML:rollover - RollOver-Style Image-Button
=head1 SYNOPSIS
<use name="WML:rollover" />
<rollover [attributes] />
=head1 DESCRIPTION
One of the most interesting trick to make a webpage more interactive is the
so-called I<rollover effect> commonly known from window system GUIs. The idea
is simply to change the underlaying image when the mouse I<rolls over> it.
Additionally when a mouse click occurs over the image it acts like a button
and jumps to a new URL.
Although there are more then one way to achieve this optical effect, to use
the client-side scripting-language I<JavaScript> currently is the best
solution. But here only those variants can be used which provide the C<image>
object. Netscape version 3 and 4 and Internet Explorer 4 support this. But
the generated code of this C<E<lt>rolloverE<gt>> tag is backward-compatible
with all types of browsers.
=head1 ATTRIBUTES
=over 4
=item C<name>
The name of the image. Just for internal usage to bind the correct image
objects to the image tag.
=item C<src>
The normal image which is displayed when the mouse I<is not> over the image.
=item C<oversrc>
The image which is displayed when the mouse I<is> over the image.
=item C<href>
The URL for the hyperlink which gets activated when the mouse clicks into the
image.
=item C<alt>
This string is displayed in text-only browsers or browsers which have images
disabled at the place where the image stays. Additionally it is displayed in
the browsers status line when the mouse is over the image.
=item C<target>
This sets the C<target> attribute for the surrounding anchor (C<E<lt>aE<gt>>)
tag. Use this for redirecting the hyperlink to different target area, i.e.
usually when using frames or multiple windows.
=back
=head1 AUTHOR
Ralf S. Engelschall
rse@engelschall.com
www.engelschall.com
=cut
|
