bildPopup mit mouseover

[guidmarco]

Hallo
Ich bin gerade an einer Seite und möchte über ein kleines Bild ein Mouseover machen damit sich ein neues gr¨sseres Bild aufmacht, wenn der User über das kleine Bild fährt. Bis jetzt habe ich hingekriegt (sie unten) das sich das kleine durch das grosse Bild auf der gleichen seite auswechselt, wenn man darauf klickt. Wer kann mir helfen und den css so verändern, damit das gewünschte geschieht.

Im moment steht dies in meinem Quellcode:<a href="javascript:gotoWsContentPage(41)"><img border="0" alt="" src="/image.php?id=2263" /></a>

Vileleicht noch zur ergänzung: das kleine Bold hat die abmessung 90/119 pixel, das grosse 245/325.

Warte sehnlichst auf eine Hilfe.

 

[Maik]

Hi,

schau mal hier: http://www.cssplay.co.uk/menu/zoom-gallery.html, oder hier: http://www.cssplay.co.uk/menu/lightbox.html

mfg Maik

 

[guidmarco]

Hallo Maik

Ging ja schnell. Ist ziemlich genau das was ich suche. Baer wie mache ich dies. Habe keine Angaben zum CSS quellcode gefunden.

mfg
guidmarco

 

[Maik]

Browser -> Ansicht -> Seitenquelltext anzeigen.

mfg Maik

 

[guidmarco]

Hallo Maik

Tut mir leid, aber da sehe ich nicht wie das CSS verändert wird, sondern den Pfad. Und den habe ich bei meiner Seite schon gesetzt. Was fehlt ist das Verhalten. Aber lass schon, werde mir schon irgenwie zu helfen wissen. Danke für Deine Bemühungen.
Mfg
Guidomarco

 

[Maik]

Vielleicht hilft dir dieser Code weiter, in dem ich mit einer einzigen Grafikdatei arbeite, und die große Version über das width- u. height-Attribut für das Thumbnail herunterskaliere:

<a href="#" class="popup"><img src="grafik-1.png" width="90" height="119" alt=""><span><img src="grafik-1.png" width="245" height="325" alt=""></span></a>

a.popup {
  text-decoration:none;
  position:relative;
  display:block;
}
a.popup:hover {
  border:none;
}
a.popup img {
  border:none;
}
a.popup span {
  visibility:hidden;
  position:absolute;
  left:10px;
  top:10px;
}
a.popup:hover span {
  visibility:visible;
}

mfg Maik

 

[guidmarco]

Maik
Du bemühst dich redlich. Leider geht die Quelle nicht. Es erscheinen mir nun die beiden Fotos gleichzeitig auf der seiten und es bewegt sich nichts, wenn man darauf klickt.
Gruss mfg
Guidmarco

 

[Maik]

Es erscheinen mir nun die beiden Fotos gleichzeitig auf der seiten

Eine Korrektur meiner frei gewählten Positionsangaben für das Popup verdeckt das Thumbnail vollständig:

a.popup span {
  visibility:hidden;
  position:absolute;
  left:0;
  top:0;
}

und es bewegt sich nichts, wenn man darauf klickt.

Bewegung?

Etwa diese?

<a href="#" onclick="gotoWsContentPage(41)" class="popup">...</a>

mfg Maik