.jpg in einem array ein title mitgeben

[maggie]

Hallo,
Bei diesem Beispiel sollte beim mouse-event über das Foto eine Titelbezeichnung erscheinen.

Kann ich im array zu "bild1.jpg" einen "title1" (title: "title 1") anhängen? Wie?

var bilder=new Array();  
bilder[1]="bild1.jpg";  
bilder[2]="bild2.jpg";

Gruß
Maggie

[Cheatah]

Hi,

Kann ich im array zu "bild1.jpg" einen "title1" (title: "title 1") anhängen? Wie?

Du kannst ein zweites Array erzeugen, Du kannst das bestehende Array mit Listen füllen, Du kannst es mit Objekten füllen, Du kannst zu den Image-Referenzen <img>-Elemente vorhalten, die den title enthalten. Möglichkeiten gibt es viele.

Cheatah

[maggie]

Hi,

Kann ich im array zu "bild1.jpg" einen "title1" (title: "title 1") anhängen? Wie?

Du kannst ein zweites Array erzeugen, Du kannst das bestehende Array mit Listen füllen, Du kannst es mit Objekten füllen, Du kannst zu den Image-Referenzen <img>-Elemente vorhalten, die den title enthalten. Möglichkeiten gibt es viele.

Cheatah

Hi Cheatah,
ich versuche es mal:

var bilder=new Array(
{
src: "bild1.jpg",
title: "title 1"
},
{
src: "bild2.jpg",
title: "title 2"
}
);
bilder[1]="bild1.jpg";
bilder[2]="bild2.jpg";

...aber es funktioniert nicht.
Gruß
Maggie

[Kai345]

[latex]Mae  govannen![/latex]

ich versuche es mal:

var bilder=new Array(
{
src: "bild1.jpg",
title: "title 1"
},
{
src: "bild2.jpg",
title: "title 2"
}
);

Diese Daten-Struktur sieht schon recht sinnvoll aus, insbesondere, da sie gegebenenfalls jederzeit um weitere Eingenschaften erweitert werden kann.

bilder[1]="bild1.jpg";
bilder[2]="bild2.jpg";

...aber es funktioniert nicht.

„funktioniert nicht“ funktioniert nicht ;)

Du mußt zuerst diese Daten-Struktur verstehen; am Besten an einem ganz einfachen Beispiel.

Du hast z.B. eine Haustüre (bilder) und einen Flur mit verschiedenen Zimmernummern (array-index). In jedem Zimmer stehen Schränke "src","title".

Um etwas in einen Schrank zu legen, gehst du zuerst durch die Haustüre, dann ins Zinmmer und danach zum Schrank.

also bilder -> Zimmernummer -> Schrankname.

In Javascript kann man diese gemischte Struktur[1] auf unterschiedliche Weise ansprechen:

bilder[0].src oder bilder[0]["src"]. Die zweite Version ist schöner, wenn man z.B. den Zugriff in einer Scheife oder Funktion durchführen möchte.

Also setzt du den Wert für ein Bild mit
bilder[0]["src"] = "bild1.jpg"
und liest ihn mit
var bildressource = bilder[0]["src"];
aus. Für den Titel funktioniert es entsprechend.

Cü,

Kai

[1] Genau genommen handelt es sich bei dieser Datenstruktur um ein Array, bei dem jedes Array-Element durch ein Objekt in Literal-Schreibweise vertreten ist.
Siehe auch Eigenschaften Daher kombiniert sich die Schreibweise auch aus den

[Timo "God's Boss" Reitz]

bilder[0].src oder bilder[0]["src"]. Die zweite Version ist schöner, wenn man z.B. den Zugriff in einer Scheife oder Funktion durchführen möchte.

Der Unterschied ist wohl eher, dass man die erste Variante nimmt, wenn der Name der Eigenschaft beim Schreiben des Codes bekannt ist und die zweite Variante dann, wenn er zur Laufzeit ermittelt wird. Oder: Die erste Version immer dann nehmen, wenn es möglich ist, sonst die andere. ;-)

[maggie]

Also setzt du den Wert für ein Bild mit
bilder[0]["src"] = "bild1.jpg"
und liest ihn mit
var bildressource = bilder[0]["src"];
aus. Für den Titel funktioniert es entsprechend.

Hallo Kai,
das Aufrufen des Titels?? So sieht es im Moment aus und so (aber mit Bildtiteln)sollte es aussehen

<script language="JavaScript" type="text/JavaScript">  
<!--  
//BILDARRAYS  
var bilder=new Array(  
{  
src: "bild1.jpg",  
title: "title 1"  
},  
{  
src: "bild2.jpg",  
title: "title 2"  
}  
);  
bilder[1]["src"] = "bild1.jpg"  
bilder[1]["title"] = "bild1.jpg"  
bilder[2]["src"] = "bild2.jpg"  
bilder[2]["title"] = "bild2.jpg"  
  
  
function chgImg(no) {  
   document.getElementById('imgBild').src=bilder[1];  
        document.getElementById('imgBild').title=bilder[no];  
  for (var x=1;x<3;x++) {  
    document.getElementById('quadrat'+x).style.backgroundColor='';  
    document.getElementById('quadrat'+x).style.border ='solid #999999 1px';  
   }  
  document.getElementById('quadrat'+no).style.backgroundColor='#FFFFFF';  
   document.getElementById('quadrat'+no).style.border='none';  
  
   no++;  
  if (no==3) {  
   no=1;  
   }  
    document.getElementById('imgBild').onclick=new Function("chgImg("+no+")");  
    }  
//-->  
</script>

<div id="bildbox">  
  <img src="bild1.jpg" width="400" height="300" id="imgBild" onclick="chgImg(2);" />  
   <div id="quadrat2" class="quadrat" onClick="chgImg(2);"></div>  
   <div id="quadrat1" class="quadrat" style="background-color:#FFFFFF; border-color:#FFFFFF;" onClick="chgImg(1);"></div>  
  </div>

[Kai345]

[latex]Mae  govannen![/latex]

//BILDARRAYS
var bilder=new Array(
{
src: "bild1.jpg",
title: "title 1"
},
{
src: "bild2.jpg",
title: "title 2"
}
);
bilder[1]["src"] = "bild1.jpg"
bilder[1]["title"] = "bild1.jpg"
bilder[2]["src"] = "bild2.jpg"
bilder[2]["title"] = "bild2.jpg"

Falsche Indexierung. Das erste Element in einem Array wird nicht mit [1] angesprochen. Siehe Arrays, zweite "Erläuterung"-Überschrift.

<!--
//-->

Zwischen den Script-Tags nicht notwendig, ersatzlos streichen. Das Language-Attribut im öffnenden script-Tag ebenso.

function chgImg(no) {
   document.getElementById('imgBild').src=bilder[1];
        document.getElementById('imgBild').title=bilder[no];

Das ist nicht die korrekte Referenzierung, wie ich sie im anderen Beitrag erläutert habe. Außerdem mußt du nicht jedes Mal die Referenz auf das Bildelement ermitteln, mach dies ein Mal und speichere die Referenz in einer Variable, die du danach nutzt:

var das_bild = document.getElementById('imgBild');  
das_bild.src = ...  
das_bild.title = ...  
das_bild.onclick = ...

Cü,

Kai

[maggie]

...so,in der function chgImg(no)
soll zum 2. Bild gewechselt werden, da das erste Bild in der HTML schon angezeigt wird. Die Anzeige des Bildtitels muss für das 1. Bild erfolgen bilder[0]. Die for-Schleife zählt immer ein Bild hoch bis das letzte (hier das 2. Bild) erreicht ist und beginnt dann wieder von vorne.

Ist das soweit richtig? Wo ist der nächste gravierende Fehler?

Gruß
Maggie

~~~javascript <script type="text/JavaScript">

//BILDARRAYS
var bilder=new Array(
{
src: "bild1.jpg",
title: "title 1"
},
{
src: "bild2.jpg",
title: "title 2"
}
);
bilder[0]["src"] = "bild1.jpg"
bilder[0]["title"] = "bild1.jpg"
bilder[1]["src"] = "bild2.jpg"
bilder[1]["title"] = "bild2.jpg"

var das_bild = document.getElementById('imgBild');

function chgImg(no) {
   das_bild.src = bilder[1];
 das_bild.title = bilder[0];
  for (var x=0;x<2;x++) {
    document.getElementById('quadrat'+x).style.backgroundColor='';
    document.getElementById('quadrat'+x).style.border ='solid #999999 1px';
   }
  document.getElementById('quadrat'+no).style.backgroundColor='#FFFFFF';
   document.getElementById('quadrat'+no).style.border='none';

no++;
  if (no==2) {
   no=0;
   }
   das_bild.onclick = new Function("chgImg("+no+")");
    }
</script>

~~~html
<div id="bildbox">  
  <img src="bild1.jpg" width="400" height="300" id="imgBild" onclick="chgImg(1);" />  
   <div id="quadrat2" class="quadrat" onClick="chgImg(1);"></div>  
   <div id="quadrat1" class="quadrat" style="background-color:#FFFFFF; border-color:#FFFFFF;" onClick="chgImg(0);"></div>  
  </div>

[maggie]

Hallo Kai,
ich glaube ich bekomme das mit meiner Unkenntnis nicht hin.
Hättest Du Interesse einen Auftrag zu übernehmen?
Gruß
Maggie

[Cheatah]

Hi,

einige Fehler wurden Dir ja schon genannt, drum übergehe ich die jetzt mal gepflegt:

  

> var bilder=new Array(  
> {  
> src: "bild1.jpg",  
> title: "title 1"  
> },  
> {  
> src: "bild2.jpg",  
> title: "title 2"  
> }  
> );  
> bilder[1]["src"] = "bild1.jpg"  
> bilder[1]["title"] = "bild1.jpg"  
> bilder[2]["src"] = "bild2.jpg"  
> bilder[2]["title"] = "bild2.jpg"

Du versuchst, Daten zu schreiben, die schon vorliegen. Doppelt mag zwar besser halten, bringt aber effektiv außer vergeudeter Bandbreite nichts.

Cheatah