Dziś szybka porada, która może przydać się każdemu webmasterowi. Jeśli potrzebujesz sposobu, aby po kliknięciu myszką w link, otworzyło się konkretne zdjęcie w nowym okienku. Nie w nowej karcie przeglądarki, tylko zupełnie nowym oknie w którym będzie wyświetlać się tylko plik graficzny.
Aby uzyskać taki efekt użyjemy HTML + prostego skryptu w JavaScript. Na początek tworzymy kod w HTMLu:
<!DOCTYPE html> <html> <head> <title>Otwieranie okna</title> <script src="noweokno.js"></script> </head> <body> <h1>Strona www</h1> <h2>Kliknij w link zdjęcia, aby otworzyć go w nowym oknie:</h2> <h2><a href="#" class="newOkn">Zdjęcie</a></h2> </body> </html>Jak widać w sekcji <head> osadzasz plik w JavaScript noweokno.js, który również musisz stworzyć. Będzie on odpowiedzialny za wyświetlenie nowego okienka ze zdjęciem. Powinien mieć taką zawartość:
window.onload = newWinLinks;
function newWinLinks() { for (var i=0; i<document.links.length; i++) { if (document.links[i].className == "newOkn") { document.links[i].onclick = newWindow; } } }
function newWindow() { var catWindow = window.open("img/zdjecie.jpg", "catOkn", "resizable=no,width=350,height=240"); return false; }
W linijce
var catWindow = window.open("img/zdjecie.jpg", "catOkn", "resizable=no,width=350,height=240");wskazujesz lokalizację zdjęcia na serwerze, klasę obiektu (którą trzeba wskazać również we wcześniejszym pliku HTML) oraz rozmiar zdjęcia w pikselach. Wyposażony w dwa powyższe pliki możesz w linkach na stronie www, umieszczać odnośniki do zdjęć, które będą się wyświetlać w nowych okienkach.
Tak to będzie wyglądać, po kliknięciu w odnośnik:
