Till Startsidan
JavaScript.nu / DHTML-kurs / Titth�l

L�R DIG DHTML
Titth�l

Med lager kan du ocks� g�ra roliga effekter med titth�l som bes�karen kan titta i. H�r �r ett exempel som visar ett titth�l som du kan titta i och se vad som egentligen finns p� sidan. Det som inte finns bakom h�let, som egentligen �r ett transparent runt h�l i en svart bild, syns inte. Tryck p� bilden (h�let) s� tar ett script bort lagret och hela sidan syns. 
Exempel 12 - Titth�l
<DIV ID="svart" STYLE="position:absolute; top:0; left:0;">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
	<TD BGCOLOR="black" WIDTH="100" HEIGHT="100"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="100"></TD>
	<TD BGCOLOR="black" WIDTH="100" HEIGHT="100"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="100"></TD>
	<TD BGCOLOR="black" WIDTH="1500" HEIGHT="100"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="100"></TD>
</TR>
<TR>
	<TD BGCOLOR="black" WIDTH="100" HEIGHT="100"><IMG SRC="osynlig.gif" WIDTH="100" HEIGHT="1"></TD>
	<TD WIDTH="100" HEIGHT="100"><A HREF="javascript:visa()"><IMG SRC="rundbild.gif" WIDTH="100" HEIGHT="100" BORDER="0"></A></TD>
	<TD BGCOLOR="black" WIDTH="1500" HEIGHT="100"><IMG SRC="osynlig.gif" WIDTH="1500" HEIGHT="1"></TD>
</TR>
<TR>
	<TD BGCOLOR="black" WIDTH="100" HEIGHT="1500"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="1500"></TD>
	<TD BGCOLOR="black" WIDTH="100" HEIGHT="1500"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="1500"></TD>
	<TD BGCOLOR="black" WIDTH="1500" HEIGHT="1500"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="1500"></TD>
</TR>
</TABLE>
</DIV>


<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 visa()
{
if (document.all)		//Explorer 4,5
{
	document.all["svart"].style.visibility="hidden";
}
else if (document.layers)	//Netscape 4
{
	document.layers["svart"].visibility="hidden";
}
else if (document.getElementById)	//Netscape 6
{
	document.getElementById("svart").style.visibility="hidden";
}
}
//-->
</SCRIPT>



<IMG SRC="bild.gif" WIDTH="300" HEIGHT="300">

Det detta script g�r �r att du f�rst har en sida som vanligt, fast du har �ven ett lager som l�gger sig ovanp� allt annat (position:absolute). Detta lager inneh�ller en gigantisk tabell som �r helt svart, f�rutom p� ett st�lle d�r jag f�r snygghetens skull lagt in en bild som liknar ett h�l (h�let �r transparent). Jag skulle ha kunnat strunta i bilden om jag velat och ha l�tit ena rutan i tabellen vara helt tom, fast f�r effektens skull har jag l�tit en bild finnas d�r. N�r man trycker p� l�nken s� f�rsvinner hela lagret och d� syns det som finns bakom (din vanliga sida).
L�gg m�rke till att bilderna antingen har WIDTH="1" eller HEIGHT="1" (f�rutom den runda bilden som har sina riktiga m�tt angivna). Detta f�r att spara p� processorkraft, framf�rallt i Netscape. Det �r dock i scriptet nedan som skillnaden blir m�rkbar. Om man i scriptet nedan ist�llet f�r de sm� bilder jag nu har s�tter in stora v�rden i WIDTH och HEIGHT s� flyttar sig inte bilden i samma takt som musen (mest m�rkbart i Netscape).

Jag ska nu g�ra om scriptet s� att lagret f�rflyttar sig efter musens r�relser. P� detta s�tt ser du just det som finns bakom musen, eftersom h�let �r d�r musen finns hela tiden. 

Exempel 13 - Titth�l som r�r sig
<DIV ID="svart" STYLE="position:absolute; top:0; left:0;">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
	<TD BGCOLOR="black" WIDTH="1200" HEIGHT="600"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="600"></TD>
	<TD BGCOLOR="black" WIDTH="100" HEIGHT="600"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="600"></TD>
	<TD BGCOLOR="black" WIDTH="1200" HEIGHT="600"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="600"></TD>
</TR>
<TR>
	<TD BGCOLOR="black" WIDTH="1500" HEIGHT="100"><IMG SRC="osynlig.gif" WIDTH="1200" HEIGHT="1"></TD>
	<TD WIDTH="100" HEIGHT="100"><A HREF="javascript:visa()"><IMG SRC="rundbild.gif" WIDTH="100" HEIGHT="100" BORDER="0"></A></TD>
	<TD BGCOLOR="black" WIDTH="1200" HEIGHT="100"><IMG SRC="osynlig.gif" WIDTH="1200" HEIGHT="1"></TD>
</TR>
<TR>
	<TD BGCOLOR="black" WIDTH="1200" HEIGHT="600"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="600"></TD>
	<TD BGCOLOR="black" WIDTH="100" HEIGHT="600"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="600"></TD>
	<TD BGCOLOR="black" WIDTH="1200" HEIGHT="600"><IMG SRC="osynlig.gif" WIDTH="1" HEIGHT="600"></TD>
</TR>
</TABLE>
</DIV>


<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.                          *---

if (document.all || document.getElementById)	//Explorer 4,5 & Netscape 6
{
	document.onmousemove = musen_flyttar;	//musen_flyttar anropas d� musen flyttas
}
else if (document.layers)			//Netscape 4
{
	window.captureEvents(Event.MOUSEMOVE);
	window.onMouseMove = musen_flyttar;	//musen_flyttar anropas d� musen flyttas
}

function visa()					//Tar bort lagret
{
	if (document.all)			//Explorer 4,5
	{
		document.all["svart"].style.visibility="hidden";
	}
	else if (document.layers)		//Netscape 4
	{
		document.layers["svart"].visibility="hidden";
	}
	else if (document.getElementById)	//Netscape 6
	{
		document.getElementById("svart").style.visibility="hidden";
	}
}

var Xmusposition, Ymusposition;			//Variabler som inneh�ller musens position

function musen_flyttar(ev)			//Lagrar vart musen finns
{
	if (document.all)			//Explorer 4,5
	{
		Xmusposition = window.event.x;
		Ymusposition = window.event.y;
	}
	else if (document.layers || document.getElementById)		//Netscape 4,6
	{
		Xmusposition = ev.pageX;
		Ymusposition = ev.pageY;
	}
	flytta_lager("svart",Xmusposition-1200-50,Ymusposition-600-50);	//Lagrets �vre v�nstra kant ska inte finnas d�r musen finns,
									//h�let ska finnas d�r. Vi tar bort 1200 i X-led och 600 i Y-led
									//f�r tabellens sidorutor och 50 till f�r halva bildens storlek
}

function flytta_lager(lagernamn,x,y)			//Flyttar lagret
{
	if (document.all)				//Explorer 4,5
	{
		document.all[lagernamn].style.left = x+document.body.scrollLeft;
		document.all[lagernamn].style.top = y+document.body.scrollTop;
	}
	else if (document.layers)			//Netscape 4
	{
		document.layers[lagernamn].left = x;
		document.layers[lagernamn].top = y;
	}
	else if (document.getElementById)	//Netscape 6
	{
		document.getElementById(lagernamn).style.left = x;
		document.getElementById(lagernamn).style.top = y;
	}
}
//-->
</SCRIPT>



<IMG SRC="bild.gif" WIDTH="300" HEIGHT="300">

F�r dig som inte kan JavaScript blir en beskrivning av scriptet r�tt obegripligt, fast om du kan det s� st�r det i sj�lva scriptet vad som g�r vad.
F�r dig som kan JavaScript: L�gg m�rke till att Explorers document.all[lagernamn].style.left/top s�ger lagrets placering i f�rh�llande till den punkt som finns l�ngst upp till v�nster i HTMLsidan. Dvs, om du har ett lager som ska vara p� en best�md position s� kommer denna att flyttas p� bes�karens sk�rm n�r bes�karen scrollar din sida. Netscape � andra sidan anv�nder document.layers[lagernamn].left/top som s�ger lagrets placering i f�rh�llande till den punkt som finns l�ngst upp till v�nster i webbl�sarf�nstret.
Ett script som har ett konstant v�rde p� document.layers[lagernamn].left/top (f�r NN) och document.all[lagernamn].style.left/top (f�r IE) kommer allts� INTE flytta lagret p� sk�rmen d� sidan scrollas i Netscape. En Exploreranv�ndare kommer d�remot m�rka att lagret "flyttas upp�t" d� bes�karen scrollar ner�t. (Kan liknas vid en vanlig bild p� en sida. D� du scrollar ner�t �ker bilden "upp�t" p� din sk�rm. Netscape fungerar allts� inte p� detta s�tt med lager).
I detta script �tg�rdar vi problemet med att l�gga till document.body.scrollLeft (i X-led) och document.body.scrollTop (i Y-led) till bildens placering i Explorer, eftersom vi vill att bildens position ska vara i f�rh�llande till den punkt som finns l�ngst upp till v�nster i webbl�sarf�nstret. document.body.scrollLeft och document.body.scrollTop ger oss v�rdet av hur l�ngt bes�karen har scrollat sk�rmen i X och Y led. Detta beh�ver vi inte ta h�nsyn till f�r dem med Netscape.
[DHTML guiden] - [Till kapitel 6]



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