Hvordan lage en Firefox Transparent Mouse
En gjennomsiktig mouse er en usynlig HTML-element som opptar en blokk med plass på en webside. Når brukerens musepekeren passerer over plassen, er en Javascript-funksjon kalt til å utføre hva handlinger du vil. Transparente mouseovers er allsidig; du kan plassere dem i forhold til andre elementer som tekstavsnitt, eller sette dem i vilkårlige steder på siden for å oppnå spennende effekter.
Bruksanvisning
1 Sett følgende CSS og Javascript-kode mellom "hodet" kodene i HTML-dokumentet:
<Style type = "text / css">
.container{
position: relative;
display: inline-block;
}
.mousearea {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
</ Style>
<Script type = "text / javascript">
funksjon mouse () {
alert("mouseover detected");
}
</ Script>
2 Legg til følgende kode i kroppen av HTML-dokumentet:
<P class = "container"> <span class = "mousearea" onMouseOver = "mouse ();">. </ Span> Denne teksten har en gjennomsiktig mouse området over det </ p>
3 Lagre siden og legg den i Firefox. Flytt musen over teksten, og en dialog popup vises.
4 Vilkårlig posisjon og størrelse mouse området på siden ved å ta den utenfor "P" tags slik at det overordnede element er "kroppen", endre "width" og "høyde" egenskaper, og innstillingen "venstre" og "toppen" egenskaper. For eksempel endre ".mousearea" erklæring i CSS-koden til følgende:
.mousearea {
position: absolute;
width: 200px;
height: 200px;
venstre: 500px;
top: 100px;
z-index: 1;
}
Lagre siden og legg det i Firefox. Flytt musen til området 500 piksler til høyre for venstre kant av vinduet og 100 piksler fra toppen. Varsel dialogboks vises.