wml::des::rollover(3)

📦
version 2.32.0 · 3 versions
, in debian bookworm, debian trixie, ubuntu jammy, ubuntu noble, ubuntu questing

💖 wml::des::rollover 💖

ok so bestie, we're in section 3 of the EN Tools manuals and today's main character is wml::des::rollover — the RollOver-Style Image-Button. yes it's giving 1998 window-system GUI realness and honestly? iconic. let's get into it 🫶

✨ NAME ✨

wml::des::rollover — RollOver-Style Image-Button 💅

🎀 SYNOPSIS 🎀

#use wml::des::rollover

<rollover [attributes]>

like that's it, that's the whole vibe. one #use, one tag, slay.

🦋 DESCRIPTION 🦋

okay so one of the most interesting tricks to make a webpage more interactive is the so-called rollover effect — you already know it from window system GUIs, it's literally everywhere. the idea is simply to change the underlaying image when the mouse rolls over it. and then, additionally, when a mouse click occurs over the image it acts like a button and jumps to a new URL. so it's an image that's also a button. multi-talented. main character energy fr fr. ✨

so, although there are more than one way to achieve this optical effect, using the client-side scripting-language JavaScript currently is the best solution. no cap. but — and this is the important part — here only those variants can be used which provide the "image" object. Netscape version 3 and 4 and Internet Explorer 4 support this. 💀

and the bestie bonus? the generated code of this "<rollover>" tag is backward-compatible with all types of browsers. so everyone eats. 👑

🌸 ATTRIBUTES 🌸

  • name — the name of the image. just for internal usage, to bind the correct image objects to the image tag. lowkey just doing its lil behind-the-scenes job 💖
  • 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. the glow-up pic 🦋
  • 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. accessibility queen 🙈
  • 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. so whatever extra you wanna sprinkle on, it goes straight through 🎀

👑 AUTHOR 👑

 Ralf S. Engelschall
 rse@engelschall.com
 www.engelschall.com

the legend himself. periodt.

⭐ 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/

go read those too, iykyk 💜

and that's the whole page bestie — brought to you by EN Tools, dated 2020-11-29, from the wml::des::rollover(3) manual. stay gorgeous, stay backward-compatible 💖✨🎀

📦 where this page comes from