ForumübersichtHtml & CSS

Bildershow ändern ! - Seite 1

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
Geschlossen
AutorText


Harryhuca



Punkte: 1321
Hallo Team,

ich arbeite auf meiner Seite, mit einer Bildershow die auch gut läuft.
Ich habe einfach mal das komplette Skript eingestellt (mit Bilder)

Ist es möglich daß ich unter jedem Bild eine Bildbeschreibung (Text)anzeigen kann?

Kann mir das jemand abändern und den kompletten Code wieder einstellen?

wäre natürlich super wenn mir jemand helfen könnte.


Hier das Skript:


<center>
<table style="width: 706px; height: 582px" border="0" cellpadding="0">
<caption>
<p><span style="font-family: Arial"><span><span style="color: #ffff00"><b>Strand Amadores</b></span></span></span></p>
</caption>
<tbody>
<tr>
<td width="100%">
<p>
<table border="5" cellspacing="1" cellpadding="1" width="200" align="center">
<tbody>
<tr>
<td><img style="width: 656px; height: 494px" name="bilder" alt="" width="700" height="500" nosave="" src="file1.npage.de/003601/82/bilder/k-dscn2536.jpg" /></td>
</tr>
</tbody>
</table>
</p>
</td>
</tr>
<tr>
<td width="100%">
<form method="post" name="rotater">
<center><script language="JavaScript1.1">
var photos=new Array()
var which=0

/* Hier die Bilder eintragen, egal wie viele es sind. Auf Unterordner achten !*/
photos[0]="file1.npage.de/003601/82/bilder/k-dscn2536.jpg"
photos[1]="file1.npage.de/003601/82/bilder/k-dscn2541.jpg"
photos[2]="file1.npage.de/003601/82/bilder/k-dscn2545.jpg"
photos[3]="file1.npage.de/003601/82/bilder/k-dscn2550.jpg"
photos[4]="file1.npage.de/003601/82/bilder/k-dscn2551.jpg"
photos[5]="file1.npage.de/003601/82/bilder/k-dscn2577.jpg"
photos[6]="file1.npage.de/003601/82/bilder/k-dscn2579.jpg"
photos[7]="file1.npage.de/003601/82/bilder/k-dscn2580.jpg"
photos[8]="file1.npage.de/003601/82/bilder/k-dscn2583.jpg"

function backward(){
if (which>0){
window.status=''
which--
document.images.bilder.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.bilder.src=photos[which]
}
else window.status='Letztes Bild'
}
</script><input type="button" onClick="backward()" name="B2" value="zur&uuml;ck" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="forward()" name="B1" value="weiter" /></center>
</form>
</td>
</tr>
</tbody>
</table>
</center>


http://come-in.de.to



ntmb
Admin



Punkte: 13802
Dein Anliegen ist nicht ganz so schwer umzusetzen, ich finde das Hinleiten zu einer Lösung durch Außenstehende besser, als die direkte Lösungsvorgabe.

Als Erstes benötigst du unter dem Bild ein span-Element, wo der geänderte Infotext untergebracht wird, dieser sollte ebens durch eine ID schnell indifiziert werden können, vielleicht mit sowas wie "bildinfo".

Du hast da viele Möglichkeiten um das Problem zu lösen, du kannst jeden Eintrag als Array verwenden, wo jeweils die passenden Werte drinstehen, es würde ungefähr so aussehen:

photos[0]=new Array("file1.npage.de/003601/82/bilder/k-dscn2536.jpg","Mein InfoTag 1" )
photos[1]=new Array("file1.npage.de/003601/82/bilder/k-dscn2541.jpg","Mein InfoTag 2" )

Der Bereich wo du die Source de Bildes änderst müsst so aussehen/umbauen:
document.images.bilder.src=photos[which][0]

Die Zeile um den InfoText anzupassen kann direkt unter den Zeilen der Bildsourceänderung untergebracht werden:
document.all.bildinfo.innerHTML=photos[which][1]

Dazu gibt es auch interessante Links:
http://de.selfhtml.org/javascript/objekte/array.htm
http://de.selfhtml.org/javascript/objekte/all.htm#inner_html / Bereich innerHtml

<editiert am 24.07.11 um 14:16 von ntmb>

<editiert am 24.07.11 um 14:18 von ntmb>

Der freundliche Admin aus der Nachbarschaft
Lachecke.de - Dein täglicher Lacher im Internet
Listrank.de - Die ultimative Topliste nach Themen


Harryhuca



Punkte: 1321
Hallo Eugen,

Sorry aber ich komme damit nicht klar, ich bin in der Beziehung noch blutiger Anfänger, mir sagen die Begriffe leider nichts und ich weiß nicht wo ich was einsetzen oder löschen und einsetzen soll nichts (habe jetzt 1 St. probiert) und nichts hat geklappt
und die Links sind für mich genau so unverständlich (Sorry)
Bitte sei so gut und ändere Du mir den Code.
Das wäre wirklich super.

Liebe Grüße




ntmb
Admin



Punkte: 13802
Ich hab dir mal eine Lösung gemacht, wie ich es ungefähr machen würde. Der Programmcode war nicht ganz HTML-valide.

Anmerkung: Wenn du deine Fähigkeiten in JavaScript, auch ansatzweiße in HTML verbessern/optimieren würdest, würde die das ganze leichter von der Hand gehen, im Internet gibt es viele gute Anlaufstellen hierzu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script type="text/javascript">
var photos=new Array();
var which=0;

/* Hier die Bilder eintragen, egal wie viele es sind. Auf Unterordner achten !*/
photos[0]=new Array("file1.npage.de/003601/82/bilder/k-dscn2536.jpg", "Text 1");
photos[1]=new Array("file1.npage.de/003601/82/bilder/k-dscn2541.jpg", "Text 12");
photos[2]=new Array("file1.npage.de/003601/82/bilder/k-dscn2545.jpg", "Text 13");
photos[3]=new Array("file1.npage.de/003601/82/bilder/k-dscn2550.jpg", "Text 14");
photos[4]=new Array("file1.npage.de/003601/82/bilder/k-dscn2551.jpg", "Text 15");
photos[5]=new Array("file1.npage.de/003601/82/bilder/k-dscn2577.jpg", "Text 16");
photos[6]=new Array("file1.npage.de/003601/82/bilder/k-dscn2579.jpg", "Text 17");
photos[7]=new Array("file1.npage.de/003601/82/bilder/k-dscn2580.jpg", "Text 18");
photos[8]=new Array("file1.npage.de/003601/82/bilder/k-dscn2583.jpg", "Text 19");

function changePic(mode){
    which+=mode==1 ? 1 : -1;
    if (which<0){
        which=0;
    }
    else if(which>photos.length-1){    
        window.status='Letztes Bild';
        which=photos.length;
    }
    else {
        window.status='';
        document.images.bilder.src='http://'+photos[which][0];
        document.getElementById('bildInfo').innerHTML=photos[which][1];
    }
}
</script>

<div align="center">
    <h1>Strand Amadores</h1>
    <table border="5" cellspacing="1" cellpadding="1" width="200" align="center">
        <tr>
            <td><img style="width: 656px; height: 494px" name="bilder" alt="" width="700" height="500" nosave="" src="http://file1.npage.de/003601/82/bilder/k-dscn2536.jpg" /></td>
        </tr>
        <tr>
            <td style="text-align:center"><span id="bildInfo">Text 1</span></td>
        </tr>
        <tr>
            <td style="text-align:center">
                <input type="button" onClick="changePic(0)" name="B2" value="zur&uuml;ck" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="changePic(1)" name="B1" value="weiter" /></center>
            </td>
        </tr>
    </table>
</div>

Der freundliche Admin aus der Nachbarschaft
Lachecke.de - Dein täglicher Lacher im Internet
Listrank.de - Die ultimative Topliste nach Themen


Harryhuca



Punkte: 1321
Hallo Eugen vielen DANK,

es geht wunderbar, werde mich in nächster Zeit wirklich mal um HTML kümmern,

Nochmal Danke und Liebe Grüße

Geschlossen