Jak zrobić pływające okno
Z ToProste
Pływające okno (zobacz demo) wyświetlane na stronie www jest realizowane przez kod JavaScript połączony z wykorzystaniem CSS. Wstawienie pływającego okienka jest trochę trudniejsze - wymaga więcej kodu niż wyskakujące okno, ale nie da się go tak łatwo zablokować, więc jeśli chcesz zwiększyć skuteczność emitowanych reklam na swojej stronie, warto poświęcić trochę czasu na wstawienie go w witrynę.
Kod pływającego okienka
<body> <!-- ***** Plywajace okno - poczatek --> <!-- definicja warstwy i stylu plywajacego okna --> <div id="pop_up" style="position: absolute; left: 0; border: solid 1px #000000; background-color: #000; color: #fff; text-align: right; font: 11px, sans-serif; cursor: pointer; z-index:999" > <!-- Wiswietlnie okna --> <span title="Kliknij aby zamknąć" onclick="document.getElementById('pop_up').style.display='none'">[ Zamknij ]</span><br /> <!-- Glowna zawartosc --> <div style="width:500px; text-align:center"> <h2>To jest pływające okno</h2> <p>Przy przewijaniu strony góra - dół utrzymuje swoją pozycję.</p> <ul> <li>Może zawierać dowolny tekst formatowany znacznikami HTML</li> <li>Może zawierać grafikę.</li> </ul> <!-- Wstawienie obrazka bedacego odnosnikiem --> <a href="adres_linku" target="_blank"> <img src="adres_obrazka.jpg" border="0" /></a> </div> <!-- Glowna zawartosc - koniec --> </div> <!-- definicja warstwy i stylu plywajacego okna - koniec --> <!-- Skrypt obslugujacy plywajace okno --> <script type="text/javascript">
<!--(function(element,el_left,D){ D=document el_left=((D.body.clientWidth||D.documentElement.clientWidth)-500)/2 /* "500" - szerokosc plywajacego okna w px */ el_top=250 /* "250" - odstep okna od gornej krawedzi okna przegladarki w px */ with(D.getElementById('pop_up').style){ top=el_top+'px' left=el_left+'px' } el_left_start=el_top_start=0}) () function el_move(ydiff){ with(document){ ydiff=el_top_start-(body.scrollTop||documentElement.scrollTop) if(ydiff)el_top_start-=~~(ydiff/10) getElementById('pop_up').style.top=el_top_start+el_top+'px' } } elmove=setInterval("el_move()",10)-->
</script><!-- Skrypt obslugujacy plywajace okno - koniec --> <!-- ***** Plywajace okno - koniec -->
</body>
Opis
Zobacz też
<htmlet>zobacz-tez</htmlet>
