Webseite Bild Text Link Popup Aussehen Maus

Bild vergrößert anzeigen

Von: , Frage gestellt am Fr, 28. Mär 2008

Hallo zusammen,
wie müsste die css aussehen, dass wenn ich mit der Maus auf ein Bild gehe, (nicht klicken), dass sich das Bild dann vergrößert, allerdings, in einer Art Sprechblase, oder popup Fensterchen darstellt? Was eben besser aussieht und moderner ist? Auf der Webseite sind zig Bilder, die alle bein anfahren mit der Maus vergrößert dargestellt werden sollen, natürlich jedes einzeln für sich. Und wie müsste dann der "img" TAG aussehen?

Vielen Dank schon jetzt für jegliche Hilfe

Gruß
Neckar

3 Antworten zu dieser Frage

1. Antwort von nach 3 Stunden 0 hilfreich

   Re: Bild vergrößert anzeigen

   Hi Neckar
   
   also grundsätzlich wirst du mit der hover eigenschaft, die du im Css verwenden müsstest im IE ein Problem haben. Denn der IE kennt hover nur im Zusammenhang mit Links.
   
   Auf Javascript wirst du nicht wirklich verzichten können wenn du ein Popup haben willst.
   Daher könntest du das gleich ins Javascript reinschreiben.
   
   lg
   aya [Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]
   

   • Antwort von nach 4 Stunden 0 hilfreich

     Re^2: Bild vergrößert anzeigen

     ich hab mal rumprobiert und damit sollt's gehen, da das div ein Link ist, der zwar nirgends hinzeigt aber egal.
     
     <style>
     #pic {position:relative; top:10px; left:100px; width:75px; background-color:#fff; z-index:100;}
     #pic a.lnk, #menu a.lnk:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
     #pic a img {border:0;}
     #pic a.lnk:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
     #pic a.lnk:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px; border:10px solid #ccc;}
     #pic a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
     </style>
     
     <div id="pic">
     <a class="lnk" href="#alibi">
     <img src="imageName.jpg" />
     <img class="large" src="imageName.jpg" />
     </a>
     </div>
     

2. Antwort von nach 3 Stunden 1 hilfreich

   Re: Bild vergrößert anzeigen

   So etwas in er Art?
   
   http://www.unser-oskar.de/galerie.html
   
   http://www.dynamicdrive.com/style/csslibrary/item/cs...
   
   http://www.cssplay.co.uk/menu/lightbox.html#Trees
   
   Andreas
   

Keine passende Antwort gefunden? Jetzt eigene Frage stellen!