Hover Image - Strathview Consultants

Hover Image

Support Pages » Hover Image

Changing the image on hover is possible with just css:

Using separate green and blue images

Using a single image (sprite)

CSS

This can either go into your main CSS or be used in a CSS module.

/* CSS when using 2 images */

.help {
    width:200px;    
    height:30px;
    display:block;
}

.help a img {
    background-image: url(/local--files/support:images/helpblue.png);
}

.help a img:hover {
    background-image: url(/local--files/support:images/helpgreen.png);
}

/* CSS when using a single image sprite */

.help-sprite {
    width:200px;    
    height:30px;
    display:block;
}

.help-sprite a img {
    background-image: url(/local--files/support:images/help-sprite.png);
}

.help-sprite a img:hover {
    background-image: url(/local--files/support:images/help-sprite.png);
    background-position: 0 30px;
}

Then in the page use a div as follows:

+++ Using separate green and blue images

[[div class="help"]]
[[image /support:images/transparent.png link="http://www.bbc.co.uk"]]
[[/div]]

[[div style="height:25px;"]]
[[/div]]

+++ Using a single image (sprite)

[[div class="help-sprite"]]
[[image /support:images/transparent.png link="http://www.bbc.co.uk"]]
[[/div]]