Obraz w nowej karcie

pytanie zadane 26 marca 2020 w HTML i CSS przez viola062210 Nowicjusz (120 p.)

Witam, mam pytanie dotyczące obrazów w html. A więc zrobiłam na swojej stronie miniaturki, a gdy się na nie kliknie wtedy zdjęcia wyświetlają się w nowej karcie w rozdzielczości takiej, jakiej zostały pobrane z internetu. Chciałabym aby wszystkie zdjęcia wyświetlały się w nowej karcie z rozdzielczości 800x600 pikseli, jednak nie wiem gdzie zapisać w kodzie te wymagania. Również nie wiem jak zrobić, by po kliknięciu w duże zdjęcie wrócić do miniaturek. Tak wygląda fragment kodu, gdzie stworzyłam miniaturki. Pomocy:)

				<div class="tile1">	<a href="zdjecie1.jpg" target="_blank"> <img width="305" height="200" src="zdjecie1.jpg"/> </a> </div>
				<div class="tile1">	<a href="zdjecie5.jpg" target="_blank"> <img width="305" height="200" src="zdjecie5.jpg"/> </a> </div>
				<div style="clear:both;"> </div>
				<div class="tile2"> <a href="zdjecie3.jpg" target="_blank"> <img width="305" height="200" src="zdjecie3.jpg"/> </a> </div>
				<div class="tile2"> <a href="zdjecie4.jpg" target="_blank"> <img width="305" height="200" src="zdjecie4.jpg"/> </a> </div>
				<div style="clear:both;"> </div>

2 odpowiedzi

odpowiedź 26 marca 2020 przez antypop Mądrala (5,730 p.)

Chcesz koniecznie nowe okno?

Możesz zrobić fotki w lightboxie (https://designconcept.webdev20.pl/articles/lightbox).

Jeżeli koniecznie chcesz nowe okno to zainteresuj się tym tematem : https://www.w3schools.com/jsref/met_win_open.asp.

Pozdrawiam

komentarz 26 marca 2020 przez viola062210 Nowicjusz (120 p.)

Przejrzałam ten materiał i próbowałam to zrobić, jednak bez skutku. W którym miejscu konkretnie mam dodać ten skrypt? Napisałam go w oparciu na ten materiał

<script>
	function myFunction()
{
 var myWindow = window.open("http://localhost/www/zdjecie1.jpg", "_blank", "width=800,height=600", true);
}
</script>

komentarz 27 marca 2020 przez antypop Mądrala (5,730 p.)

Tutaj cały kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div class="tile1">   
    <a href="zdjecie1.jpg" target="_blank"> <img width="305" height="200" src="zdjecie1.jpg"/> </a> </div>
<div class="tile1">   
    <a href="zdjecie5.jpg" target="_blank"> <img width="305" height="200" src="zdjecie5.jpg"/> </a> </div>
<div style="clear:both;"> </div>
<div class="tile2"> 
    <a href="zdjecie3.jpg" target="_blank"> <img width="305" height="200" src="zdjecie3.jpg"/> </a> </div>
<div class="tile2"> 
    <a href="zdjecie4.jpg" target="_blank"> <img width="305" height="200" src="zdjecie4.jpg"/> </a> </div>
<div style="clear:both;"> </div>

<script>

    var links = document.getElementsByTagName('a');

    for ( let x = 0; x < links.length; x++ ) {

        links[x].addEventListener('click',function(e) {
            
            e.preventDefault();

            window.open(links[x].href, "_blank", "width=800,height=600", true)

        })

    }

</script>
</body>
</html>