Bilder wechseln
- Themenstarter aKraus
- Beginndatum
t, allerdings finde ich nichts speziell für meinen Anwendungsfall:FipsTheThief
Erfahrenes Mitglied
Also so richtig gegoogelt hast da wohl nun nicht 
Ich hab ca 2 min gesucht da hatte ich alles was ich brauchte.
ab CSS 3.0 (oder so) geht im Firefox opacity:0.0 - 1.0 oder aber -moz-opacity bei mir wars das normale opacity nun.
Im IE filter
pacity(alpha=0-100)
Im Opera gings alles gleich mal gar nicht.
kleiner Testlauf mit JavaScript:
Das funktioniert soweit im IE und Firefox nun. Im Opera gar nicht da der mit dem opacity nich klar kam. Die anderen Browser hab ich nicht da.
Das ganze läuft so ab. 2 Layer die übereinander liegen. der 1. Layer layer1 hat den z-index 2 also oben der andere z-index: 1 unterer layer.Beide hab ich in einen Array abgelegt , somit kann ich dann mittels der Array Elemente auf diese Layer zugreifen bzw deren ID Namen.
Der obere Layer fängt an unsichtbar zu werden in dem die Opacity richtung 0 bewegt wird , wenn opacity nun 0 ist dann wird viisibilty auf false gesetzt und dann wartet das die Array Werte werden nun getauscht und dann beginnt das ganze in 5 sek erneut nur das nun Layer 2 vorne im Array liegt.
2. in tabellen form würde ich das nun nicht machen und wenn dann haust einfach nen DIV Layer in die Tabelle rein.
Solltest Bilder machen wollen , dann würde ich einfach ein Array füllen mit den bildern und die Hintergrund Bilder dann einfach immer austauschen.
Somit sollte der Effekt den Du haben willst erreicht werden , dafür war ich nun aber zu faul da es ja nur ein Test war wie man das umsetzen kann.
Weiterführend Links dazu :
http://www.google.de/search?hl=de&q=opacity+div+layer+&btnG=Google-Suche&meta=
Irgendwo gabs noch nen komplettes Beispiel von selfhtml wo direkt ne spezielle Klasse vom IE für JavaScript genutzt wurde. Finde sie nun nicht so auf die schnelle.Aber das war genau das was Du wolltest.
//edit
So ich war nochmal so frei und hab es komplett gemacht da ich es selber noch wo einsetzen kann wie mir dann einfiel.
Geändert hat sich nur noch was bei den HTML Code und zwar bei den layer controlPanel wurde noch ein p Tag eingefügt der mir dann lediglich die Ausgabe liefert ob die Slideshow gestartet wurde oder nicht.
Ich hab ca 2 min gesucht da hatte ich alles was ich brauchte.ab CSS 3.0 (oder so) geht im Firefox opacity:0.0 - 1.0 oder aber -moz-opacity bei mir wars das normale opacity nun.
Im IE filter
pacity(alpha=0-100)Im Opera gings alles gleich mal gar nicht.
kleiner Testlauf mit JavaScript:
HTML:
<html>
<head>
<style type="text/css">
#layer1{
position:absolute;
background-color:#0000FF;
left:200px;
top:200px;
height:200px;
width:200px;
z-index:2;
}
#layer2{
position:absolute;
background-color:#FF0000;
left:200px;
top:200px;
height:200px;
width:200px;
z-index:1;
}
#controlPanel {
position:absolute;
top:200px;
left:100px;
}
#controlPanel button{
width:60px;
display:block;
background-color:transparent;
border:1px solid #000000;
margin-bottom:10px;
}
</style>
<script type="text/javascript">
var visible = true;
var layers = new Array();
var browser;
function changeLayerOrder(){
arrayBuffer = new Array();
for(i = (layers.length-1);i > -1;i--){
arrayBuffer[arrayBuffer.length] = layers[i];
}
return arrayBuffer;
}
function setLayerTransparency() {
try {
with(document.getElementById(layers[0])){
if(browser == "moz") {
style.opacity = (style.opacity*100-5)/100;
visible = (style.opacity == 0)?false:true;
} else if (browser == "ie") {
filters[0].opacity = filters[0].opacity-5;
visible = (filters[0].opacity == 0)?false:true;
} else {
return 1;
}
}
with(document.getElementById(layers[1])){
if(browser == "moz") {
style.opacity = (style.opacity*100+5)/100;
} else if(browser == "ie") {
filters[0].opacity = filters[0].opacity+5;
} else {
return 1;
}
}
if(visible == false) {
layers = changeLayerOrder();
setTimeout("setLayerTransparency()",5000);
} else {
setTimeout("setLayerTransparency()",50);
}
} catch (e) {
}
}
function checkBrowser(){
switch(navigator.appName) {
case "Microsoft Internet Explorer":
browser = "ie";
break;
case "Netscape":
browser = "moz";
break;
default:
browser = navigator.appMame;
break;
}
return 1;
}
function init(){
layers[0] = "layer1";
layers[1] = "layer2";
checkBrowser();
setLayerTransparency();
}
window.onload = init;
</script>
</head>
<body>
<div id="controlPanel">
<button id="run">run</button>
<button id="stop">stop</button>
</div>
<div id="layer1" style="opacity:1.0;filters:opacity(alpha=100);">
klaus dieter
</div>
<div id="layer2" style="opacity:.0;filters:opacity(alpha=0);">
klaus peter
</div>
</body>
</html>Das funktioniert soweit im IE und Firefox nun. Im Opera gar nicht da der mit dem opacity nich klar kam. Die anderen Browser hab ich nicht da.
Das ganze läuft so ab. 2 Layer die übereinander liegen. der 1. Layer layer1 hat den z-index 2 also oben der andere z-index: 1 unterer layer.Beide hab ich in einen Array abgelegt , somit kann ich dann mittels der Array Elemente auf diese Layer zugreifen bzw deren ID Namen.
Der obere Layer fängt an unsichtbar zu werden in dem die Opacity richtung 0 bewegt wird , wenn opacity nun 0 ist dann wird viisibilty auf false gesetzt und dann wartet das die Array Werte werden nun getauscht und dann beginnt das ganze in 5 sek erneut nur das nun Layer 2 vorne im Array liegt.
2. in tabellen form würde ich das nun nicht machen und wenn dann haust einfach nen DIV Layer in die Tabelle rein.
Solltest Bilder machen wollen , dann würde ich einfach ein Array füllen mit den bildern und die Hintergrund Bilder dann einfach immer austauschen.
Somit sollte der Effekt den Du haben willst erreicht werden , dafür war ich nun aber zu faul da es ja nur ein Test war wie man das umsetzen kann.
Weiterführend Links dazu :
http://www.google.de/search?hl=de&q=opacity+div+layer+&btnG=Google-Suche&meta=
Irgendwo gabs noch nen komplettes Beispiel von selfhtml wo direkt ne spezielle Klasse vom IE für JavaScript genutzt wurde. Finde sie nun nicht so auf die schnelle.Aber das war genau das was Du wolltest.
//edit
So ich war nochmal so frei und hab es komplett gemacht da ich es selber noch wo einsetzen kann wie mir dann einfiel.
Geändert hat sich nur noch was bei den HTML Code und zwar bei den layer controlPanel wurde noch ein p Tag eingefügt der mir dann lediglich die Ausgabe liefert ob die Slideshow gestartet wurde oder nicht.
Code:
var visible = true;
var layers = new Array();
var browser;
var runable = false;
var isRun;
var loaded_images = new Array();
var actually_element;
/**
Layer wechseln
*/
function changeLayerOrder() {
arrayBuffer = new Array();
for(i = (layers.length-1);i > -1;i--) {
arrayBuffer[arrayBuffer.length] = layers[i];
}
return arrayBuffer;
}
/**
Hintergrundbild des 2. Layers tauschen
@param String
*/
function changeLayerImages(id) {
with(document.getElementById(id)) {
if(actually_element == loaded_images.length) {
style.backgroundImage = "url("+loaded_images[(actually_element = 0)].src+")";
} else {
style.backgroundImage = "url("+loaded_images[actually_element].src+")";
actually_element++;
}
}
}
/**
aktuelle Nachricht setzen gestartet oder gestoppt
@param String
*/
function setRunMessage(action) {
switch (action) {
case "run":
if(isRun.firstChild && isRun.firstChild.nodeValue != "Slideshow läuft")
isRun.removeChild(isRun.firstChild);
if(!isRun.firstChild)
isRun.appendChild(document.createTextNode("Slideshow läuft"));
break;
case "stop":
if(isRun.firstChild && isRun.firstChild.nodeValue != "Slideshow gestoppt")
isRun.removeChild(isRun.firstChild);
if(!isRun.firstChild)
isRun.appendChild(document.createTextNode("Slideshow gestoppt"));
break;
}
}
/**
Event Button Slideshow gestartet
*/
function start_slideshow() {
runable = true;
//setRunMessage("run"); nachricht setzen gestartet
//layer transparent machen
setLayerTransparency();
}
/**
Event Button Sldeshow gestoppt
*/
function stop_slideshow() {
runable = false;
//setRunMessage("stop"); nachricht setzen gestoppt
//layer transparent machen
setLayerTransparency();
}
/**
Layer Transparenz einstellen
*/
function setLayerTransparency() {
if(runable != true) return 0;
try {
with(document.getElementById(layers[0])){
if(browser == "moz") {
style.opacity = (style.opacity*100-5)/100;
visible = (style.opacity <= 0)?false:true;
} else if (browser == "ie") {
filters[0].opacity -= 5;
visible = (filters[0].opacity <= 0)?false:true;
} else {
return 1;
}
}
with(document.getElementById(layers[1])){
if(browser == "moz") {
style.opacity = (style.opacity*100+5)/100;
} else if (browser == "ie") {
filters[0].opacity += 5;
} else {
return 1;
}
}
if(visible == false) {
layers = changeLayerOrder();
changeLayerImages(layers[1]);
setTimeout("setLayerTransparency()",1000);
} else {
setTimeout("setLayerTransparency()",80);
}
} catch (e) {
alert(e);
}
}
/**
Browser prüfen
*/
function checkBrowser(){
switch(navigator.appName) {
case "Microsoft Internet Explorer":
browser = "ie";
break;
case "Netscape":
browser = "moz";
break;
default:
browser = navigator.appMame;
break;
}
return 1;
}
/**
Bilder laden
*/
function load_images(){
loaded_images[0] = new Image();
loaded_images[0].src = "Thumbs/0010_thumb.jpg";
loaded_images[1] = new Image();
loaded_images[1].src = "Thumbs/004_thumb.jpg";
loaded_images[2] = new Image();
loaded_images[2].src = "Thumbs/03_thumb.jpg";
loaded_images[3] = new Image();
loaded_images[3].src = "Thumbs/05_thumb.jpg";
loaded_images[4] = new Image();
loaded_images[4].src = "Thumbs/08_thumb.jpg";
loaded_images[5] = new Image();
loaded_images[5].src = "Thumbs/10_thumb.jpg";
loaded_images[6] = new Image();
loaded_images[6].src = "Thumbs/12_thumb.jpg";
loaded_images[7] = new Image();
loaded_images[7].src = "Thumbs/12_2_thumb.jpg";
//die ersten 2 Bilder setzen
document.getElementById(layers[0]).style.backgroundImage = "url("+loaded_images[0].src+")";
document.getElementById(layers[1]).style.backgroundImage = "url("+loaded_images[1].src+")";
actually_element = 2;
}
function init(){
layers[0] = "layer1";
layers[1] = "layer2";
//button Events setzen mal
document.getElementById("run").onclick = start_slideshow;
document.getElementById("stop").onclick = stop_slideshow;
//bilder laden
load_images();
//browser überprüfen
checkBrowser();
/*text Layer finden
with(document.getElementById("controlPanel")) {
for(i = 0 ; i < childNodes.length;i++){
if(childNodes[i].tagName == "P"){
isRun = document.getElementById("controlPanel").childNodes[i];
break;
}
}
} */
}
window.onload = init;
