Homepage selbermachen 7.851 Themen, 35.615 Beiträge

Verfolgung starten Optionen

Bildvergrößerung ohne Klick

wowa1 / 15 Antworten / Baumansicht Nickles

Hallo @all,

habe gerade eine bisher mir unbekannte Variante der Bildvergrößerung auf einer Homepage entdeckt. Beim Berühren mit dem Cursor verwandelt sich dieser wie üblich in eine Hand und das Bild erscheint in Großformat, ohne dass man geklickt hätte. Es legt sich einfach auf die Seite, ohne neues Fenster.
Wer hat dafür eine (auch für einen relativen Laien verständliche) Anleitung? Benutze für die Homepage CMS (contenido).

Gruß, Wolfgang

bei Antwort benachrichtigen
Olaf19 wowa1 „Bildvergrößerung ohne Klick“
Optionen

So wie du das beschreibst, klingt das nach einem ganz gewöhnlichen und wenig spektakulären Mouse-Over-Effekt... Kannst du uns den Link zu der Seite geben, damit wir uns selbst ein Urteil bilden können? Danke.

CU
Olaf

Die Welt ist ein Jammertal ohne Musik. Doch zum Glueck gab es Bach, Beethoven, Haendel und Goethe (Helge Schneider)
bei Antwort benachrichtigen
wowa1 Olaf19 „Bildvergrößerung ohne Klick“
Optionen

@Olaf

Gefunden habe ich die Bildvergrößerung auf:

www.preisroboter.de/ergebnis24456.html, eine Seite mit Produkten von J. Wolfskin, besonders Beispiel "Stirnband".

Über eine Beurteilung freue ich mich!

Gruß, Wolfgang

bei Antwort benachrichtigen
Borlander wowa1 „Bildvergrößerung ohne Klick“
Optionen

Gibt zwei Möglichkeiten:
Entweder mit CSS oder JavaScript.

Die CSS-Version kommt bei mit auf meiner VK zum Einsatz ;-)


Gruß
Borlander

bei Antwort benachrichtigen
wowa1 Borlander „Gibt zwei Möglichkeiten: Entweder mit CSS oder JavaScript. Die CSS-Version...“
Optionen

@Borlander

Danke für den Hinweis. Kannst du mir mitteilen, was deine "VK" ist?

Gruß, Wolfgang

bei Antwort benachrichtigen
Olaf19 wowa1 „@Borlander Danke für den Hinweis. Kannst du mir mitteilen, was deine VK ist?...“
Optionen

http://www.nickles.de/c/vcard/81978.htm

;-)

CSS scheint mir der Königsweg zu sein. Bei JavaScript musst du bedenken, dass einige - wenn nicht gar viele - User diese Funktion aus Sicherheitsgründen abgeschaltet haben. Mit JavaScript ist im Laufe der Zeit einfach zu viel Schindluder getrieben worden, z.B. so Zickenkram wie Sperrung der rechten Maustaste o.Ä.

CU
Olaf

Die Welt ist ein Jammertal ohne Musik. Doch zum Glueck gab es Bach, Beethoven, Haendel und Goethe (Helge Schneider)
bei Antwort benachrichtigen
Hausmeister Krause wowa1 „@Borlander Danke für den Hinweis. Kannst du mir mitteilen, was deine VK ist?...“
Optionen

VK ist die VisitenKarte.

siehe hier:

http://www.nickles.de/c/vcard/81978.htm

Wenn Du Sorgen hast, dann erzähle sie nicht Deinen Freunden, sondern Deinen Feinden, denn die freuen sich darüber. - Harald Lesch
bei Antwort benachrichtigen
Hausmeister Krause Nachtrag zu: „VK ist die VisitenKarte. siehe hier: http://www.nickles.de/c/vcard/81978.htm“
Optionen

Wenn Du nicht weiterkommst, dann schicke mir eine Private Nachricht hier über das Nickles-Nachrichtensystem mit Deiner Emailadresse.

Dann kann ich dir einen fertigen CSS Code für dieses Vorhaben schicken. Müsstest Du dann nur auf Deine Bedürfnisse anpassen.

Ich krieg nämlich jedesmal nen Krampfanfall, wenn ich hier im Forum HTML oder CSS Code posten will.

Wenn Du Sorgen hast, dann erzähle sie nicht Deinen Freunden, sondern Deinen Feinden, denn die freuen sich darüber. - Harald Lesch
bei Antwort benachrichtigen
Borlander Hausmeister Krause „Wenn Du nicht weiterkommst, dann schicke mir eine Private Nachricht hier über...“
Optionen
Ich krieg nämlich jedesmal nen Krampfanfall, wenn ich hier im Forum HTML oder CSS Code posten will.
Hatte bislang gedacht Du würdest mehr aushalten...

Ist doch nun wirklich nicht so wild: Einfach < durch &lt; und > durch &gt; ersetzen und schon ist alles in bester Ordnung. Bei CSS mußt Du gar nix machen ;-)
bei Antwort benachrichtigen
Hausmeister Krause Borlander „ Hatte bislang gedacht Du würdest mehr aushalten... Ist doch nun wirklich nicht...“
Optionen
Hatte bislang gedacht Du würdest mehr aushalten...
Nicht wenn mein sensibler Part mal für einen Tag die Oberhand hat ;-)

naja, versuchen wirs einfach mal:

----------------------------------------------------------------------------------------------------------------------------
<style type="text/css">
#fotobox {
width:100%;
margin:3px;
padding:3px;
color:#000;
}
#fotobox a img {
float:left;
height:94px;
width:125px;
border:1px solid #000;
margin:0px 6px 0px 0px;
}
/* Diese Anweisung für die Anzeige in Geckos, Safarie und Opera */
#fotobox img:hover {
width:300px;
height:225px;
}
/* Ohne diese Anweisung funktioniert das Zoomen im IE nicht */
#fotobox a:hover img {
width:300px;
height:225px;
}
/* Ohne diese Anweisung funktioniert das Zoomen im IE nicht */
#fotobox a:hover {
padding:0;
}
#fotobox p {
padding:0; margin:0;
font: 500 0.75em/1.5 verdana,arial,helvetica,sans-serif;
}
</style>


<body>
<div id="fotobox">
<a href="Bild.jpg" target="_blank"><img src="Bild.jpg" alt="Das Bild" /></a>
</div>
</body>
Wenn Du Sorgen hast, dann erzähle sie nicht Deinen Freunden, sondern Deinen Feinden, denn die freuen sich darüber. - Harald Lesch
bei Antwort benachrichtigen
mr.escape Borlander „ Hatte bislang gedacht Du würdest mehr aushalten... Ist doch nun wirklich nicht...“
Optionen
Re: Bildvergrößerung ohne Klick ............................................................
> durch &gt; würde ich mir sparen, dafür aber führende/mehrfache leerstellen durch "&nbsp;" ersetzen und das ganze u.u. in <tt style="white-space:nowrap">... inhalt ...</tt> packen.

mr.escape
"The man who trades freedom for security does not deserve nor will he ever receive either." - Benjamin Franklin"Wer seine Freiheit aufgibt, um Sicherheit zu erreichen, wird beides verlieren." - Georg Christoph Lichtenberg
bei Antwort benachrichtigen
Olaf19 mr.escape „Re: Bildvergrößerung ohne Klick...“
Optionen
> > durch &gt; würde ich mir sparen,

Ich auch! Dieser Kunstgriff ist *nur* beim Öffnen der spitzen Klammer erforderlich - um die Ausführung des HTML-Tags zu unterdrücken - beim Schließen der spitzen Klammer sind diese Verrenkungen schlicht überflüssig. > Das > klappt > auch > so > ! ;-)

CU
Olaf
Die Welt ist ein Jammertal ohne Musik. Doch zum Glueck gab es Bach, Beethoven, Haendel und Goethe (Helge Schneider)
bei Antwort benachrichtigen
Borlander mr.escape „Re: Bildvergrößerung ohne Klick...“
Optionen

Die meisten Browser kommen zwar damit zurecht wenn Du die schließenden Klammern nicht durch ihre Entität ersetzt, aber das ist schlicht und einfach kein sauberes HTML...

bei Antwort benachrichtigen
mr.escape Borlander „Die meisten Browser kommen zwar damit zurecht wenn Du die schließenden Klammern...“
Optionen
Re: Bildvergrößerung ohne Klick ............................................................
Die meisten Browser kommen zwar damit zurecht wenn Du die schließenden Klammern nicht durch ihre Entität ersetzt
Die frage ist, ob es welche gibt, die nicht damit zurecht kommen?

schlicht und einfach kein sauberes HTML...
Formal ist das wohl so, aber aus pragmatischen gründen kann man hier mal fünfe gerade sein lassen, da beim posten eine automatische übersetzung erfolgt. Aufpassen muss man nur noch mit "&".

Beim herumspielen mit dem w3c-validator habe ich dann gesehen, dass mein "Posting-Abspann" nicht ganz koscher ist und wollte das ändern. Dabei habe ich, wie vor einiger zeit schon einmal, wieder probleme mit den blöden maskierten anführungszeichen/apostroph bekommen, die die tags versauen. Anscheinend leidet dein eigener abspann unter den gleichen symptomen, zumindest für den validator.

mr.escape
"The man who trades freedom for security does not deserve nor will he ever receive either." - Benjamin Franklin"Wer seine Freiheit aufgibt, um Sicherheit zu erreichen, wird beides verlieren." - Georg Christoph Lichtenberg
bei Antwort benachrichtigen
wowa1 mr.escape „Re: Bildvergrößerung ohne Klick...“
Optionen

Danke, ich habe genug hilfreiche Anregungen bekommen!

P.S.
Ich finde es interessant, wie sich meine Anfrage in eine Diskussion der "Nickles-VIPs" verwandelt hat ;-)

Gruß an alle Schreiber!
Wolfgang

bei Antwort benachrichtigen
Olaf19 mr.escape „Re: Bildvergrößerung ohne Klick...“
Optionen
> Aufpassen muss man nur noch mit "&"

Genau, das berühmt-berüchtigte "Ampersand"-Zeichen, im Deutschen auch als "Kaufmännisches Und" bekannt. Dafür wiederum gibt es die Entity & - jetzt musste ich zweimal "amp;amp;" schreiben, das erste Mal, um das &-Zeichen zu "entzaubern", das zweite Mal um die Syntax der Entity zu vervollständigen ;-)

@wowa1: Sorry für so viel OT :-D

CU
Olaf
Die Welt ist ein Jammertal ohne Musik. Doch zum Glueck gab es Bach, Beethoven, Haendel und Goethe (Helge Schneider)
bei Antwort benachrichtigen