Erzeugt einen " Interactive Button". In der Demo die Maus über das Viereck bringen und klicken. Der Botton verändert sich bei beiden Aktionen.
Autor: etLux
zur Demo
in <Head> einfügen
<style>
.mouseBeOffMe {
border-top: 10px solid #000000;
border-bottom: 10px solid #000000;
border-left: 6px solid #000000;
border-right: 10px solid #000000;
}
.mouseBeOnMe {
border-top: 6px solid #000000;
border-bottom: 14px solid #000000;
border-left: 10px solid #000000;
border-right: 6px solid #000000;
}
.mouseBeDown {
border-top: 13px solid #000000;
border-bottom: 7px solid #000000;
border-left: 10px solid #000000;
border-right: 6px solid #000000;
}
.mouseBeUp {
border-top: 10px solid #000000;
border-bottom: 10px solid #000000;
border-left: 10px solid #000000;
border-right: 6px solid #000000;
}
</style>
in <body> einfügen und den Pfad für das Bild ändern
<img src = "1.jpg"
title = "This is the Image One Label"
width = "90"
height = "90"
border = "0"
class = "mouseBeOffMe"
onmouseover = "this.className='mouseBeOnMe'"
onmousedown = "this.className='mouseBeDown'"
onmouseup = "this.className='mouseBeUp'"
onmouseout = "this.className='mouseBeOffMe'">
|