Hey,
Methode 1:
Nutzung einer Bildergalerie, wie z.b. Highslide (kann ich sehr empfehlen).
Methode 2:
Du führst, bei einem click auf das Bild, CSS aus, welches du dann mittels javascript hinzufügst.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Bilder in original Größe zeigen</title>
<meta charset="utf-8">
<script>
window.onload = function(){
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var img4 = document.getElementById("img4");
var img5 = document.getElementById("img5");
img1.addEventListener("mouseover", zoom1);
img2.addEventListener("mouseover", zoom2);
img3.addEventListener("mouseover", zoom3);
img4.addEventListener("mouseover", zoom4);
img5.addEventListener("mouseover", zoom5);
img1.addEventListener("mouseout", zoombackward1);
img2.addEventListener("mouseout", zoombackward2);
img3.addEventListener("mouseout", zoombackward3);
img4.addEventListener("mouseout", zoombackward4);
img5.addEventListener("mouseout", zoombackward5);
function zoom1(){
var img1 = document.getElementById("img1");
img1.classList.add("zoom");
}
function zoom2(){
var img2 = document.getElementById("img2");
img2.classList.add("zoom");
}
function zoom3(){
var img3 = document.getElementById("img3");
img3.classList.add("zoom");
}
function zoom4(){
var img4 = document.getElementById("img4");
img4.classList.add("zoom");
}
function zoom5(){
var img5 = document.getElementById("img5");
img5.classList.add("zoom");
}
function zoombackward1(){
var img1 = document.getElementById("img1");
img1.classList.remove("zoom");
}
function zoombackward2(){
var img2 = document.getElementById("img2");
img2.classList.remove("zoom");
}
function zoombackward3(){
var img3 = document.getElementById("img3");
img3.classList.remove("zoom");
}
function zoombackward4(){
var img4 = document.getElementById("img4");
img4.classList.remove("zoom");
}
function zoombackward5(){
var img5 = document.getElementById("img5");
img5.classList.remove("zoom");
}
}
</script>
<style>
section{
margin-top: 100px;
margin-left: 20%;
}
img.images{
width: 300px;
height: 150px;
border: 2px solid black;
margin-right: 10%;
margin-bottom: 5%;
}
.images:hover{
cursor: pointer;
}
.zoom{
transform: scale(2,2);
}
</style>
</head>
<body>
<section>
<img class='images' id='img1' src="test1.png">
<img class='images' id='img2' src="test2.png">
<img class='images' id='img3' src="test3.png">
<img class='images' id='img4' src="test4.png">
<img class='images' id='img5' src="test5.png">
</section>
</body>
</html>
Alles anzeigen
Mal ne Frage dazu:
Wenn ich es jetzt mit dem click-Event programmiere, dann habe ich doch das Problem, dass ich nicht nochmal ein click Event auf die selben Elemente registrieren kann, da ja die Funktion genau dort greift wenn man auf das Element klickt. Und dann geschieht nix, weil entweder beide funktionen aufgerufen werden oder es ein Fehler gibt.
Wie macht ihr es denn, wenn die Bilder bei einem Click zoomen sollen und nach dem zoomen, bei nem weiteren Click auf die Bilder, dass diese wieder zurückzoomen ?