Anhang anzeigen index.html.txt Anhang anzeigen style.css.txt
Mein Problem ist folgendes:
Wenn Javascript jetzt das Bild verschwinden lässt, wandert der Text nach unten, weil das Bild ja breiter als hoch ist und ich height auf auto gestellt habe und deswegen die Erhöhung des Wertes von margin-top und -bottom (5% + 5% = 10%) größer als die Verringerung des Wertes von height (~7) ist.
Anschließend habe ich versucht, die Werte für alle Außenabstände einzeln zu setzen, was aber nicht geklappt hat.
Hat jemand einen Vorschlag zur Lösung?
Danke im voraus,
Siggi05
- - - Aktualisiert - - -
Sorry, bin neu hier. Hier noch einmal das ganze:
Und der css-code gleich noch mit dran:
Mein Problem ist folgendes:
Wenn Javascript jetzt das Bild verschwinden lässt, wandert der Text nach unten, weil das Bild ja breiter als hoch ist und ich height auf auto gestellt habe und deswegen die Erhöhung des Wertes von margin-top und -bottom (5% + 5% = 10%) größer als die Verringerung des Wertes von height (~7) ist.
Anschließend habe ich versucht, die Werte für alle Außenabstände einzeln zu setzen, was aber nicht geklappt hat.
Hat jemand einen Vorschlag zur Lösung?
Danke im voraus,
Siggi05
- - - Aktualisiert - - -
Sorry, bin neu hier. Hier noch einmal das ganze:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<link rel = "stylesheet" href = "style.css"/>
</head>
<body bgcolor = "#111111">
<img id = "pictures" src = "medien/1.jpg"/>
<script type = "text/javascript">
var elem = document.getElementById("pictures");
var inter = setInterval(Warten, 10000);
var ani;
var ausblenden = true;
var zaehler = 0;
var opacity = 1;
var width = 90;
var margin = 5;
var bildnr = 1;
var bildprop = elem.style.width / elem.style.height;
function Warten()
{
clearInterval(inter);
inter = setInterval(Aktion, 200);
ani = setInterval(animation, 10);
}
function Aktion()
{
clearInterval(ani);
zaehler = 0;
if(ausblenden == true)
{
ausblenden = false;
clearInterval(inter);
elem.style.opacity = 0;
elem.style.margin = 10 + "%";
elem.style.width = 80 + "%";
if(bildnr < 9)
{
bildnr++;
}
else
{
bildnr = 1;
}
elem.src = "medien/" + bildnr + ".jpg";
inter = setInterval(Warten, 200);
}
else
{
ausblenden = true;
clearInterval(inter);
elem.style.opacity = 1;
elem.style.margin = 5 + "%";
elem.style.width = 90 + "%";
inter = setInterval(Warten, 10000);
}
}
function animation()
{
if(ausblenden == true)
{
opacity = -zaehler / 20 + 1;
margin = 5 + zaehler * 5 / 20;
width = 90 - zaehler / 2;
elem.style.opacity = opacity;
elem.style.margin = margin + "%";
elem.style.width = width + "%";
}
else
{
opacity = zaehler / 20;
margin = 10 - zaehler * 5 / 20;
width = 80 + zaehler / 2;
elem.style.opacity = opacity;
elem.style.margin = margin + "%";
elem.style.width = width + "%";
}
zaehler++;
}
</script>
<div id = "text">Test.</div>
</body>
</html>
Code:
#pictures
{
border-radius: 20px;
background-color: red;
padding: 20px;
box-sizing: border-box;
float: left;
clear: both;
margin: 5%;
width: 90%;
height: auto;
}
#text
{
font-family: '4StarFace';
text-align: center;
font-size: 50px;
margin: 10px;
}
