In einer Tabelle, ein Bild mit "onmouseover" vergrößern

Status
Nicht offen für weitere Antworten.

Randpoger

Grünschnabel
halo!

Hab folgendes Anliegen:
will in einer Tabelle mehrere kleine Bilder einbinden...und wenn man über die drüber fährt solln die darunter vergößert werden. Und dann erst bei einem Klick darauf in nem neuen Fenster geöffnet werden.

So soll das dann aussehen etwa: (nicht zu beachten is das Menü oben, und das große Bilde unter den kleinen soll nur das darstellen, was passiert wenn man über ein kleines Bild drüberfährt mit der maus).

http://www.firmarichter.de/bilder.html

und hier der Code (überarbeitet im gegensatz zur Site) für ein einzelnes kleines Bild:

HTML:
<A HREF="eingang.jpg" onmouseout="" onmouseover="('<IMG SRC=eingang.jpg width=149 height=48>');"STYLE="cursor:crosshair"><IMG SRC="eingang.jpg" BORDER="0" WIDTH="50" HEIGHT="50"></A>

(grösse und so ist noch nicht die "endgröße")

Ja aber die ganze Aktion klappt noch nicht! *g*

Wird jemand aus meinem Anliegen schlau und kann mir da jemand helfen?

Greetz!
 
Hallo Randpoger,

die Universalattribute "onMouseover" und "onMouseout" sind JavaScript-Event-Handler. Deshalb erwarten sie natürlich auch als Übergabeparameter in der Klammer ein Scriptum, wie z.B. eine JavaScript-Funktion, und kein HTML-Tag.

Um dein Vorhaben zu realisieren ist auch gar kein JavaScript notwendig, da es mit CSS m.E. viel einfacher geht:




  • Du deklarierst das A-Element als Block und versiehst es mit den Breiten- und Höhenwerten des großen Bildes. In diesen Block setzt du das kleine Bild als Hintergrundbild ohne Wiederholungen ein.
  • In der hover-Pseudoklasse dieses Selektors setzt du als Hintergrundbild jetzt nur noch das große Bild ein.
Schon fertig.


Edit: Du solltest also zwei Bilder haben: Ein großes und ein kleines.
 
Zuletzt bearbeitet:
ahh stimmt...ich Depp! *gg*!

Na ich werde mal mit CSS probieren, hab da zwar noch nie was gemacht und find im mom nix...aber mal sehn!

Also dicken Dank erstmal!

Greetz
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.
Zurück