Wat ik graag zou willen:
twee foto’s, onder elkaar, links op het scherm, 10% links, 1e afbeelding 9% onder de top, 2e afbeelding er onder.
Bij een Mouse0ver (of Hoover) de betreffende afbeelding vergroten tot 70% schermbreedte, 10% links, 9% onder de top, ongeacht of het om de 1e of 2e afbeelding gaat.
Dat lukt met de 1e afbeelding.
De 2e afbeelding echter verschijnt ter hoogte van de 2e afbeelding, waardoor maar de helft zichtbaar is, omdat de afbeelding van het scherm afloopt.
Hierbij de gebruikte code.
Hoe kan ik dit oplossen?
twee foto’s, onder elkaar, links op het scherm, 10% links, 1e afbeelding 9% onder de top, 2e afbeelding er onder.
Bij een Mouse0ver (of Hoover) de betreffende afbeelding vergroten tot 70% schermbreedte, 10% links, 9% onder de top, ongeacht of het om de 1e of 2e afbeelding gaat.
Dat lukt met de 1e afbeelding.
De 2e afbeelding echter verschijnt ter hoogte van de 2e afbeelding, waardoor maar de helft zichtbaar is, omdat de afbeelding van het scherm afloopt.
Hierbij de gebruikte code.
Hoe kan ik dit oplossen?
HTML:
<!DOCTYPE HTML>
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MousOver</title>
<STYLE TYPE="text/css">
.pict {
max-height: 70%;
}
div#foto {
position: absolute;
left: 10%;
top: 9%;
width: 20%;
}
div.img img:hover {
Position: absolute;
top: 9%;
}
</STYLE>
</head>
<body >
<div id = 'foto''>
<img src='afb1.jpg' style='width: 60%; padding-bottom: 5px; border-ratius: 15px;' onmouseover='bigImg(this)' onmouseout='normalImg(this)'><br>
<img src='afb2.jpg' style='width: 60%; padding-bottom: 5px; border-ratius: 15px;' onmouseover='bigImg(this)' onmouseout='normalImg(this)'><br>
<script>
function bigImg(x) {
x.style.width = "250%";
x.style.top = "50px";
}
function normalImg(x) {
x.style.width = "60%";
}
</script>
</body></html>
