Bild vergrößert neben Courser anzeigen

Servus Community,

ich habe eine Tabelle erstellt, bei der alle Produkte hinterlegt sind, die sich in der entsprechenden Datenbank befinden.
In der ersten Zelle bei jedem Eintrag habe ich ein kleines Bild (50x50px) dargestellt.

Nun möchte ich, dass wenn man mit der Maus über dieses Vorschaubild fährt, dass dann direkt am Mauszeiger dieses Bild nur in größerer Darstellung eingeblendet wird.

Ich hoffe Ihr könnt mir hierbei helfen.

Schöne Grüße
Volcom

Mit CSS-Bordmitteln wäre hier ein „CSS Tooltip“ der Lösungsweg.

Allgemein: http://www.w3schools.com/css/css_tooltip.asp
Speziell mit Bild: http://www.menucool.com/tooltip/css-tooltip

Hallo Volcom

Du denkst hoffentlich auch an Touchscreens, die keinen Hover-Effekt kennen und inzwischen über 70% aller Geräte im Internet ausmachen. Zumal der Begriff „Produkte“ darauf hindeutet, dass du eventuell eine gewerbliche Website erstellen willst.

Gruss

MrMurphy

Korrekt. Die Beispiele erscheinen auf (m)einem Touchscreen erst bei Berührung, und verschwinden genau so wieder :cool:

Möglicherweise würde es ja auf ein Touchgerät zusätzlich mit :focus und tabindex=„0“ funktionieren.

Ist ja nett, dass sich Tooltips auch rein per CSS umsetzen lassen, aber es bläht das Markup natürlich unnötig auf.