Image hover over text
nav_first.pngFirst: package:1
Easy Logo and Header
Edited: 04 Jan 2010 13:54 by: pieterh
Comments: 7
Tags: prize-winner
nav_prev.pngPrevious: package:15
Iconise links
Edited: 16 Jan 2010 15:41 by: gerdami
Comments: 0
Tags:
Last: package:17
Mobile iPod
Edited: 02 Feb 2010 17:15 by: pieterh
Comments: 2
Tags:
nav_last.png
Next: package:17
Mobile iPod
Edited: 02 Feb 2010 17:15 by: pieterh
Comments: 2
Tags:
nav_next.png

Image hover over text
Package submitted by leiger
21 Jan 2010 00:17

rating: +2+x

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 horseworlds-smallest-horse.png ? :)

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 horsethumbelina-worlds-smallest-horse-small.jpg is really, really small! :)

Comments: 3

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License