Dzień dobry,
chciałem poprosić o pomoc w nakierowaniu jak rozwiązać mój problem. Chciałbym aby link przekierowujący w obrazie na komórce i tablecie otwierały się poprzez dwuklik, a na komputerze przez jedno kliknięcie. Szukałem w internecie i znalazłem informacje o "The ondblclick Event"
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The ondblclick Event</h2>
<p ondblclick="myFunction()">Double-click this paragraph to trigger a function.</p>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML += "Hello World ";
}
</script>
</body>
</html>
Natomiast po dodaniu komendy ondblclick jest to także na komputerze i komórce. Doczytałem też że należałoby użyć "Touch event". Niestety nie znalazłem tam dwukliku. Wydaje mi się że trzeba to połączyć. Czy mógłby ktoś podpowiedzieć czy myślę w dobrą stronę. Może mała pomoc jak dodać ten 2klik tylko na komórkę tak by po kliknięciu na obraz na komórce wyświetlał się napis tak jak pojawia się na komputerze po najechaniu myszką, a dopiero po następnym kliknięciu otwierała się podstrona, do której przekierowuje link w obrazku?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.container {
position: relative;
overflow: hidden;
border-radius: 25px;
}
.image {
display: block;
width: 100%;
height: auto;
transition: 0.7s ease;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #211794;
transition: 1.2s ease;
}
.container:hover .overlay {
opacity: 0.95;
}
.text {
font-family: 'Lato', sans-serif;
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.container:hover > img.zoom {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="grid">
<a href="https://picsum.photos/500?random=1">
<div class="container">
<img src="https://picsum.photos/500?random=1" alt="Strony www" class="image zoom">
<div class="overlay">
<div class="text">Strony www</div>
</div>
</div>
</a>
<a href="https://picsum.photos/500?random=2">
<div class="container">
<img src="https://picsum.photos/500?random=2" alt="Identyfikacja wizualna" class="image zoom">
<div class="overlay">
<div class="text">Identyfikacja wizualna</div>
</div>
</div>
</a>
<a href="https://picsum.photos/500?random=3">
<div class="container">
<img src="https://picsum.photos/500?random=3" alt="Inne projekty" class="image zoom">
<div class="overlay">
<div class="text">Inne projekty</div>
</div>
</div>
</a>
</div>
</body>
</html>
Z góry dziękuję za pomoc.
