Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Fadenkreuz als Cursor



Ranking: +2   Kommentare: 0   |   Bewertung: Keine Berechtigung!  

Vorwort


Fadenkreuz als Cursor statt dem pfeil

Schritt 1


zwischen <HEAD> und </HEAD> fügen wir als allererstes folgenden code ein:

Code:


<style>  

<!--  

#leftright, #topdown{  

position:absolute;  

left:0;  

top:0;  

width:1px;  

height:1px;  

layer-background-color:blue; // Fadenkreuz Farbe  

background-color:blue; //Hintergrund Farbe  

z-index:100;  

font-size:1px;  

}  

-->  

</style>  




Schritt 2


Dies getan fügen wir zwischen <BODY> und </BODY> folgendes ein:

Code:


<!--webbot bot="HTMLMarkup" startspan --><div id="leftright" style="width:expression(document.body.clientWidth-2)"></div>  

<div id="topdown" style="height:expression(document.body.clientHeight-2)"></div>  

<script language="JavaScript1.2">  

<!--  

/*jason theis,http://members.tripod.com/b-lueflame  

*/  

 

if (document.all&&!window.print){  

leftright.style.width=document.body.clientWidth-2  

topdown.style.height=document.body.clientHeight-2  

}  

else if (document.layers){  

document.leftright.clip.width=window.innerWidth  

document.leftright.clip.height=1  

document.topdown.clip.width=1  

document.topdown.clip.height=window.innerHeight  

}  

    

 

function followmouse1(){  

//move cross engine for IE 4+  

leftright.style.pixelTop=document.body.scrollTop+event.clientY+1  

topdown.style.pixelTop=document.body.scrollTop  

if (event.clientX<document.body.clientWidth-2)  

topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1  

else  

topdown.style.pixelLeft=document.body.clientWidth-2  

}  

 

function followmouse2(e){  

//move cross engine for NS 4+  

document.leftright.top=e.y+1  

document.topdown.top=pageYOffset  

document.topdown.left=e.x+1  

}  

 

if (document.all)  

document.onmousemove=followmouse1  

else if (document.layers){  

window.captureEvents(Event.MOUSEMOVE)  

window.onmousemove=followmouse2  

}  

 

function regenerate(){  

window.location.reload()  

}  

function regenerate2(){  

setTimeout("window.onresize=regenerate",400)  

}  

if ((document.all&&!window.print)||document.layers)  

//if the user is using IE 4 or NS 4, both NOT IE 5+  

window.onload=regenerate2  

 

//-->  

</script>  





Schritt 3


Hat dir das Tutorial gefallen, bzw. geholfen? Dann Vote doch bitte für mich:
http://www.designnation.de/v4/vote.php?id=3960


Veröffentlicht von: gesperrt
Veröffentlicht am: 22 Jan. 2005
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter:

Kommentar(e) (0)


Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder