slideshow: Fomatierungsproblem und weitere Fragen

lyzarr · 04.09.2010

Hallo Allerseits!

Ich bin auf der Suche nach einer Lösung für einen automatischen Bilderwechsel (slideshow), im Idealfall inklusive Überblendung - wobei das dann wohl doch zu komplex ist.

Eine gifs-Animation fällt aufgrund der geringen Farbtiefe weg.

Nun habe ich ein java-script gefunden, welches grundsätzlich wie gewünscht funktioniert. Zuvor aber meine ersten Fragen:

1.) Ist es heutzutage noch ratsam java-scripts zu benutzen, oder sollte man wenn möglich nicht lieber nach anderen Lösungen Ausschau halten ? (z.B. weil häufig aus Sicherheitsgründen bei den Nutzern deaktiviert.)

2.) Kann mir Jemand eine "bessere" Variante statt java-script nennen ?

Falls dem nicht so ist, jetzt zu meinem Problem mit dem script.
(Hier die Testversion)

Der eigentliche Aufruf des scripts folgt an einer beliebigen Stelle mittels

Code:

<div id=Bild></div>

nun möchte ich aber auf die Position (margin) und Erscheinung (padding + background-image für Rahmen) Einfluß nehmen.
Bei einem einfachen Bild erziele ich das mit z.B.

Code:

<img id="foto" src="start_01.jpg" />

Also mit "id="foto", welches auf die entsprechenden Einstellungen in der css verweist.

3.) Wie bekomme ich die beiden, den Aufruf <div id=Bild></div> und id="foto" zusammen ?

Hier die relevanten code-Teile:

html:

HTML:

<script language="JavaScript" type="text/JavaScript">
var bilder = new Array();
bilder[0] = "start_01.jpg";
bilder[1] = "start_02.jpg";
bilder[2] = "start_03.jpg";
var timer = 3000; <!--Millisekunden-->
var arraylaenge = bilder.length;
var index = Math.floor(Math.random() * arraylaenge);
var Bildstring = '<img src="' + bilder[index] + '">';
function Bildwechsel () {
if (index == arraylaenge-1) {
index = 0;
} else {
index++;
}
Bildstring = '<img src="' + bilder[index] + '">';
document.all.Bild.innerHTML = Bildstring;
setTimeout("Bildwechsel()", timer);
}
function Bildanzeige () {
document.all.Bild.innerHTML = Bildstring;
Bildwechsel();
}
</script>
 
 
<body onLoad="Bildanzeige()">
 
 
 <div id="pictures">
<div id=Bild></div>
</div>

css:

HTML:

#pictures{  
width: 260px; 
height: 400px;
float:right;
margin-left: 5px;
margin-top: 64px;
text-align: center;  
color:#000000;
/* background-color:#A20D1B; */
border: dashed 1px #FFF;
}
 
#foto {
background: url(images/photo_frame_01.png) no-repeat left bottom;
margin-top: 80px;
padding: 8px 15px 17px 15px;
border: #666 0px solid;
border-left:none;
border-right:none;
border-bottom:none;
}

Vielen Dank schonmal im Voraus für Eure Mühe. Gruß,

Lyzarr

sokie · 04.09.2010

AW: slideshow: Fomatierungsproblem und weitere Fragen

im Moment ist Javascript für zeitgesteuerte Bildwechsel wohl erste wahl, was die akzeptanz durch die Benutzer des Internets angeht. Es gibt also keine wirkliche Alternative.
Dei Sprache ist für mich ein bisschen schwierig, du müsstest mal erklären, was du mit "aufruf" meinst.
Im body wird die funktion Bildanzeige() "aufgerufen".

das Bild lässt sich per "#Bild img" eindeutig selektieren um per css formatiert und positioniert werden zu können.

HTML:

#Bild img{ /* css-regeln */ }

sollte jedes Bild bei Wechseln seinen eingenen css-Selektor bekommen müssen, weil jedes Bild vielleicht unterschiedlich positioniert werden soll, hast du die Möglichkeit das einfach in deinem "Bildstring" mit zu berücksichtigen, indem du dort auch eine wechselnde id mitgibst:

Code:

Bildstring = '[COLOR=#800080]<img src=[COLOR=#0000ff]"' + bilder[index] + '" id="bild' + index +'"[/COLOR]>[/COLOR]';

so könnte jedes Bild eine eigene Id bekommen (wird aber sicher nicht notwendig sein)

lyzarr · 04.09.2010

AW: slideshow: Fomatierungsproblem und weitere Fragen

Vielen Dank, Sokie.

So funktioniert es - großartig!

Sorry, daß ich mich so mißverständlich ausgedrückt habe, aber Du hast es ja richtig zu deuten gewußt. Ich wußte tatsächlich einfach nicht, wie ich formal korrekt per css die Eigenschaften von "Bild" ändern kann.

Daß jedes Bild seinen eigenen css-selektor bekommt ist nicht notwendig, aber dennoch vielen Dank für die Erläuterung, gut zu wissen wie das funktioniert.

Nochmals ein großes Dankeschön. Gruß,

Lyzarr