CSS mouseover button

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 !

This is not CSS, it's DHTML.

That is DHTML, not pure css. The mouse events require javascript enabled. Purely css would go something like so:

Code:

---

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

---

HTML Code:

---

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

---