Grafik laden

[sly]

Hallo zusammen,

ich habe eine Tabelle mit Thumbs. Jetzt möchte ich gerne wenn ich auf ein Thumb klicke das große Originalbild in einer anderen Tabelle laden.

In dieser Tabelle sollen also die großen Grafiken angezeigt werden wenn auf die kleine Grafik in der anderen Tabelle geklickt wird.

Mein Problem:

Die großen Bilder sollen erst in die andere Tabelle geladen werden wenn das kleine angeklickt wird. Ich will also die Ladezeit für den ersten Seitenaufbau sehr gering halten (es sollen nur Thumbs geladen werden) und die großen Grafiken sollen dann je nach Klick auf die Thumbs dynamisch in der anderen Tabelle nachgeladen werden

Ist das irgendwie machbar

Gruß Sebastian

 

[da_loki]

Das ganze ist mit JavaScript machbar...

Schau dir mal das "onClick" Event an, sowie den "innerHTML" von Elementen.

<a href="#" onClick="update(bild.jpg);">bild</a>

<div id="grossesBild"></div>

<script type="text/javascript">
function update(neuesBild) {
  document.getElementById('grossesBild').innerHTML = '<img src=" ' + neuesBild + ' " alt="bildbeschreibung" />';
}
</script>

 

[sly]

Mit Javascript

Hallo da_Loki

sorry aber das bekomm ich gar nicht umgebaut. Hab mir jetzt folgendermaßen beholfen, ich habe eine Tabelle eingefügt und diese steht im Vordergrund

#bild01 { position: absolute;
         	  top: 4px;
                   left: 4px;
         	  z-index: 45}

         #bild02 { position: absolute;
         	  top: 139px;
                   left: 2px;
         	  z-index: 40 }

         #bild03 { position:relative;
                   top: 1px;
                   left: 1px;
         	  z-index: 55 }

Bild03 ist dabei die Tabelle, aber die ist beim Laden der Seite ausgeblendet:

<div ID="bild03" >

<table id="Ladetab" bgcolor="gray" style="visibility:hidden" width="1" height="1" border="0" alt="">

<tr><td><a href="javascript:Ausblenden();">Schließen</td></tr>
<tr><td align="center">
<img id="Ladebild" src="../Style/Ladebild.jpg" width="0" height="0">
</td></tr>
</table>
</div>

wenn ich nun auf die Thumbs klicke wird die Tabelle über Javascript eingeblendet und das zugehörige Bild, hier mal ein Beispiel

<a href="javascript:Einblenden(); Bildwechsel(1, Normal2)"><img src="deepsky/Thumbs/M27.jpg" width="200" height="150" style="border-color:silver;" border="1" alt=""></a>
	     </a>

ist jetzt natürlich extrem umständlich das so aus dem Zusammenhang gerissen zu sehen, ausprobieren kannst du das gerne mal auf:

Astrofotografie DeepSky

den Seitenquelltext kann man ja über die Browser einblenden

eigentlich funktioniert das so ganz gut und wie ich es wollte, jetzt habe ich nur dummerweise das Problem das die großen Bilder immer ganz oben eingeblendet werden, wegen position:absolute.
Irgendwie müsste ich es noch hinkriegen das die Bilder immer dort eingeblendet werden wo ich mich auf der Seite befinde

Vielleicht weiß ja jemand wie ich das noch hinbekomme das die Tabelle immer an der Stelle geladen wird wo ich gerade hingescrollt habe!

Gruß Sebastian