Bild positioniert vergrößern-Wie? mit Java, CCS oder doch php???HILFE

[Medium86]

Hallo,

ich suche heute schon fast 4std quer durch das www...

ich möchte wie hier :



wenn ich außen ein kleines Bild anklicke, dass dann mittig dieses groß erscheint. Nur WIE????? :???:

Diese Ansicht habe ich soweit mit einer Tabelle und Zellenverbindung erstellt.desweiteren habe ich von jedem Bild eine kleine ansicht bzw das gleiche als großes bild.

Bitte nicht böse sein, wenn das Thema hier nicht ganz reinpasst, aber ich suche schon so lange, finde zwar, wie ich bilder vergrößere per klick etc, aber halt nicht genau positioniert... :neutral:

Bitte um eure Hilfe und Erfahrung.

Gruß Medium

HTML Kenntnisse sind vorhanden und als Fortgeschritten einzustufen. ;)

 

[threadi]

Wenn Du mit Java programmieren kannst, kannst Du es durchaus damit machen. Aber das wäre doch etwas übertrieben.

Rein auf HTML-Basis bräuchtest Du nur noch JavaScript (nicht Java!) um das mittlere Bild austauschen zu können.

document.getElementById('IdVomMittlerenBild').src = 'neuesbild.jpg';

 

[Medium86]

sorry, ich meinte ja JS. Java kenne ich zwar, kann es aber nicht programmieren...

In wie fern müßte solch ein Javascript aussehen!? Scripte an sich habe ich noch nich weiter programmiert, höchstens anschließend angepasst.

ich werde dann gleich mal den Code testen von dir.

 

[Bisi]

<script type="text/javascript">
function tausche(grossesBild) {
var x = document.getElementById("IdDesGrossenContainers");
if(x) { x.innerHTML = "<img src="+grossesBild+" />"; }
}
</script>

<a href="#" onClick="tausche('LinkZumGrossenBild');"><img src="LinkZumKleinenBild" /></a>
<div id="IdDesGrossenContainers"></div>

^^ist mein Ideen-Ansatz ... ich habe es nicht getestet, also keine garantie. aber vllt. möchten weitere poster da noch weiter drann furwerkeln.

das bild, was hier mit dem link umschlossen ist, ist das kleine bild. klickt man auf es, wird der pfad des großen bildes per onClick an eine javascript funktion tausche übergeben, die dann in das große feld in der mitte (wenn man von deinem beispiel ausgeht), dessen ID "IdDesGrossenContainers" lautet, das große bild in diesen Container läd.

grüße, der Bisi

[EDIT] ich habs doch mal getestet ... es funktioniert :-) ... http://chris-foto.cwsurf.de/_Other/_HTML/bild/ <-- zwar sehr unmodern mit ner tabelle ... aber das wirst du schon überleben xD [/EDIT]

 

[Medium86]

@ Bisi

Danke für die Hilfe.:mrgreen:
Klappt super, nur wie kann ich voreinstellen, dass an der Stelle in der Mitte, wenn ich die Seite öffne, schon ein großes Bild aus der reihe steht!?

So öffne ich die Seite und mittig ist noch kein bild angezeigt.

thx schon eimal für die hilfe.

Gruß Medium86

 

[Gunzi]

Es wäre einen Versuch wert in die/das
<td rowspan="3" id="IdDesGrossenContainers" style="width:300px;"></td>

einfach schonmal ein Bild rein zu setzen :)
z.B.

<td rowspan="3" id="IdDesGrossenContainers" style="width:300px;"><img src="startbild.jpg"(/ falls du XHTML benutzt)></td>

 

[Medium86]

Ja das hab ich dann später auch gemerkt, dass das mit dem Bild reinsetzen eigentlich keine große sache ist. ;)


Nun hab ich ein Problem und brauche eventuell noch einen Rat.

Das mit den Bildern klappt alles super, auch mit dem Bild mittig bei 1.öffnen der html.

jetzt habe ich aber 2 solcher blöcke untereinander.
Das mit dem script ändern, dass im 2. Block unten auch das Bild dort unten mittig angezeigt wird, kein Problem.

Nur springt der Cursor immer ganz nach oben, wenn ich ein kleines Bild außen anklicke. Da z.b. der 2. Block weiter unten ist und man scrollen muss, is das natürlich doof.

Kann man das mit nem Befehl einstellen, dass sich das bild mittig auf das mittige Bild von dem jeweiligen Block ausrichtet!?

Wäre echt super nett, wenn du mir dabei helfen könntest...

 

[Bisi]

ich war gerade ein bissel faul ... und habe dann einfach den Link weg gemacht und das onClick="" in das img-tag hineingetan ... aber was ich noch toller fand ist, dass ich daraus dann ein onmouseover gemacht habe *g*

<img src="die_maus_klein.jpg" onmouseover="tausche('die_maus_gross.jpg');" />