wml::des::rollover(3) EN Tools wml::des::rollover(3)NAME
wml::des::rollover - RollOver-Style Image-Button
SYNOPSIS
#use wml::des::rollover
<rollover [attributes]>
DESCRIPTION
One of the most interesting trick to make a webpage more interactive is the so-called rollover effect commonly known from window system
GUIs. The idea is simply to change the underlaying image when the mouse 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 JavaScript currently is the
best solution. But here only those variants can be used which provide the "image" object. Netscape version 3 and 4 and Internet Explorer 4
support this. But the generated code of this "<rollover>" tag is backward-compatible with all types of browsers.
ATTRIBUTES
name
The name of the image. Just for internal usage to bind the correct image objects to the image tag.
src The normal image which is displayed when the mouse is not over the image.
oversrc
The image which is displayed when the mouse is over the image.
href
The URL for the hyperlink which gets activated when the mouse clicks into the image.
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.
target
This sets the "target" attribute for the surrounding anchor ("<a>") tag. Use this for redirecting the hyperlink to different target
area, i.e. usually when using frames or multiple windows.
:a:ATTR=STR :img:ATTR=STR
The ``ATTR=STR'' pairs are passed along to the "<a>" and "<img>" HTML tags.
AUTHOR
Ralf S. Engelschall
rse@engelschall.com
www.engelschall.com
REQUIRES
Internal: P1, P2
External: JavaScript (BROWSER)
SEE ALSO
HTML 3.2 "<img>" and "<a>" tags, JavaScript: http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/
EN Tools 2014-04-16 wml::des::rollover(3)
Check Out this Related Man Page
wml::des::imgdot(3) EN Tools wml::des::imgdot(3)NAME
wml::des::imgdot - 1pt Dot-Images for Webdesign
SYNOPSIS
#use wml::des::imgdot
<: $file = &imgdot($base, $x, $y, $c, $r, $g, $b, $transp, $format); :>
<imgdot [attributes]>
DESCRIPTION
Currently (as of HTML 3.2 and 1997 ;_) webdesigners use two commonly known tricks for creating their layout on webpages: HTML tables and
so-called 1pt Dot-Images. The first one is nicely supported by the WML tag "<grid>" (see wml::des::grid(3) for details), the latter is
supported by this "<imgdot>" tag.
The usual purpose of this tag is to create a transparent PNG or GIF image with a physical size of 1x1 points and a corresponding "<img>"
tag which includes this image with appropriate "width" and "height" attributes. The visual result is a invisible reserved space of size
"width"X"height". Alternatively this tag can create the image with the requested size instead of scaling the 1pt image (see the "noscale"
attribute below). This approach is more safe (all browsers support this) but wastes bandwith and increases page load time.
ATTRIBUTES
base
Usually the created images are named imgdot-XxY-rrggbb.png where "XxY" is the dimension of the image and "rrggbb" the used color (or
`"transp"' for transparent). When you use a "base=foo" attribute, then the resulting files are named foo.imgdot-XxY-rrggbb.gif.
Actually you can even use a complete filename including a directory prefix, i.e. when you use "base=../../common/foo" attribute, then
the PNG images are created as ../../common/foo.imgdot-XxY-rrggbb.png.
And for most flexibility when no base is specified and the variable "IMGDOT_BASE" is defined (usually from within a .wmlrc file via
"-DIMGDOT_BASE~path/to/imgdot/dir/base") it is used. Use this feature to redirect the created images to a particular directory.
You may also use the variable "IMAGE_BASE" which defines in a single line all base names for images generated by WML.
format
By default, GIF images are generated. This attribute lets you use an alternate image format (actually only PNG and GIF are recognized).
You may also change the default format with the variable "IMAGE_FORMAT".
width
Specifies the width (x-dimension) of the reserved space in pixel. Default is 1 pixel.
height
Specifies the height (y-dimension) of the reserved space in pixel. Default is 1 pixel.
color
Sets the color of the image. Default is transparent, i.e. no color. In fact, this is not true, transparency is rendered by choosing a
color which is made transparent, which is white by default. Prepending an hyphen to the "color" attribute sets the color of the
transparent color.
align
Sets the alignment of the image. Default is `"bottom"'. This alignment is used for the "align" attribute of the inserted "<img>" tag.
noscale
Indicates if the image should be created with 1pt in size and scaled online by the browser (default) or should be created with the
correct physical size (this option).
:img:ATTR=STR
The ``ATTR=STR'' pairs are passed along to the "<img>" HTML tag.
AUTHOR
Ralf S. Engelschall
rse@engelschall.com
www.engelschall.com
Denis Barbier
barbier@engelschall.com
REQUIRES
Internal: P1, P2, P3
SEE ALSO
HTML <"img"> tag.
EN Tools 2014-04-16 wml::des::imgdot(3)