Wie kann ich einen solchen Bildereffekt machen?
0 0 0 0 0 
Felix Riesterer
0 
Gernot Back
0
Wie kann ich einen solchen Bildereffekt machen?
Hallo,
wie kann ich eine solchen Effekt erstellen wie in meinem Beispiel unter dem folgenden Link. Ich möchte, wenn ich über ein Bild mit der Maus fahre, dass sich dieses wie eine Art Lupe direkt vergrößert.
http://www.imagesource.de/search/May_2006_Gallery
Gruss
Thomas
-
Moin!
wie kann ich eine solchen Effekt erstellen wie in meinem Beispiel unter dem folgenden Link. Ich möchte, wenn ich über ein Bild mit der Maus fahre, dass sich dieses wie eine Art Lupe direkt vergrößert.
Ich sehe auf dieser Seite keinen solchen Effekt.
Aber mit Javascript gehts - mit Javascript wird Interaktivität im Browser grundsätzlich programmiert.
Sorge dafür, dass eine größere Version des Bildes z.B. in einem Layer am gewünschten Platz eingeblendet wird, wenn onmouseover passiert, und er wieder verschwindet, wenn onmouseout passiert - ganz genauso, wie bei den "dynamischen grafischen Buttons" in den Javascript-Beispielen von SELFHTML.
- Sven Rautenberg
--
My sssignature, my preciousssss!-
Hallo,
Ich sehe auf dieser Seite keinen solchen Effekt.
Doch. Du musst die Maus länger drüberhalten. Natürlich ist dass nicht gerade elegant.
Aber mit Javascript gehts - mit Javascript wird Interaktivität im Browser grundsätzlich programmiert.
Sorge dafür, dass eine größere Version des Bildes z.B. in einem Layer am gewünschten Platz eingeblendet wird, wenn onmouseover passiert, und er wieder verschwindet, wenn onmouseout passiert - ganz genauso, wie bei den "dynamischen grafischen Buttons" in den Javascript-Beispielen von SELFHTML.In diesem Beispiel ist es allerdings nicht ganz so einfach, denn das Bild vergrößert sich erst allmählich. Es erscheint also nicht einfach nur ein größeres Bild. Sowas mit Javascript zu programmieren wäre schon aufwändiger. Dazu bräuchtest du mehrere Bilder verschiedener Größe.
Viele Grüße
--
(((C = C + 1 == C++) == true) == true)-
Hi there,
In diesem Beispiel ist es allerdings nicht ganz so einfach, denn das Bild vergrößert sich erst allmählich. Es erscheint also nicht einfach nur ein größeres Bild. Sowas mit Javascript zu programmieren wäre schon aufwändiger. Dazu bräuchtest du mehrere Bilder verschiedener Größe.
Naja, dazu reicht ein Bild, das mit javascript skaliert wird, Du mußt nur einen guten Kompromiss zwischen der Größe der Thumbs und dem vergrößerten Bild finden. Deine Lösung würde auf Rechnern von Modembesitzern nicht funktionieren, denn da müßten zu viele Bilder vorgeladen werden, wenngleich sich das natürlich auch realisieren liesse. Vom Programmieraufwand her ist auch das Größerwerden der Bilder nicht wirklich dramatisch...
-
Hallo Klawischnigg,
Deine Lösung würde auf Rechnern von Modembesitzern nicht funktionieren, denn da müßten zu viele Bilder vorgeladen werden, wenngleich sich das natürlich auch realisieren liesse. Vom Programmieraufwand her ist auch das Größerwerden der Bilder nicht wirklich dramatisch...
Also bei der hier vorgestellten Lösung
http://www.imagesource.de/search/May_2006_Gallery
wird das größere Bild immer erst geladen, wenn man mit der Maus auf das kleine Vorschaubild geht. Wenn der Ladevorgang abgeschlossen ist, wird das Großbild zunächst mit den Maßen des Thumbnails passgenau als Layer über dasselbe eingeblendet, sodass man als Betrachter noch nichts merkt. Erst danach wird allmählich in einem Intervall auf die Großversion des Bildes skaliert.
Das sollte sogar mit einem 28K-Modem gehen, dauert dann halt etwas länger.
So etwas sollte sich meines Erachtens sogar auch mit validem Code programmieren lassen, was bei obiger Umsetzung ja leider nicht der Fall ist.
Gruß Gernot
-
Hi there,
So etwas sollte sich meines Erachtens sogar auch mit validem Code programmieren lassen, was bei obiger Umsetzung ja leider nicht der Fall ist.
Keine Frage, ich hab soetwas einmal für eine Diashow gemacht, das war, aufgrund von praktisch nicht vorhandenem HTML, total valide ;)
-
-
-
Moin!
Ich sehe auf dieser Seite keinen solchen Effekt.
Doch. Du musst die Maus länger drüberhalten. Natürlich ist dass nicht gerade elegant.
Wie lange ungefähr? Mehr als 5 Sekunden?
Bei mir passiert da jedenfalls nix.
- Sven Rautenberg
--
My sssignature, my preciousssss!-
Hallo,
Wie lange ungefähr? Mehr als 5 Sekunden?
Bei mir passiert da jedenfalls nix.
Versuchs mit dem IE! Im Opera gings bei mir auch nicht!
Viele Grüße
--
(((C = C + 1 == C++) == true) == true)-
Moin!
Wie lange ungefähr? Mehr als 5 Sekunden?
Bei mir passiert da jedenfalls nix.
Versuchs mit dem IE! Im Opera gings bei mir auch nicht!
Werde ich sicher nicht!
- Sven Rautenberg
--
My sssignature, my preciousssss!
-
-
-
Lieber Richard,
das Bild vergrößert sich erst allmählich. [...] Dazu bräuchtest du mehrere Bilder verschiedener Größe.
da möchte ich widersprechen! Du könntest doch das große Bild zunächst verkleinert anzeigen lassen (width und height helfen), um dann über eine setTimeOut-gesteuerte Funktion innerhalb weniger Millisekunden die Werte auf die der tatsächlichen Größe zu erhöhen!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-
-
Hallo Thomas,
Offensichtlich mit Javascript
vgl.: http://www.imagesource.de/include/popup.js
<a id="dlSearchResults__ctl0_Hyperlink1" href="/search/image.aspx?id=265325"> <img id="dlSearchResults__ctl0_Image1" onmouseover="thumb_mouseover(this)" compsrc="http://images.imagesource.com/preview/wmcomps/IS193-002.jpg" src="http://images.imagesource.com/preview/thumbnails/IS193-002.jpg" alt="" border="0" /> </a>Was mich dabei allerdings selbst verwundert, ist das Attribut "compsrc" beim Image-Element, das das W3C (auch für den gewählten Doctype) nirgends aufführt
http://www.w3.org/TR/html40/struct/objects.html#h-13.2
und dennoch als keinen der 464 Fehler auf der Seite erkennt:
http://validator.w3.org/check?uri=http://www.imagesource.de/search/May_2006_Gallery
Gruß Gernot
-
Hi,
und dennoch als keinen der 464 Fehler auf der Seite erkennt:
http://validator.w3.org/check?uri=http://www.imagesource.de/search/May_2006_Gallery
dieser Validator ist wohl bei sovielen Fehlern überfordert. ;-)
Teste sowas lieber mit Validome: http://www.validome.org/validate/?uri=http://www.imagesource.de/search/May_2006_Gallery&lang=ge&doctype=doctypeAUTO&charset=charsetAUTO
freundliche Grüße
Ingo
-
-
1. Hoverbox (mit Code zum Download als zip-Datei) http://sonspring.com/journal/hoverbox-image-gallery und Demo unter [http://host.sonspring.com/hoverbox/@title=View Example].
2. Lightbox http://www.huddletogether.com/projects/lightbox/