Garavani
Mitglied
Registriert: 13.05.2012
Beiträge: 4
|
|
Hallo Javascript Experten!
Habe da (als Einsteiger) ein Problem.
Folgender Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ffffff;
}
* {
padding-left:6px;
padding-right:6px;
}
.fit {
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin-left:auto;
margin-right:auto;
}
img
{ border-style: none;
}
a:focus {
outline: 0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height()
{
var wh = $(window).height();
$('gy').attr('style', 'height:' + wh + 'px;'); /// statt 'gy’ stand hier mal ‘body’ - damit geht es aber nicht mehr //
}
$(document).ready(function() {
set_body_height();
$(window).bind('resize', function() { set_body_height(); });
});
</script>
</head>
<body>
<div id="g" style="z-index: 1; cursor:pointer;" onclick="$('#g').fadeOut(900, 'linear')">
<img id="the_pic" class="center fit" src="images/Memoir_g.gif">
</div>
<div id="y" style="z-index: 2;">
<img id="the_pic_2" class="center fit" src="images/Memoir_y.gif">
</div>
</body>
</html>
Den oberen Teil (der dafür sorgt, dass mein Bild "the_pic" und "the_pic_2" sich im Browserfenster zentriert automatisch an die Fenstergröße anpasst)
funktioniert blendend. Nun erschwere ich das ganze aber, indem ich möchte dass sich Bilder „ausblendend“ abwechseln.
Das muss ich es zunächst schaffen, dass:
1) Die Bilder exakt übereinander platziert sind.
Dabei kann ich den style postion:absolute nicht verwenden, da er die obere Funktion ausser Kraft setzt.
2) Das obenliegende Bild ausfadet auf Mausklick und das darunter liegende gleichzeitig sichtbar wird.
Das mit dem Fade habe ich auch hinbekommen (obgleich mit einem obskuren div Konstrukt, bei dem Ihr Euch vermutlich die Hände über dem Kopf zusammenschlagt;-)
nur das mit dem z-index hat nicht geklappt. :-(
Das obere Bild blendet zwar aus, das untere wird dann aber erst nach oben geschoben, wenn das erste komplett verschwunden ist.
Also FAST geschafft, aber eben nur fast.
Jetzt hab ich erfolglos 1000 Sachen ausprobiert.
Der code oben ist das beste was ich erreicht habe.
Wo liegen meine Fehler?
Könnt Ihr mir Tipps geben?
Wäre Euch sehr sehr dankbar
Grüß
Garavani
|
|
| 13.05.2012 18:37:34 |
|
