onMouseMove
Hemligheten i detta finns i händelsen onMouseMove, som vi kommer åt genom dokumentobjektsmodellen för JavaScript.
Denna händelse kan användas i taggen <BODY> i vårt HTML-dokument, vilket du kommer att se längre fram i artikeln. Det vi då gör, är att vi fångar upp händelsen när muspekaren rör sig över dokumentet.
Id och positionering
För att detta ska fungera behöver vi känna till vad ett id är för något. Ett id gör att vi kan hänvisa till ett objekt. Låt oss säga att vi infogar en bild i vårt dokument. Vi kan då påverka bilden med hjälp av JavaScript, förutsatt att vi angett ett id för den. Det kan se ut så här:
<IMG src="images/bild.gif" id="minbild">
Ovanstående rad, observera id="minbild", gör att vi kan komma åt bilden med följande JavaScript-kod:
document.all.minbild
Utifrån detta kan vi sedan ändra bildens egenskaper, såsom bredd, höjd, position, ram och dylikt. Ett litet exempel:
document.all.minbild.style.posTop=100;
Ovanstående gör att bilden hamnar 100 pixlar från sidans topp!
För att få ett objekt att flytta sig måste det dock vara positionerat med CSS (se artiklar om CSS för detaljer).
Funktionen (JavaScript för IE 5+)
Följande kod skall finnas inom HEAD-området i ditt HTML-dokument:
<SCRIPT language="javascript" type="text/javascript">
<!--
function mover()
{
mindiv.style.posTop = event.clientY-20;
mindiv.style.posLeft = event.clientX-20;
}
function resetMover()
{
mindiv.style.posTop = -40;
mindiv.style.posLeft = -40;
}
//-->
</SCRIPT>
event.clientY respektive event.clientX tar reda på var muspekaren håller hus. Resutatet, pixlar från vänster (event.clientX) och från topp (event.clientY), används sedan för att placera objektet.
Funktionen mover() ska anropas när muspekaren rör sig. Därför ropar vi på den i taggen <BODY>, på följande lilla vis:
<BODY onMouseMove="mover();"
För att återställa funktionen så att det inte ter sig konstigt på skärmen använder vi sedan händelsen onMouseOut, alltså när muspekaren förs utanför sidans kant, för att nollställa det hela. Till hjälp har vi funktionen resetMover(). Följden blir att taggen <BODY> ser ut så här när vi är klara:
<BODY onMouseMove="mover();" onMouseOut="resetMover();"
Sådär ja! Allt vi nu behöver göra är att placera ett objekt med id="mindiv" i dokumentet och se till att det är positionerat, så kommer detta objekt att följa vår muspekare. Följande kod ska alltså läggas till i HTML-dokumentet:
<DIV id="mindiv" style="height: 20px; width: 20px; position: absolute;">
Nu ska vi se... Genom att kopiera nedanstående kod och spara den som ett HTML-dokument i din dator kan du se ett fungerande exempel!
<HTML>
<HEAD>
<TITLE>Följ muspekaren</TITLE>
<SCRIPT language="javascript" type="text/javascript">
<!--
function mover()
{
mindiv.style.posTop = event.clientY-20;
mindiv.style.posLeft = event.clientX-20;
}
function resetMover()
{
mindiv.style.posTop = -40;
mindiv.style.posLeft = -40;
}
//-->
</SCRIPT>
</HEAD>
<BODY onMouseMove="mover();" onMouseOut="resetMover();">
<DIV id="mindiv" style="background-color: #ff0000; height: 20px; width: 20px; position: absolute;"></DIV>
</BODY>
</HTML>
Mycket nöje!
/Jocke
