nicht angemeldet
Galerie mit Bildvergrösserung?
0 0 0 0 0 0 0 Und nur mit CSS
0 0
Galerie mit Bildvergrösserung?
Hallo,
leider wusste ich nicht wie ich mein Thema nennen soll, daher ist es wohl ein wenig verwirrend evtl. Ok, dann moechte ich mal versuchen mein Problem bzw meine Frage zu schildern.
Ich moechte in HTML (wenn moeglich) eine kleine Galerie machen die aussieht wie Fotos die auf einem Tisch liegen. Ich habe hier in Photoshop ein Bild gemacht das zeigt wie es aussehen soll. Die anordung der Fotos sollte so sein. Nun moechte ich das wenn ich mit der Maus auf ein Bild gehen dieses sich von den anderen hervorhebt sprich in den Vordergrund kommt und auf einen Masuklick in der Orginalgroesse angezeigt wird. Ich hoffe das war einigermaßen gut geschildert.
Waere schoen wenn mir einer verstaendloch helfen koennte, bin leider total unwissen in dem Gebiet :-)
Die Seite mit dem Pic ist wie folgt:
http://networld-systems.com/galerie.jpg
Vielen Dank vorab fuer Eure Hilfe!
Gruss
nick
-
Tachchen!
Was soll "hervorheben" genau sein?
Originalbild per Klick im Popup benötigt JavaScript.Gruß
Die schwarze Piste
-
Hello,
Was soll "hervorheben" genau sein?
Originalbild per Klick im Popup benötigt JavaScript.Es muss ja nicht gleich ein Popup sein. Es könnte auch einfach nur ein Link in ein neues Target sein.
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau-
Was soll "hervorheben" genau sein?
Originalbild per Klick im Popup benötigt JavaScript.Es muss ja nicht gleich ein Popup sein. Es könnte auch einfach nur ein Link in ein neues Target sein.
Wow hab gar nicht so schnell mit Antwort gerechenet :-)
Vielen Dank fuer Eure Hilfe. Also wenn ich mit der Maus ueber eines dieser Bilder gehe, sprich in dem Sinne ausdeute, dann soll es nach vorne kommen. Beispiel auf meiner Seite, das linke Bild ist nicht zu sehen. Wenn ich da nun mir der Maus drueber gehe soll es hervor kommen in seiner Orginal Thumnail grösse (damit man das kleine Bild erstmal richtig sehen kann bevor man sich entscheidet es mal näher zu betrachten)und wenn ich es anklicke soll es in einem neuen fenster nur diese bild in der original groesse zeigen.
Achja, also ich bin echt Laie, wenn mir noch jemand zu so etwas einen Quelltext zeigen wuerde, waere das natuerlich klasse. Ich spiel mit Dreamweaver rum (nicht schlagen) und hab daher keine Ahnung vom Code an sich.Vielen Dank.
nick
-
Hello,
Wow hab gar nicht so schnell mit Antwort gerechenet :-)
Wenn man nett fragt, geht das hier immer schnell.
Vielen Dank fuer Eure Hilfe. Also wenn ich mit der Maus ueber eines dieser Bilder gehe, sprich in dem Sinne ausdeute, dann soll es nach vorne kommen. Beispiel auf meiner Seite, das linke Bild ist nicht zu sehen. Wenn ich da nun mir der Maus drueber gehe soll es hervor kommen in seiner Orginal Thumnail grösse (damit man das kleine Bild erstmal richtig sehen kann bevor man sich entscheidet es mal näher zu betrachten)und wenn ich es anklicke soll es in einem neuen fenster nur diese bild in der original groesse zeigen.
Versuch mal folgendes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Layer</TITLE><style type="text/css">
<!--
.thumb1
{
position:absolute;
top:50px;
left:100px;
border:none;
z-index:4;
}.thumb2
{
position:absolute;
top:100px;
left:150px;
border:none;
z-index:5;
}.thumb3
{
position:absolute;
top:150px;
left:200px;
border:none;
z-index:6;
}-->
</style></HEAD>
<BODY style="position:relative;">
<a href="bild1_gross.html" target="bild_gross">
<img id="bild1"
src="bild1_k.gif"
alt="Vorschaubild"
class="thumb1"
onMouseOver="document.getElementById('bild1').style.zIndex=7;"
onMouseOut="document.getElementById('bild1').style.zIndex=4;" /></a><a href="bild2_gross.html" target="bild_gross">
<img id="bild2"
src="bild2_k.gif"
alt="Vorschaubild"
class="thumb2"
onMouseOver="document.getElementById('bild2').style.zIndex=7;"
onMouseOut="document.getElementById('bild2').style.zIndex=5;" /></a><a href="bild3_gross.html" target="bild_gross">
<img id="bild3"
src="bild3_k.gif"
alt="Vorschaubild"
class="thumb3"
onMouseOver="document.getElementById('bild3').style.zIndex=7;"
onMouseOut="document.getElementById('bild3').style.zIndex=6;" /></a></body>
</html>Ist nur so eine erste Idee
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau-
Ist nur so eine erste Idee
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
HA, vielen Dank Tom!! Das ist genau das was ich gesucht habe!
Wow, das ging ja echt fix... und dann noch genau so wie ich es mir gedacht habe :-) Genial. Ich danke Dir!Gruss
nick-
Hello,
HA, vielen Dank Tom!! Das ist genau das was ich gesucht habe!
Wow, das ging ja echt fix... und dann noch genau so wie ich es mir gedacht habe :-) Genial. Ich danke Dir!Ob das nun so genau richtig ist, sollte sich nochmal jemand anders anschauen... ;-)
Nicht alle Sachen, die funktionieren sind auch valide. Also jag es mal durch die Validatoren beim W3C.Und für das Popup würde ich einen "neutralen" Code einrichten.
<a href="bild3_gross.html" target="bild_gross"
onClick="bild_gross=window.open('bild3_gross.html','bild_gross','.....'; bild_gross.focus(); return false;">
<img id="bild3"
src="bild3_k.gif"
alt="Vorschaubild"
class="thumb3"
onMouseOver="document.getElementById('bild3').style.zIndex=7;"
onMouseOut="document.getElementById('bild3').style.zIndex=6;" /></a>damit sich das Bild auch öffnen lässt, wenn JavaScript NICHT eingeschaltet ist.
Mit Hilfe von PHP oder PERL oder anderen API- und CGI-Scripten kannst Du die Dateien dann auch automatisch generieren lassen und z.B. eine "zufällige" Auswahl von Bildern auf den Tisch legen.
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau -
Hello,
HA, vielen Dank Tom!! Das ist genau das was ich gesucht habe!
Wow, das ging ja echt fix... und dann noch genau so wie ich es mir gedacht habe :-) Genial. Ich danke Dir!Schau Dir auch das nochmal an:
http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htmganz ohne JavaScript ...
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau
-
-
-
-
-
-
Hello,
Mit JavaScript und CSS zusmmen sollte das auf jeden Fall klappen. und vorhin ahtten wir auch gerade einen Threead für eine Textbox, aus dem man das sicher auch nur mit CSS ableiten könnte.
Unter Verwendung von JavaScript würde ich einfach nur den z-index bei onMouseOver umschalten und hoffen, dass der Browser das schnallt. Und bei onMouseOut dann eben wieder zurück...
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau -
Hallo nick,
http://networld-systems.com/galerie.jpg
Du könntest die Thumbnails absolut positionieren (position:absolute) und die "Reihenfolge" (Vorder-/Hindergrund) mit Hilfe der CSS-Eigenschaft z-index festlegen. Bei onMouseOver setzt du dann den z-index per JavaScript auf einen Wert, der höher als alle anderen ist. Bei onClick öffnest du dann - ebenfalls per JavaScript - das neue Fenster mit dem Bild in Originalgrösse.
Gruss,
DanielPS: Die Infos in SelfHTML kannst du selber suchen (bin ich Moment zu faul), habe dir ausdrücklich die relevanten Begriffe genannt.