Till Startsidan
JavaScript.nu / DHTML-kurs / Flytta lager & byta textfärg

LÄR DIG DHTML
Flytta lager & byta textfärg

Om du kan JavaScript kan du i princip göra vad du vill med dina lager. Göra spel, text och bilder som flyger, saker som blinkar, häftiga effekter etc.
Alla exempel som visas under denna kurs är fullt kompatibla med Netscape 4 och 6 samt Explorer 4 och 5.
Det du allmänt bör notera är att Explorer 4 och 5 har exakt likadana syntax när det gäller scripten som visas i denna kurs, medan Netscape 4 och 6 har helt olika syntax. Lägg gärna märke till hur lika Netscape 6 och Explorer's syntax är.

Detta script visar en bild som står stilla tills du drar musen över den, då dyker den upp på ett nytt ställe:

Exempel 7 - Bild byter plats
<SCRIPT LANGUAGE="javascript">
<!--This is one of many scripts which are available at:     *---
//--http://www.JavaScript.nu/javascript                     *---
//--This script is FREE, but you MUST let these lines       *---
//--remain if you use this script.                          *---

function byt_plats()
{
w=parseInt(Math.random()*300);				//Hur långt åt höger bilden kan komma
h=parseInt(Math.random()*200);				//Hur långt ner bilden kan komma

if (document.all)					//Explorer 4,5
{
	document.all["lager"].style.pixelLeft=w;	//Placering från vänster
	document.all["lager"].style.pixelTop=h;		//Placering uppifrån
}
else if (document.layers)				//Netscape 4
{
	document.layers["lager"].left = w;		//Placering från vänster
	document.layers["lager"].top = h;		//Placering uppifrån
	//Även detta skulle fungera: document.lager.moveTo(w,h);
}
else if (document.getElementById)			//Netscape 6
{
	document.getElementById("lager").style.left=w;	//Placering från vänster
	document.getElementById("lager").style.top=h;		//Placering uppifrån
}
}
//-->
</SCRIPT>

<DIV ID="lager" STYLE="position: absolute;"><A HREF="#" onMouseOver="byt_plats()"><IMG SRC="bild.gif" BORDER="0"></A></DIV>

Vi ska nu titta på ett annat script som byter färg på texten i ett lager. Detta fungerar endast i Explorer.
Exempel 8 - Text byter färg
<SCRIPT LANGUAGE="JavaScript">
<!--This is one of many scripts which are available at:     *---
//--http://www.JavaScript.nu/javascript                     *---
//--This script is FREE, but you MUST let these lines       *---
//--remain if you use this script.                          *---

function andra_farg(namn,farg)		//Ändrar textens färg
{
if (document.all)			//Explorer 4,5
{
	document.all[namn].style.color=farg;
}
else if (document.getElementById)			//Netscape 6
{
	document.getElementById(namn).style.color=farg;

}
}
//-->
</SCRIPT>

<DIV ID="textruta" STYLE="position:relative" onClick="andra_farg('textruta','red')">Tryck här!</DIV>
Textens färg kan även bytas så här:
<BR>
<A HREF="javascript:andra_farg('textruta','blue')">Blue</A>
-
<A HREF="javascript:andra_farg('textruta','#aaaaaa')">#aaaaaa</A>
-
<A HREF="javascript:andra_farg('textruta','navy')">Navy</A>

Tryck på texten i exemplet med Explorer eller Netscape 6 så ser du att texten blir röd. Att det inte fungerar med Netscape 4 har två skäl. Att det inte går att trycka på texten i DIV-blocket beror på att Netscape 4 inte kan uppfatta händelsen, endast Explorer och Netscape 6 "ser" att det är en onClick i DIV-taggen. Fast det intressanta här är att NN 4 inte klarar av att byta färg på texten i ett DIV-lager på detta sätt. Skulle vi inte ha med if(document.all) och else if (document.getElementById) skulle NN 4 ge ett felmeddelande, nu händer ingenting.

[DHTML guiden] - [Till kapitel 4]






Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]