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:
