|
|||
Cgi4free |
Egen söktjänst |
Erbjudanden |
Funktioner |
Gratis bilder |
Hemsidekryptering |
Posten |
Söktjänstregistrering |
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.
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. Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade. Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ] |