Bilder auf Befehl

[William von [e-mail]]

Guten Abend Allerseits!

Ich möchte auf meiner HP Bilder mit Hilfe von Thumbnails zeigen. Die großen Bilder sollen aber nicht in einem neuen Fenster gezeigt werden, sondern direkt darüber. Hier habe ich mal meinen unvollständigen Quelltext:

<p align="center"><img name="Picture" src="./Fotos/0.jpg"></p>
<hr>

<table align="center" border="0">
 <tr>
  <td><img src="./thumb/0.jpg"><td>
  <td><img src="./thumb/1.jpg"><td>
  <td><img src="./thumb/2.jpg"><td>
  <td><img src="./thumb/3.jpg"><td>
 </tr>
...
</table>

Jetzt möchte ich die Thumbnails verlinken, damit dann "Picture" ein anderes Bild einlädt. Und genau da ist mein Problem: Wie stelle ich das an?

Herzlichen Dank im Voraus!
William von Baskerville

[Chrischaaan]

he?
wie jetz.du willst auf ein kleines bild klicken und dann da drüber ein großes bild anzeigen?!
hab ich das jetz richtig verstanden?

wenn ja würde ich sagen machst du folgendes:

<img src="./thumb/0.jpg" onClick="this.src='großesBild.jpg'">

[William von Baskerville]

Hm. Ich hätte das gerne als Verweis. Also irgendwie mit dem <a> Tag. Und es soll nicht das gleiche kleine Bild größer werden, es soll ein anderes Bild angezeigt werden...

[NAG]

Hm. Ich hätte das gerne als Verweis. Also irgendwie mit dem <a> Tag. Und es soll nicht das gleiche kleine Bild größer werden, es soll ein anderes Bild angezeigt werden...

<a onClick="this.src='bild2.jpg'"><img src="bild1.jpg" border="0"></a>

[William von Baskerville]

<a onClick="this.src='bild2.jpg'"><img src="bild1.jpg" border="0"></a>

Das funktioniert nicht.

[NAG]

<a onClick="this.src='bild2.jpg'"><img src="bild1.jpg" border="0"></a>

Das funktioniert nicht.

stimmt ...mein fehler..

a) was willst du damit eigentlich? (in meinen augen ist das unnütz')
b) ich könnte dir das in einen <a> formulieren, aber der mauszeiger wäre keine hand - und das willst du sicher

[William von Baskerville]

a) Ich möchte Bilder anzeigen, wie es zum Bsp. auf der Seite von PCGames mit den Screenshot-Bildern gemacht wird. Hab mir auch den Source-Code dort angeschaut, aber das ist hoffnnungslos...
b) Stimmt. Im <a> Tag klappts mittlerweile. Aber es fehlt die Hand.

[NAG]

ich steh weiter oben!!!! :)

vielleicht können dir auch andere besser helfen...

NAG

[William von Baskerville]

Ha! Ich habs jetzt gelöst! Vielen Dank!
Es funktioniert so:

<p align="center"><img name="Picture" src="./Fotos/0.jpg"></p>

Das ist das große Foto. Das kleine Foto:

<a onClick="Picture.src='./Fotos/1.jpg'"><img src="./thumb/1klein.jpg" style="cursor:pointer"></a>

Über 3 Ecken funktioniert es irgendwie. Nochmals, vielen Dank!

William von Baskerville

[Tobias K.]

Hallo William,

<td><img src="./thumb/3.jpg"><td>

bei allen Bildern fehlt noch ein alt=""

Jetzt möchte ich die Thumbnails verlinken, damit dann "Picture" ein anderes Bild einlädt. Und genau da ist mein Problem: Wie stelle ich das an?

versuchst mal mit einem onclick in <img> (oder einem <a> außerum) das eine Funktion aufruft die das ausführt: document.Picture.src = neueurl; (die Funktion wird mit der url/dem Dateinamen des neuen Bildes aufgerufen) - jetzt hoffe ich nur, dass du weiß, was ich mein, ansonsten frag einfach noch mal :-)

Grüße aus Nürnberg
Tobias

[NAG]

:)

mir ist immer noch unklar was du bezwecken willst...schick mir doch mal die url wo ich den effekt bewundern kann

und beim mauszeiger kannst du "schummeln"!

http://www.selfhtml.teamone.de/css/eigenschaften/anzeigefenster.htm#cursor

NAG

[William von Baskerville]

http://www.pcgames.de/external/browser/index.cfm?entity_ID=55080&mode=entity

[Tobias K.]

Hallo William,

http://www.pcgames.de/external/browser/index.cfm?entity_ID=55080&mode=entity

-></faq/#Q-19>
auf dieser Seite wird kein javascript verwendet, sondern das ganze wird serverseitig zusammengebaut.

Grüße aus Nürnberg
Tobias

[NAG]

http://www.pcgames.de/external/browser/index.cfm?entity_ID=55080&mode=entity

möglichkeit 1:
ok entweder du öffnest beim klick auf das kleine bild1 eine neue komplett neue seite

also...

BILD1.html:

<img src="großesbild.jpg">
<a href="BILD2.html"><img src="kleinesbild.jpg" border="0"></a>

BILD2.html:

<img src="großesbild2.jpg">
...

möglichkeit 2:

</script>
<script type="text/javascript">
<!--
Highlight1 = new Image();
Highlight1.src = "bild2.jpg";

function Bildwechsel(Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>

<img src="großesbild.jpg">
<a onClick="Bildwechsel(0,Highlight1)"><img src="bild1.jpg"></a>

...aber das alles kannst du auch in selfhtml (bestens) nachlesen!!!
...und das solltest du auch machen.

mfg NAG