# bildPopup mit mouseover



## guidmarco (13. Juli 2010)

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 (13. Juli 2010)

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 (13. Juli 2010)

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 (13. Juli 2010)

Browser -> Ansicht -> Seitenquelltext anzeigen.

mfg Maik


----------



## guidmarco (13. Juli 2010)

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 (13. Juli 2010)

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 (13. Juli 2010)

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 (13. Juli 2010)

guidmarco hat gesagt.:


> 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;
}
```



guidmarco hat gesagt.:


> und es bewegt sich nichts, wenn man darauf klickt.


Bewegung?

Etwa diese?

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


mfg Maik


----------

