Text UND Bild bei Mouseover

[stephan136]

Hallo,
ich habe das Problem, dass ich eine Bildervorschau mit JS habe:

  
<table align="center" cellpadding="2" cellspacing="10" border="0" width="820" bgcolor="1C1C1C"> <tr>  
  
<td width="60" height="430" align="right" valign="top" cellpadding="10"> <br> <script type="text/javascript">	  
var bilder=new Array("bild01.jpg","bild02.jpg","bild03.jpg","bild04.jpg");  
  
function vorschau(bild)  
{  
	document.vorschaubild.src=bild;  
}  
  
for(x=0;x<bilder.length;x++)  
{  
	document.write("<p><a onMouseOver=\"vorschau('"+bilder[x]+"')\">");  
	document.write("<img src=\""+bilder[x]+"\" width=\"60\"  border=\"0\"></a></p>");  
}  
</script></td>  
  
<td width="530" align="center" valign="top"><br>  
  
<div style="width:480px; height:400px; overflow:auto; border:0px ">  
  <img name="vorschaubild" src="standardbild.jpg" width="450">  
</div>  
<br>  
  
</td></tr> </table>  
  

Jetzt ist meine Frage aber, ob man auch einen Text mit über/unter die Bilder schreiben kann, wenn die Bilder beim Mouseover links auf der rechten Seite erscheinen?
Habe leider nicht wirklich super viel Ahnung davon, aber ich hoffe, dass mir jemand helfen kann....

Danke euch!

[vrs]

Hallo,
ich habe das Problem, dass ich eine Bildervorschau mit JS habe:

Wohl eher ein Problem mit der Bildervorschau.

<table align="center" cellpadding="2" cellspacing="10" border="0" width="820" bgcolor="1C1C1C"> <tr>

Mal nebenbei: gib der Tabelle eine CSS-Klasse, anstatt sie direkt im HTML zu stylen. Vll. hast du ja später mehrere Tabellen, die gleich aussehen sollen?

<td width="60" height="430" align="right" valign="top" cellpadding="10"> <br> [code lang=javascript]<script type="text/javascript">
var bilder=new Array("bild01.jpg","bild02.jpg","bild03.jpg","bild04.jpg");

Oder auch einfach die Schreibweise mit eckigen Klammern (Array-Literal):
var xyz = [1, 2, 3]; // nebenbei unnötig, siehe weiter unten

function vorschau(bild)
{
document.vorschaubild.src=bild;
}

for(x=0;x<bilder.length;x++)
{
document.write("<p><a onMouseOver="vorschau('"+bilder[x]+"')">");
document.write("<img src=""+bilder[x]+"" width="60"  border="0"></a></p>");
}
</script>

  
Was passiert, wenn jemand kein Javascript an hat? Richtig, er sieht gar nichts. Verzichte aufs document.write und schreibe die Bilder als schlichtes HTML. Das <p> und das <a> sind unnötig, es reicht  
<img src="bild01.jpg" onmouseover="vorschau(this.src);"> und für die Breite eine CSS-Regel. this.src ist in diesem Fall einfach die Quelle des Bildes (this zeigt auf das Bild). Das Array bilder kann nebenbei wegfallen.  
  

> </td>  
>   
> <td width="530" align="center" valign="top"><br>  
>   
> <div style="width:480px; height:400px; overflow:auto; border:0px ">  
>   <img name="vorschaubild" src="standardbild.jpg" width="450">  
> </div>  
> <br>  
> [...]  
> [/code]  
  
Das <div> brauchst du auch nicht.  
  

> Jetzt ist meine Frage aber, ob man auch einen Text mit über/unter die Bilder schreiben kann, wenn die Bilder beim Mouseover links auf der rechten Seite erscheinen?  
  
Ja, kann man. (mehr hast du nicht gefragt, oder?)  

[stephan136]

»» Jetzt ist meine Frage aber, ob man auch einen Text mit über/unter die Bilder schreiben kann, wenn die Bilder beim Mouseover links auf der rechten Seite erscheinen?

Ja, kann man. (mehr hast du nicht gefragt, oder?)

Okay, Danke erstmal.
Kannst Du mir denn zufällig auch sagen, wie ich das mit dem Text mache?
:o)

[vrs]

»» »» Jetzt ist meine Frage aber, ob man auch einen Text mit über/unter die Bilder schreiben kann, wenn die Bilder beim Mouseover links auf der rechten Seite erscheinen?
»»
»» Ja, kann man. (mehr hast du nicht gefragt, oder?)
»»

Okay, Danke erstmal.
Kannst Du mir denn zufällig auch sagen, wie ich das mit dem Text mache?
:o)

Unter einer Bedingung: geh dich ein wenig bilden, gerne auch hier.

Quick and dirty:

<span id="bilduntertext">standardtext</span>

  
var bildtexte = { // Objektliteral: in diesem Fall eine Art assoziatives Array  
        bild01 : 'bla',  
        bild02 : 'blubb',  
        bild03 : 'piep' // usw  
}  
function vorschau(bild) { // vorschaufunktion, etwas erweitert  
        document.getElementById('bilduntertext').innerHTML = bildtexte[bild];  
        document.getElementById(bild).src = bild; // vorausgesetzt, du gibst den Bildern die entsprechenden ids  
}

[stephan136]

Unter einer Bedingung: geh dich ein wenig bilden, gerne auch hier.

versprochen. versuche mich ja immer mal wieder weiterzubilden (auch durch solche dummen fragen)
grins.
Werde es mal ausprobieren. Danke dir vielmals!

[stephan136]

Tut mir leid, aber so ganz versteh ich das doch nicht....
:(

Habe jetzt folgendes gemacht:

  
<table align="center" cellpadding="2" cellspacing="10" border="0" width="820" bgcolor="1C1C1C"> <tr>  
  
<td width="60" height="430" align="right" valign="top" cellpadding="10"> <br>  
<script type="text/javascript">	  
var bilder = ["bild01.jpg","bild02.jpg","bild03.jpg","bild04.jpg"];  
function vorschau(bild)  
{  
	document.vorschaubild.src=bild;  
}  
  
for(x=0;x<bilder.length;x++)  
{  
<img src="bild01.jpg" onmouseover="vorschau(this.src);">  
}  
  
  
  
var bildtexte = {  
        bild01 : 'bla',  
        bild02 : 'blubb',  
        bild03 : 'piep'  
}  
function vorschau(bild) {  
        document.getElementById('bilduntertext').innerHTML = bildtexte[bild];  
        document.getElementById(bild).src = bild;  
}  
</script></td>  
  
  
  
<td width="530" align="center" valign="top"><br>  
  
  
<div style="width:480px; height:400px; overflow:auto; border:0px ">  
  <span id="bilduntertext">standardtext</span>  
  <img name="vorschaubild" src="standardbild.jpg" width="450">  
  </div>  
<br>  
  
  
</td></tr> </table>  

Kannst Du mir vielleicht kurz erklären warum das falsch is und wie ich das verstehen kann?
Das interessiert mich wirklich!!!

Danke Dir!