Functie om een afbeelding weer te geven
Ik heb een functie nodig die een afbeelding weergeeft zoals HTML zou doen met de instructie "<img class='full' src='foto.jpg'>".
Hoe moet ik de volgende code completeren om dit te bereiken?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
img.full {
position: fixed;
object-fit: contain;
width: calc(100% - 80px);
height: 100%;
}
</style>
<script>
function picture($pic)
{
}
</script>
<?php
$file="foto.jpg";
echo "<button onclick='picture($file)'>Click</button>";
?>
img.full {
position: fixed;
object-fit: contain;
width: calc(100% - 80px);
height: 100%;
}
</style>
<script>
function picture($pic)
{
}
</script>
<?php
$file="foto.jpg";
echo "<button onclick='picture($file)'>Click</button>";
?>
Kijk ook eens naar dit:
https://www.w3schools.com/jsref/prop_html_style.asp
https://www.w3schools.com/jsref/prop_html_classname.asp
en de mogelijkheden van de DOM.
Gewijzigd op 08/03/2023 16:11:32 door - Ariën -
Dus probeer eens wat, zou ik zeggen. Als je de voorbeelden bekijkt heb je al een gelijksoortig voorbeeld.
Gewijzigd op 08/03/2023 16:53:23 door - Ariën -
Dan maar zelf iets bedacht.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script>
function picture(picture) {
afb = document.getElementById("picture");
afb.src = picture;
}
</script>
<button onclick='picture("tekening.svg")'>Click</button>
<img id="picture" src="" style="width: 300px; height:300px;" />
function picture(picture) {
afb = document.getElementById("picture");
afb.src = picture;
}
</script>
<button onclick='picture("tekening.svg")'>Click</button>
<img id="picture" src="" style="width: 300px; height:300px;" />
Gewijzigd op 08/03/2023 16:55:10 door Adoptive Solution
Maar toch een kleine vraag: Aan het begin verschijnt er een frame. Waarom en hoe kom ik er vanaf?
PS: Ik zal de functie gebruiken in een fotogalerij.
je kan hem onzichtbaar maken:
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
Gewijzigd op 08/03/2023 17:43:15 door - Ariën -
Code (php)
1
<img class='full' id="picture" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
Code (php)
1
2
2
<style>img[src=""] { display: none }</style>
<img src="" alt="afbeelding" />
<img src="" alt="afbeelding" />
Code (php)
1
<body onload="picture('foto.php')">
Het is me echter niet gelukt om een ??animatie met keyframes toe te voegen aan de style van de foto.
Code (php)
1
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
https://blog.hubspot.com/website/css-fade-in
Zoek naar het kopje "Fade-in Image Transition Using CSS" en daar staat precies wat jij wilt.