javascript diashow und css

mephista · 07.04.2010

Hallo...

wenn man eine javascript diashow einbauen möchte (css und div) worauf muss ich da achten?

Ich habe früher mal eine gebastelt, aber noch im tabellenformat.
Da habe ich es so geschrieben und es hat funktioniert.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script language="JavaScript" src="diashow.js" type="text/javascript"></script>
</head>

<body>
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><script type="text/javascript">
//new fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder)
new fadeshow(fadeimages, 400, 400, 0, 2000, 1)
</script></td>
</tr>
</table>
</td>
</tr>
</table>
</body>

Jetzt möchte es ich jedoch in eine Seite einbauen, die mit CSS erstellt wurde.

Im headbereich schaut es wieder so aus:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script language="JavaScript" src="diashow.js" type="text/javascript"></script>
</head>

Aber wohin kommt nun das andere script?

Das ist mein DIV-Container.
Mit 150 px breite und 550 px höhe, mit 8 kleinen Logos drinnen (150 x 60, margin bottom 10)... Jedes kleine Logo soll eine Diashow von 4 Bilder sein (diashow.js) ist schon geschrieben)

<div id="index_right"><img src="logos/rot.png" width="150" height="60" class="logo_klein"><img src="logos/orange.png" width="150" height="60" class="logo_klein"><img src="logos/gruen.png" width="150" height="60" class="logo_klein"><img src="logos/hellblau.png" width="150" height="60" class="logo_klein"><img src="logos/blau.png" width="150" height="60" class="logo_klein"><img src="logos/rot.png" width="150" height="60" class="logo_klein"><img src="logos/orange.png" width="150" height="60" class="logo_klein"><img src="logos/gruen.png" width="150" height="60" class="logo_klein"></div>

Wohin muss ich nun das andere Script setzen?
---> <script type="text/javascript">
//new fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder)
new fadeshow(fadeimages, 400, 400, 0, 2000, 1)
</script>

Recht herzlichen Dank und lg mephista

Rum0 · 07.04.2010

AW: javascript diashow und css

Bitte setz deinen Code erstmal in die dafür vorgesehenen HTML Tags (also hier im Forum zu besseren Ansicht). Und füge Zeilenumbüche ein.
Diesen 2. JavaScript Code musst du halt da reinpacken, wo die Diashow dann erscheinen soll.
Ohne die diashow.js können wir wohl schwerr sagen, wie du das verwirklichen kannst.
Ich mein in dem Beispiel mit dem tabellenbasierten layout, kommen gar keine Bilder vor, also werden die wohl in der .js Datei definiert sein.
Du kannst auch nen ganz anderes Script nehmen, das vorgefertigt ist, wie z.B. LightBox, siehe

Bitte kostenlos registrieren, damit du die Links siehst.

Das macht genau das, was du willst.
Rum0

mephista · 07.04.2010

AW: javascript diashow und css

Hallo Rum0,

der Code ist doch in HTML-Tags geschrieben, oder verstehe ich jetzt was falsch?

>>>2. JavaScript Code musst du halt da reinpacken, wo die Diashow dann erscheinen soll.

I h habe den Code hinter den <div id="index_right"> gesetzt.
Jedoch hat es mir dann das ganze layout verschoben und in der vorschau hat auch nichts funktioniert....

Deswegen ja auch meine Frage, worauf ich achten muss bzw. ob es spezeill platziert werddn muss...

hmmm, wie kann ich denn die diashow.js angehängen?

Danke

Rum0 · 07.04.2010

AW: javascript diashow und css

Ich meinte du sollst ihn hier im Forum mit den HTML Tags benutzen. ALso wenn du im erweiterten Editor bist, markierst du sämtlichn HTML Code, den du gepostet hast, und clickst dann auf das 2.symbol von links über dem textfeld. Das formatiert den Code, so dass er schöner anzusehen ist.
Wie gesagt, guck dir LightBox an.
Die Diashow.js kannst du ganz normal mit einem Texteditor öffnen, und den Inhalt auch mit dem HTML Tags hier im Forum posten.

Rum0

mephista · 07.04.2010

AW: javascript diashow und css

Achso... Sinn der ganzen Sache soll sein, dass ich für den automatischen Bildwechsel (Diashow) kein Flash integrieren muss.
Es soll keine Photogalerie oder sowas werden, sondern einfach Logos, die in einem Container definiert sind, die alle paar Sekunden wechseln...

Oder gibt es da weniger "kompliziertes" ??? *grins*

Danke mephista

Rum0 · 07.04.2010

AW: javascript diashow und css

Achso meinst du das... Ja dann brauchen wir wirklich die Diashow.js.
Oder du codest halt von Grund auf was neues.
Dabei können wir dir antürlich auch helfen.
Dazu musst du erst Mal die Bilder mit Name Tags versehen:
Also anstatt z.B.

HTML:

<img src="logos/rot.png" width="150" height="60"  class="logo_klein">

HTML:

<img src="logos/rot.png" name ="logo_1" width="150" height="60"  class="logo_klein" />

oder so. Das da oben sind übrigens die erwähnten HTML-Tags.
Mit

HTML:

document.logo_1.src =

kannst du jetzt das Bild ändern.
Im JavaScript würde ich für jedes Bild

HTML:

var image_xx = new Image();
image_xx.src = "pfad_zu/image_xx.png";

schreiben.
Dann die src zu jedem Bild in einem Array zussammenfassen mit:

HTML:

var images = new Array(image_01.src,image_02.src,image_03.src, image_xx.src);

Onload erstellst du dann einen Timer, der alle x Sekunden die Funktion changeImages aufruft, und setzt currentImage=0.

So würde es dann insgesamt bei 2 verschiedenen Bildern und nur einem Container aussehen.

HTML:

<html>
<head>
<script type="text/javascript">
var image_01 = new Image();
image_01.src = "pfad_zu/image_01.png";
var image_02 = new Image();
image_02.src = "pfad_zu/image_02.png";
var images = new Array(image_01.src,image_02.src);
var currentImage = 0;
function changeImages() {
currentImage++;
if(currentImage == images.length) {
currentImage = 0;
}
document.logo_1.src = images[0];
var timer = setTimeout('changeImages()', 60000);
//Die 60000 ist die Aktualisierungsrate in Millisekunden

}
window.onload= changeImages();
</script>
</head>
<body>
<img src="logos/rot.png" name ="logo_1" width="150" height="60"  class="logo_klein" />
</body>
</html>

Ich weiß das Script ist noch sehr unschön, und ich habe es noch nicht ausprobiert, aber eigentlich sollte es so funktioneiren.
Natürlich ist es bislang erst für einen COntainer, aber das dann auf deine 6 oder wieviele es auch immer sind, sollte nicht weiter schwer sein.
Probiers doch einfach mal aus.

Rum0

mephista · 07.04.2010

AW: javascript diashow und css

Hallo Rum0,

jetzt habe ich erst den erweiterten Editor gefunden *grins*
Danke für den Hinweis. Werds mir merken

Und auch Danke für den Quelltext. Ich werde es ausprobieren und dir dann bescheid geben!

Danke

Gruß Mephista

mephista · 08.04.2010

AW: javascript diashow und css

Hallo

Ich habe jetzt mal den Code, wie oben angezeigt eingegeben und angepasst:

Headbereich:

HTML:

<script type="text/javascript">
var image_01 = new Image();
image_01.src = "logos/banner_feuer.png";
var image_02 = new Image();
image_02.src = "logos/banner_sonne.png";
var image_03 = new Image();
image_03.src = "logos/banner_gruen.png";
var image_04 = new Image();
image_04.src = "logos/banner_wind.png";
var image_05 = new Image();
image_05.src = "logos/banner_wasser.png";
var images = new Array(image_01.src,image_02.src,image_03.src,image_04.src,image_05.src );
var currentImage = 0;
function changeImages() {
currentImage++;
if(currentImage == images.length) {
currentImage = 0;
}
document.logo_1.src = images[0];
var timer = setTimeout('changeImages()', 60000);
//Die 60000 ist die Aktualisierungsrate in Millisekunden

}
window.onload= changeImages();
</script>

Bildbereich:

HTML:

<div id="headbanner"><img src="logos/banner_feuer.png" name="logo_1"></div>

Aber irgendwie rennt das ganz nicht!
Geht das nur im IE? Soll ja dann in jedem Browser funktionieren...

Habe ich etwas falsch gemacht oder was übersehen?
*grübel*

Bitte um Hilfe!

danke

Rum0 · 08.04.2010

AW: javascript diashow und css

Natürlich. Tut mir Leid. Wie gesagt, ich hatte es nicht getestet und einen dummen kleinen Fehler gemacht.

HTML:

document.logo_1.src = images[0];

muss natürlich heißen:

HTML:

document.logo_1.src = images[currentImage];

Sonst wird das Bild immer zum ersten Bild aus dem Array "geändert". Es bleibt also gleich.
Auch das mit dem Onload hat so nicht funktioniert, ich habs hingekriegt. Ich hab den fiolgenden Code als .html gespeichert, und es hat funktioniert. In FireFox. Das Script ist aber trotzdem mit jedem Browser kompatibel, der JS unterstützt, und bei dem es auch aktiviert ist (ohne geht es aber so oder so nicht).

HTML:

<html>
<head>
<script type="text/javascript">
var image_01 = new Image();
image_01.src = "pfad_zu/image_01.JPG";
var image_02 = new Image();
image_02.src = "pfad_zu/image_02.JPG";
var images = new Array(image_01.src,image_02.src);
var currentImage = 0;
function changeImages() {
    currentImage++;
    if(currentImage == images.length) {
        currentImage = 0;
    }
    document.logo_1.src = images[currentImage];
    var timer = setTimeout('changeImages()', 1000);
    //Die 1000 ist die Aktualisierungsrate in Millisekunden
}
window.onload = changeImages;
</script>
</head>
<body>
<img src="pfad_zu/image_01.JPG" name ="logo_1" width="150" height="60"  class="logo_klein" />
</body>
</html>

Funktioniert das so bei dir auch? DU musst antürlich die Pfade zu den Bildern anpassen.
Dann kannst du das Script ja erst Mal auf deine Bilder anpassen. Wenn du dann noch Probleme hast, z.B. weil du ja mehrere Bildcontainer hast, und sie selbst nicht gelöst hast, postest du hier wieder.

Rum0

mephista · 08.04.2010

AW: javascript diashow und css

Hallo Rum0,

recht herzlichen Dank...

Mit den mehreren Containern hat es sich erledigt.
Ich habe jetzt nur mehr einen Container mit einem Bild, wo der Bildwechsel nun erfolgen soll.

Deinen Code habe ich kopiert und an die Pfade angepasst.
Sogar probeweise eine neue leere htmlseite erstellt, trotzdem will es bei mir nicht funktionieren *seufz*

Mein Quellcode:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
var image_01 = new Image();
image_01 = "bilder/logos/rot.png";
var image_02 = new Image();
image_02.src = "bilder/logos/orange.png";
var image_03 = new Image();
image_03.src = "bilder/logos/gruen.png";
var image_04 = new Image();
image_04.src = "bilder/logos/hellblau.png";
var image_05 = new Image();
image_05.src = "bilder/logos/blau.png";
var images = new Array(image_01.src,image_02.src,image_03.src,image_04.src,image_05.src );
var currentImage = 0;
function changeImages() {
    currentImage++;
    if(currentImage == images.length) {
        currentImage = 0;
    }
    document.logo_1.src = images[currentImage];
    var timer = setTimeout('changeImages()', 1000);
    //Die 1000 ist die Aktualisierungsrate in Millisekunden
}
window.onload = changeImages;
</script>
</head>

<body>
<img src="../bilder/logos/rot.png" name ="logo_1" width="150" height="60">
</body>
</html>

Kann es sein, dass es an den Dateisuffix png scheitert?
Klappt das nur mit jpg?
Oder erkennt der die Pfade wohl nicht?
Wenn ich deine Pfade lösche, kommt ja kein neu Durchsuchen...
sondern ich habe es manuell reingeschrieben...
Vielleicht liegt es ja daran?

Gruß Mephista

mephista · 08.04.2010

AW: javascript diashow und css

Hmmm, komisch das Ganze!

Jetzt habe ich die png ind gif geändert.
Und in allen Browsern (FF, Opera, Safari) nachkontrolliert, ob javascript eh aktiv ist.
(Ist es)

Und trotzdem funkt es net...

*graue Haare bekomme*

Vielleicht soll es nicht sein...

Rum0 · 08.04.2010

AW: javascript diashow und css

Deine Pfade sind falsch. Dneke ich mal so. Denn hier:

HTML:

<img src="../bilder/logos/rot.png" name ="logo_1" width="150"

hast du auf einen anderen Ordner verwiesen als hier:

HTML:

image_01 = "bilder/logos/rot.png";

Wenn alle Bilder im gleichen Ordner liegen, muss der Pfad also jedes Mal ../bilder/logos/farbe.png heißen - wenn wir davon ausgehen, dass der Pfad im Image Tag richtig angegeben is, wovon icb ausgehe, weil du den anscheinend automatisch mit Dreamweaver eingefügt hast. Das .. heißt, dass das Verzeichnis eins weiter oben liegt, siehe Es liegt weder an der Dateiendung noch am Browser.

Rum0

mephista · 08.04.2010

AW: javascript diashow und css

Mahhhh.... manchmal sieht man den Wald vor lauter Bäumen nicht!

ES FUNKTIONIERT!!!!!!!!ES FUNKTIONIERT!!!!!!!!ES FUNKTIONIERT!!!!!!!!

*mich nach Mekka werf und dann im Kreis tanz*

Und wieder ein "closed case" *grins*

Danke und ganz liebe Grüße Mephista

Tausend Dank!!!!

mephista · 08.04.2010

AW: javascript diashow und css

Arrrg... zu früh gefreut...
An sich funktioniert es.
Jedoch wird das erste Logo nicht angezeigt.
Start ist: Logo 2 --> 3 Sekunden/ Logo 3 --> 3 Sekunden/ Logo 4 --> 3 Sekunden/ Logo 5 --> 6 Sekunden/... dann wieder Logo 2 ..... endlosschleife

Das erste Logo wird somit übergangen...

Warum?

Html Code:

HTML:

<script type="text/javascript">
var image_01 = new Image();
image_01 = "bilder/banner/banner_rot.gif";
var image_02 = new Image();
image_02.src = "bilder/banner/banner_gelb.gif";
var image_03 = new Image();
image_03.src = "bilder/banner/banner_gruen.gif";
var image_04 = new Image();
image_04.src = "bilder/banner/banner_blau1.gif";
var image_05 = new Image();
image_05.src = "bilder/banner/banner_blau2.gif";
var images = new Array(image_01.src,image_02.src,image_03.src,image_04.src,image_05.src);
var currentImage = 0;
function changeImages() {
    currentImage++;
    if(currentImage == images.length) {
        currentImage = 0;
    }
    document.logo_1.src = images[currentImage];
    var timer = setTimeout('changeImages()', 2000);
    //Die 1000 ist die Aktualisierungsrate in Millisekunden
}
window.onload = changeImages;
</script>

HTML:

<div id="header">
<div id="banner"><img src="bilder/banner/banner_rot.gif" name ="logo_1" width="640" height="70"></div>
</div>

Habe jetzt selber kurz was gepfuscht.
Die 6-Sekundenschleife ist nicht mehr da.
Alle Logos werden in 3 Sekundenwechsel angezeigt.
Jedoch das erste Logo (rot) wird noch immer nicht angezeigt...

Original:

HTML:

var currentImage = 0;
function changeImages() {
    currentImage++;
    if(currentImage == images.length) {
        currentImage = 0;

Mein Pfusch:

HTML:

var currentImage = 01;
function changeImages() {
    currentImage++;
    if(currentImage == images.length) {
        currentImage = 01;