Bild in gleichem Tab öffnen?
Wie kann ich ein Bild im gleichen Tab öffnen? Wenn ich auf das Bild klicke, soll es größer angezeigt werden (also über den ganzen Bildschirm), jedoch nicht in einem neuen Tab. Wie mache ich das?
1 Antwort
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
programmieren, CSS, Code
a) Du könntest auf das Originalbild verlinken.
<a href="URL to your origin image ..."><img alt="Show image" src="URL to your image ..."></a>
Wie der Nutzer den Link allerdings öffnet, liegt außerhalb deines Einflussbereichs. Er könnte den Link auch explizit in einem neuen Tab öffnen lassen oder eine entsprechende Browsereinstellung vorgenommen haben, die Links immer in einem neuen Fenster öffnet.
b) Du könntest ein Popup öffnen, welches sich über den gesamten Bildschirm spannt und dein vergrößertes Bild enthält.
Ein einfach gehaltenes Beispiel:
<!doctype html>
<head>
<title>Example</title>
<style>
[data-popup] {
background: none;
border: none;
cursor: pointer;
}
[data-popup] img,
.popup img {
height: auto;
width: 100%;
}
.hidden {
display: none;
}
.popup {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<button aria-describedby="popup-id" data-popup="popup-id">
<img alt="Show image" height="..." src="URL of your image ..." width="...">
</button>
<div class="hidden popup" id="popup-id">
<img alt="Some image description ..." src="URL of your large image ...">
</div>
<script>
const popupButton = document.querySelector("[data-popup]");
popupButton.addEventListener("click", evt => {
const popupId = evt.currentTarget.dataset.popup;
const popup = document.querySelector(`#${popupId}`);
popup.classList.remove("hidden");
});
</script>
</body>