NinetNet    JAVASCRIPT    Fantasiulla Finesser    Script

   skriv ut    



Mus-Följare - statisk

Låt muspekaren följas av... Ja, i stort sett vad som helst! I det första exemplet en bild. Du kan självklart byta ut bilden mot din egen. Längre ner finns också exempel med text.

Scriptet fungerar i: Internet Explorer, Netscape, Mozilla och Opera.

Exempel 1 - öppnas i eget fönster. Fler exempel nedan!


Följ de två enkla stegen nedan för att installera scriptet.


Steg 1


Lägg följande kod mellan <head> och </head> :



<!-- MUSKOD START -->

<style type="text/css">
<!--
#divCursor { position:absolute; width:100; height:15; }
.cursor { font-family: Arial; font-size: 11px; color: #000000; }
-->
</style>

<script type="text/javascript" language="JavaScript">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
********************************************************************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
	this.ver=navigator.appVersion
	this.dom=document.getElementById?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
	this.ie4=(document.all && !this.dom)?1:0;
	this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
	return this
}
bw=new checkBrowser()
//Ändra dessa variabler:
fromLeft=15 // Hur långt åt vänster ska div-taggen placeras?
fromTop=10 // Hur långt från toppen ska div-taggen placeras?

/********************************************************************
Initilizes the objects
*********************************************************************/
function cursorInit(){
	oCursor=new makeCursorObj('divCursor')
	scrolled=bw.ns4 || bw.ns5?"window.pageYOffset":"document.body.scrollTop"
	if(bw.ns4)document.captureEvents(Event.MOUSEMOVE)
	document.onmousemove=move;
}
/********************************************************************
Contructs the cursorobjects
*********************************************************************/
function makeCursorObj(obj,nest){
	nest=(!nest) ? '':'document.'+nest+'.'
   	this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
	this.moveIt=b_moveIt;
	return this
}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
/********************************************************************
Tracking the mousemove and moves the object along.
*********************************************************************/
function move(e){
	x=bw.ns4 || bw.ns5?e.pageX:event.x
	y=bw.ns4 || bw.ns5?e.pageY:event.y
	if(bw.ie4 || bw.ie5) y=y+eval(scrolled)
	oCursor.moveIt(x+fromLeft,y+fromTop)
}
onload=cursorInit;
</script>

<!-- MUSKOD SLUT -->

•  Markera och kopiera texten i rutan ovan. Klistra sedan in den på din sida.
•  De värden i scriptet som är lätta att ändra är skrivna med rött med förklaring i grönt.



Steg 2


Lägg följande kod mellan <body> och </body>. Det som skrivs mellan <div> och </div> i koden är det som kommer att följa musen.



<div id="divCursor" class="cursor">
<img src="musbild.gif">
</div>

•  Markera och kopiera texten i rutan ovan. Klistra sedan in den på din sida.
•  Här följs musen av en bild. Koden är skriven med rött.
•  Bilden i exemplet är mitt original och får gärna användas! Högerklicka och spara!





•  Glöm inte att ladda upp bilden i rätt mapp på din server.



Det här scriptet är skrivet av Thomas Brattli på www.bratta.com.
Om du vill använda scriptet MÅSTE du låta copyright-noteringen stå kvar!





Exempel 2


Exempel 2 - öppnas i eget fönster.


Fungerar som i orginalscriptet ovan men i "Exempel 2" används text. Så här:



<div id="divCursor" class="cursor">
Hejan Svejsan!
</div>


Vill du formatera texten gör du det i stilmallen i sidans huvud. Här:


<style type="text/css">
<!--
#divCursor { position:absolute; width:100; height:15; }
.cursor { font-family: Arial; font-size: 11px; color: #000000; }
-->
</style>





Exempel 3


Exempel 3 - öppnas i eget fönster.


Varför inte både bild och text? Så här:


<div id="divCursor" class="cursor">
Välkommen!<br>&nbsp;<img src="musbild.gif">
</div>




  Tillbaka