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 ]