Image hover over text
This package provides an easy way to show an image when hovering over text.
Include files
| hover | By leiger | 21 Jan 2010 00:20 |
| hover-backend | By leiger | 21 Jan 2010 23:29 |
Instructions
Have you ever wanted to show an image when you hover your mouse over text?
Something like this:
[[include :css-competition:include:hover
|prepend=
|text=
|image=
|attributes=
|append=
]]
Can be used to do just that:
For example, the world's smallest horse
? :)
Attributes
(optional) prepend
- A line of text that appears before the text that has a hover effect on it
(required) text
- The text that you want an image to appear for when the mouse hovers over it
(required) image
- The image to appear when the text is hovered over
- Can be either a full URL or a relative URL (e.g. "/pagename/image.png")
(optional) attributes
- Allows you to set attributes for the image, such as height and width
(optional) append
- A line of text that appears after the text that has a hover effect on it
Example
The example shown above was generated using the following code:
[[include :css-competition:include:hover
|prepend=For example, the
|text=world's smallest horse
|image=http://www.bloganything.net/wp-content/uploads/2006/11/thumbelina-worlds-smallest-horse-small.jpg
|attributes=width="300px"
|append=? :)
]]
Note that the prepend and append text supports wiki markup.
Have you ever wanted to show an image when you hover your mouse over text?For example, the world's smallest horse
is really, really small! :)
Comments: 3
page revision: 2, last edited: 02 Feb 2010 17:17
Nice work, leiger!
I like the fact that the prepend and append lines support wiki markup:
I added an example above so the results can be seen.
-Ed
[[include :css-competition:include:hover
|prepend=Have you //ever// wanted to show an **image** when you hover [[span style="background: #ffff33;"]]your mouse[[/span]] over text?
For example, the
|text=world's smallest horse
|image=http://www.bloganything.net/wp-content/uploads/2006/11/thumbelina-worlds-smallest-horse-small.jpg
|attributes=width="300px"
|append=is [[size 80%]]really[[/size]], [[size 65%]]really[[/size]] [[size 50%]]small[[/size]]! :)
]]
Community Admin
I didn't even think about using wiki markup. Great idea!
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Hmm, this might solve my long-standing issue with the navigators. Nice work!
Portfolio