PDA

View Full Version : CSS mouseover button



qipcm
09-17-2006, 08:30 AM
1) CODE TITLE: Mouseover Button with pur CSS in one line

2) AUTHOR NAME/NOTES: Martin Hildenbrand, qipcom

3) DESCRIPTION: Moueover button with CSS in one line.

4) URL TO CODE: www.qipnet.de

<div style="width: 100px; height: 100px;text-align: center; background-image: url('yourImageOFF.gif');" onMouseOver="style.background='url(yourImageON.gif)'" onMouseOut="style.background='url(yourImageOFF.gif)'" onClick="self.location='http://www.dynamicdrive.com">&nbsp;</div>


Thats all !

shachi
09-17-2006, 09:15 AM
This is not CSS, it's DHTML.

jscheuer1
09-17-2006, 09:16 AM
That is DHTML, not pure css. The mouse events require javascript enabled. Purely css would go something like so:


.roll {
display:block;
height:25px; /* use the images' dimensions */
width:75px;
background-image:url('off.gif');
}
.roll:hover {
background-image:url('on.gif);
}


<a class="roll" href="wherever.htm">Link Text</a>