mike_mtm
Grünschnabel
Hallo zusammen!
Ich bitte um Hilfe zu meinem Problem. Ich war die letzten Tage damit beschäftigt, eine Slideshow für meine Urlaubsbilder zu basteln. Ganz "primitiv": keine Thumbnails, nur nächstes Bild, voriges Bild sowie ein Text zum jeweiligen Bild. Das ganze mit ein bissl HTML und CSS layouten, fertig.
Dazu hab ich diesen und diesen Beitrag hier im Forum als Inspiration genutzt, da ich mich mit JavaScript nicht so gut auskenne.
Das Problem ist nun, dass beim Einfügen der Texte das ganze Script nicht mehr geht, die Firefox Fehlerkonsole seltsame Meldungen ausgibt, die vorher nicht da waren und beim "Zurückändern" (zum Zeitpunkt wo's vorher get hat) auch nix mehr läuft
Momentan sieht es so aus, dass die Länge des jeweiligen Bildtextes (zwei Zeilen mit 800px Breite) zu Abstürzen führt. Ich kann's mir nur so erklären, dass in meinem Script die beiden Arrays nicht miteinander können. Oder das text[1] = '<b>Titel 1</0> Text 1.'; nicht korrekt in <div id="text_container"> geschrieben wird. (?) Wenn dieser Fehler auftritt, dreht zusätzlich die Fehlerkonsole durch und meint, ich hätte prevdeact() nicht definiert und vor ' bei '<b>Titel 1</0> Text 1.' müsste noch ein ;. (Was aber nicht sein kann, da das Teil mit "wenig Text" zu funktionieren scheint.
Kann mir nun bitte jemand helfen, das Script so zu verändern, dass das Image-Array mittels diesem Code funktioniert? (Sollte ja nicht so schwer sein, aber ich komme nicht mehr weiter).
Das heisst:. Ich würde gerne image[].src und image[].txt mit "document.getElementById" sauber in ein <div> schreiben und nur ein Array nutzen, statt wie jetzt zwei. Wie geht das?
Hier die Info's zu meinem jetzigen Stand:
1. HTML-Datei:
(.css und .js sind in externen Dateien untergebracht)
2. CSS-Datei
3. .JS-Datei
Sorry für den langen Beitrag, aber es ist ja besser, wenn gleich alle Info's da sind. Danke für Eure Hilfe.
Gruß
mtm
Ich bitte um Hilfe zu meinem Problem. Ich war die letzten Tage damit beschäftigt, eine Slideshow für meine Urlaubsbilder zu basteln. Ganz "primitiv": keine Thumbnails, nur nächstes Bild, voriges Bild sowie ein Text zum jeweiligen Bild. Das ganze mit ein bissl HTML und CSS layouten, fertig.
Dazu hab ich diesen und diesen Beitrag hier im Forum als Inspiration genutzt, da ich mich mit JavaScript nicht so gut auskenne.
Das Problem ist nun, dass beim Einfügen der Texte das ganze Script nicht mehr geht, die Firefox Fehlerkonsole seltsame Meldungen ausgibt, die vorher nicht da waren und beim "Zurückändern" (zum Zeitpunkt wo's vorher get hat) auch nix mehr läuft
Momentan sieht es so aus, dass die Länge des jeweiligen Bildtextes (zwei Zeilen mit 800px Breite) zu Abstürzen führt. Ich kann's mir nur so erklären, dass in meinem Script die beiden Arrays nicht miteinander können. Oder das text[1] = '<b>Titel 1</0> Text 1.'; nicht korrekt in <div id="text_container"> geschrieben wird. (?) Wenn dieser Fehler auftritt, dreht zusätzlich die Fehlerkonsole durch und meint, ich hätte prevdeact() nicht definiert und vor ' bei '<b>Titel 1</0> Text 1.' müsste noch ein ;. (Was aber nicht sein kann, da das Teil mit "wenig Text" zu funktionieren scheint.
Kann mir nun bitte jemand helfen, das Script so zu verändern, dass das Image-Array mittels diesem Code funktioniert? (Sollte ja nicht so schwer sein, aber ich komme nicht mehr weiter).
Code:
var image = new Array();
image[0] = new Image();
image[0].src = "pic001.jpg";
image[0].txt = "Text 1";
image[1] = new Image();
image[1].src = "pic002.jpg";
image[1].txt = "Text 2";Das heisst:. Ich würde gerne image[].src und image[].txt mit "document.getElementById" sauber in ein <div> schreiben und nur ein Array nutzen, statt wie jetzt zwei. Wie geht das?
Hier die Info's zu meinem jetzigen Stand:
1. HTML-Datei:
(.css und .js sind in externen Dateien untergebracht)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Slideshow Master</title>
<LINK rel="stylesheet" type="text/css" href="css/style_slideshow.css">
<script src="js/javascript_slideshow.js" type="text/javascript"></script>
</head>
<body onload="prevdeact()">
<div id="main">
<div id="navi_previous">
<a id="navi_previouslink" href="#" onclick="previous()" title="voriges Bild"><img src="img/arrow_left.gif" alt="voriges Bild" title="voriges Bild"></a>
</div>
<div id="frame">
<div id="title_container">
<p>Titel der Slideshow</p>
</div>
<div id="img_container">
<img src="img/blank.jpg">
</div>
<div id="text_container">
<b>Wenn</b> Du das hier lesen kannst, ist höchtwahrscheinlich JavaScript in Deinem Browser deaktiviert. Sollte das nicht weiterhelfen und Du nutzt vielleicht den Internet Explorer, ein Tip: Firefox ist so ein schöner Browser :)
</div>
<div id="navi">
</div>
</div>
<div id="navi_next">
<a id="navi_nextlink" href="#" onclick="next()" title="nächstes Bild"><img src="img/arrow_right.gif" alt="nächstes Bild" title="nächstes Bild"></a>
</div>
<div id="backtostart">
<a href="../start.html">Zurück zur Startseite.</a>
</div>
</div>
</body>
</html>2. CSS-Datei
Code:
body {
background-color:#505050;
margin:0px;
padding:0px;
}
/* removes borders when images are used as links */
img {
border:none;
}
P.title {
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
line-heigth:35px;
color:#FFFFFF;
text-align:top;
}
P.text {
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-heigth:15px;
color:#FFFFFF;
}
#title_container P {
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
line-heigth:30px;
color:#FFFFFF;
}
#main {
width:990px;
height:655px;
position:absolute;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-495px;
background-color:#505050;
}
#frame {
width:840px;
height:640px;
position:absolute;
left:75px;
/* background-color:#FFFFFF; */
background-image:url(../img/frame.gif);
}
#img_container {
width:800px;
height:600px;
position:absolute;
top:20px;
left:20px;
background-color:#333333;
}
#text_container {
width:794px;
height:60px;
position:absolute;
top:560px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:15px;
color:#FFFFFF;
padding-left:3px;
padding-right:3px;
margin-left:20px;
margin-right:20px;
background-image:url(../img/text_bkgd.png);
}
#title_container {
width:794px;
height:30px;
position:absolute;
z-index:1;
top:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
line-height:25px;
color:#FFFFFF;
padding-top:3px;
padding-left:3px;
padding-right:3px;
margin-left:20px;
margin-right:20px;
background-image:url(../img/title_bkgd.png);
}
#backtostart {
width:990px;
heigth:15px;
position:absolute;
top:640px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:15px;
text-align:center;
color:#999999;
}
#backtostart a {
font-size:11px;
border:0px;
color:#999999;
text-decoration:none;
}
#backtostart a:hover {
font-size:11px;
border:0px;
color:#999999;
text-decoration:underline;
}
#backtostart a:visited, #backtostart a:active, #backtostart a:focus {
font-size:11px;
border:0px;
color:#999999;
}
#navi_previous {
width:60px;
height:60px;
position:absolute;
top:280px;
}
#navi_previouslink img {
visibility:hidden;
}
#navi_previouslink:link, #navi_previouslink:visited, #navi_previouslink:active, #navi_previouslink:focus {
position:absolute;
background-image:url(../img/arrow_left.gif);
}
#navi_previouslink:hover {
position:absolute;
background-image:url(../img/arrow_left_red.gif);
}
#navi_next {
width:60px;
height:60px;
position:absolute;
top:280px;
left:930px;
}
#navi_nextlink img {
visibility:hidden;
}
#navi_nextlink:link, #navi_nextlink:visited, #navi_nextlink:active, #navi_nextlink:focus {
position:absolute;
background-image:url(../img/arrow_right.gif);
}
#navi_nextlink:hover {
position:absolute;
background-image:url(../img/arrow_right_green.gif);
}3. .JS-Datei
Code:
var image = new Array();
/* images */
image[1] = '<img src="pics/pic001.jpg" alt="">';
image[2] = '<img src="pics/pic002.jpg" alt="">';
image[3] = '<img src="pics/pic003.jpg" alt="">';
var text = new Array();
/* text */
text[1] = '<b>Titel 1:</b> Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1. ';
text[2] = '<b>Titel 2:</b> Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2. ';
text[3] = '<b>Titel 3:</b> Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3 Text 3. ';
/* start index */
var index = 1;
/* number of entries, edit here */
var count = 3;
/* hides the button for previous image at the beginning of slideshow */
function prevdeact() {
document.getElementById("navi_previous").style.visibility = "hidden";
document.getElementById("img_container").innerHTML = image[index];
document.getElementById("text_container").innerHTML = text[index];
}
/* next image */
function next() {
index ++;
document.getElementById("img_container").innerHTML = image[index];
document.getElementById("text_container").innerHTML = text[index];
document.getElementById("navi_previous").style.visibility = "visible";
if (index == count) {
document.getElementById("navi_next").style.visibility = "hidden";
}
}
/* previous image */
function previous() {
index --;
document.getElementById("img_container").innerHTML = image[index];
document.getElementById("text_container").innerHTML = text[index];
document.getElementById("navi_next").style.visibility = "visible";
if (index == 1) {
document.getElementById("navi_previous").style.visibility = "hidden";
}
}Sorry für den langen Beitrag, aber es ist ja besser, wenn gleich alle Info's da sind. Danke für Eure Hilfe.
Gruß
mtm
, 
