Background position mouseover button

Background position mouseover button – image en CSS code

door: Joriso

In dit CSS mouseover button voorbeeld wordt de position eigenschap van een background image veranderd om de suggestie van een (background) image swap te wekken.

CSS mouseover

Background–image

Er wordt voor deze CSS mouseover button maar één background image gebruikt:

button.gif

Het plaatje dat dient als background image omvat echter beide plaatjes die nodig zijn voor het mouseover effect. In dit voorbeeld wordt voor beide toestanden van de mouseover button (onmouseover en onmouseout) een ander gedeelte van het background image bestand getoond.

Omdat het background image een animated gif–bestand is (waarvan één helft beweegt), wordt door de background–position te wijzigen de illusie gewekt dat de button bij mouseover begint te bewegen.

CSS code background position mouseover button

<html>
<head>
<title>CSS mouseover button</title>

<style type="text/css">
.button, .button2
{
height:33px;
width:165px;
background:url(button.gif)
margin:2px;
line-height:32px;
text-align:right;
}

.button
{
background-position: top left;
}

.button
{
background-position: -165px 0;
}
</style>

</head>
<body bgcolor="#000000">

<div class="button"
onMouseOver="this.className='button2'"
onMouseOut="this.className='button'">
<a href="http://www.joriso.nl"><strong>CSS mouseover</strong></a>    
</div>

</body>
</html>

Uitleg over deze css mouseover button op volgende pagina

_{Pagina 2 van 4}
«vorige |1| 2 |3|4| volgende»

Commentaar van bezoekers:

van: Mark

23:56:49, 3rd-Oct-08

Hallo Joris. Leuke tutorial en duidelijk verhaal. In de code heb je een typo staan. De classname van de tweede background-position is 'button2'.
Leuke site ook. Bedankt.

van: -

13:39:44, 3rd-Jan-10

Commentaar toevoegen:

Naam:
Link:^{(niet verplicht)}
Commentaar:
^{<-- code:}