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 ]