Kann das klappen, ein Bild bei Mausberührung zu vergrößern? Aber ja, und es ist sogar recht einfach. CSS sei Dank!

Viel benötigen wir nicht. Wir versehen eine Grafik unserer Wahl mit einer beliebigen Klasse. Unser Beispiel verwendet Zoom. Außerdem wird ein Hyperlink benötigt. Sofern man ihn nicht wirklich braucht, genügt ein Anker (#), der den gleichen Effekt mitbringt, aber keine Aktion auslöst.

 <a href="#">
 <img
class="zoom" src="bild.gif" alt="" width="80"
height="80" border="0">
 </a>

Soweit ist das nichts Besonderes, und auch am Bild, im Browser betrachtet, sind keine Veränderungen zu bemerken. Das ändert sich aber, wenn unser Stylesheet eingesetzt wird. Der IE mag nur reagieren, wenn ein leerer Filter definiert wird, einen Grund dafür konnten wir nicht ausmachen.

      <style type="text/css">

a:hover .zoom {
 filter='()';}

      a:link .zoom {
 width
: 80px;
 height : 80px; }

      a:hover .zoom {
 width : 220px;

height : 220px; }
 </style> 

Einfach in den Dateikopf setzen oder einer externen Datei anfügen. Moderne Browser kommen ohne Probleme damit zurecht. Ältere Exemplare reagieren nicht und zeigen das Bild auch bei Mausberührung in seiner gewohnten Größe.

Live Demo

Verwandte Artikel

• Variable Bildgröße (0)
• Villa Kunterbunt (0)
• Vertikale Zentrierung mit CSS (2)
• Verschachtelte Rahmen (0)
• URLs im Ausdruck (0)
• Unterstreichen ist nicht genug! (0) €
• Unterschiedliche Farben für Listenzeichen (0)