Bild vergrößern mit css

[Tambolina]

Hallo,....

ich bin totaler Anfänger und dabei meine ersten HP-Seiten selber zu erstellen.
Die Grundstruktur, Hauptseiten und all das habe ich soweit und nun komme ich seit einiger Zeit nicht weiter.
Ich scheitere daran, dass ich keine Anleitung (Tutorial oder Tipps) finde, wie ich einfach nur ein einfaches Bild durch Klick oder mit Mouse überfahren vergrößern kann.
Eine einfache Bildergalerie hab ich mir eh schon abgeschminkt.

Fertige Layouts, die man sich downloaden kann, beinhalten normalerweise keine Galerien (ausserdem brauche ich ja kein Layout)

Fertige Galerien hab ich zwar inzwiwschen gefunden, aber die übersteigen mein Anfängerverständins bereits gewaltig.
Es nutzt ja nichts, wenn ich solche für mich als Anfänger komplexen Layouts nicht verstehe, dann kann ich sie auch nicht an meine HP anpassen und einbauen.

Ich suche nun schon ne Weile verzweifelt nach einer Lösung für mich, weil ich dringend meine Seiten fertigstellen muß und das Vergößern eines oder mehrerer Bilder hier unverzichtbar ist.

Gibt es denn gar nichts (Tutorial) speziell zu diesem Thema?
Oder kann mir von euch jemand sagen wie es geht?

Ich hab im html Dokument das Bild xy,....und möchte es z.B. mithilfe von css beim Aklicken vergrößern.
Wie würde das gehen?

LG Tambolina

 

[ingoS]

Das ist leider nicht einfach mit CSS zu machen weil sich das Bild, wenn man z.B. mit :active arbeitet, gleich wieder verkleinert, nachdem man draufgeklickt hat oder anders ausgedrückt nur so lange groß bleibt, wie man die Maus gedrückt hält. Außerdem kommt der Internet Explorer gar nicht damit klar. Hier muss man wohl auf JavaScript zurückgreifen.
Das hier sollte funktionieren: Webmaster Resource: Tipps & Tricks: Javascript: Bild durch Anklicken vergrößern oder verkleinern

 

[newlord]

Schau mal auf Stu Nicholls | CSSplay | CSS demonstrations

Da haste verschiedene Demos von Bildergalerien, welche mit CSS funktionieren.

MfG

NewLord

 

[Tambolina]

Herzlichen Dank ingoS,...

so langsam dämmert mir auch, dass ich mir da zuviel vorgenommen habe:lol:,....aber danke für den Link,...versuchen werde ich es danach nochmal.;)



Vielen Dank auch an newlord,...
auch auf dieser Seite mit den Demos war ich auch schon.;)

Superschöne Galerien sind dort dabei.
Ich hatte mir auch eine rausgesucht, die recht einfach gehalten war,...
aber auch dafür reicht mein Anfängerwissen offenbar nicht aus,.....ich bekomme nämlich auch sie nicht in meine Seiten eingefügt.:(

Das Problem ist leider, dass ich als Anfänger erstmal Schritt für Schritt -Anleitungen bräuchte.
Eine fertige Galerie ist eben einfach schon zu komplex für so wenig Wissen.

Die Tutorials die ich gefunden habe behandeln aber leider dieses Thema nicht,.....und wenn, dann ist es offenbar schon für Leute, die bereits wesentlich mehr Ahnung haben.
Ich versuche es jetzt nochmal;),...ansonsten muß ich wohl das Handtuch werfen.:?

 

[Bleistift]

Hallo,
folgender Quelltext müsste das Bild vergrößern, wenn man mit der Maus drüber geht.

img:hover {
zoom: 150%;
}

mfg Bleistift

 

[ingoS]

Hallo,
folgender Quelltext müsste das Bild vergrößern, wenn man mit der Maus drüber geht.

img:hover {
zoom: 150%;
}

mfg Bleistift

Nicht im Internet Explorer...

 

[klausweidinger]

Also ich persönlich würde es mit javascript machen (obwohl ich kein javascript kann ). Hab heute auf SELFHTML danach gesucht, wie ich es hinbekomme, dass ein Menuknopf einen hover-Effekt hat, wenn man drüberfährt. Ist eigentlich recht einfach. Hier ist der Link:
SELFHTML: JavaScript / Anwendungsbeispiele / Dynamische grafische Buttons

Wenn du des mal mit einem Button geschafft hast, dann kannst du statt dem Button einfach Bilder nehmen und dann nicht den Button selbst, sondern irgendein Platzhalterbild ersetzen: Also z.B. so:
_____________________
|...............................|
|...............................|
|..... ......Bild.... .........|
|...............................|
|___________________|
|__|__|__|__|__|__|__|

(Natürlich kannst du auch eine andere Darstellungsart verwenden und musst dann halt ein bisschen rumprobieren)

Dann machst du in die Mitte anstelle von "Bild" irgendeine andere Grafik, bzw. die erste Grafik in deiner Gallerie, und wenn du dann auf eines der kleinen Bilder (kleine Kästchen unten) klickst, wird sie durch das jeweilige Bild ersetzt.

Der Code müsste dann irgendwie so aussehen:
--Innerhalb der head-Tags folgendes:
<script type="text/javascript">
big_1 = new Image();
big_1.src = "*";..............##Statt dem * natürlich immer den Bildpfad
big_2 = new Image();
big_2.src = "*";
big_3 = new Image();
big_3.src = "*"; ..............##Diese 2 Zeilen musst du für jedes Bild einfügen.

function pixch (Index, New) {
window.document.images[Index].src = New.src;
}
</script>

--Das Große Bild ganz normal einfügen.

--Die kleinen Bilder so einfügen:
<a onclick="pixch(x, big_1)"><img src="___" width="___" height="___" border="0" alt="___"></a>

Erklärung:
Bei src den Pfad des Bildes, width/height erklärt sich selbst, bei alt einen Untertitel zum Bild. Für das x in der Funktion pixch die Zahl, die angibt, als wievielte Grafik das große Bild in deiner HTML-Datei auftaucht. Das müsste, wenn du die Seite genau so machst, wie es oben auf dem Schema dargestellt ist eig. 0 sein (Zählung beginnt bei 0), wenn du davor aber noch andere Grafiken hast (z.B. eine grafische Überschrift), dann kann es auch andere Werte annehmen. Einfach durchprobieren oder abzählen. Für das big_1 in der Funktion natürlich immer den jeweiligen Wert, also beim 2. kleinen Bild big_2, usw.

Nachteile dieser Methode: Für größere Galerien ab ca. 20 Bilder unbrauchbar, da du für jedes Bild diese 2 Zeilen brauchst. Wenn dann müsstest du die Seite komplett dynamisch machen und da hätte selbst ich momentan noch Probleme (bin grad am lernen :-D). Außerdem musst du ja die kleinen Bilder irgendwie alle anzeigen können. Bei mehr als 20 Bildern ist das eig. fast nur noch mit Frames möglich, und da wüsste ich nicht, ob dieses javascript funktioniert (kannst ja mal ausprobieren, wenn du so viele Bilder haben solltest). Ein weiterer Nachteil, den man aber in Kauf nehmen könnte, wäre, dass du jedes Bild in 2 Größen haben musst.

 

[assmaje]

Vielleicht hilft dir das weiter:

Lightbox 2

Nur so als Empfehlung, finde ich sehr professionell und gut.