Principala » Fişiere » Scripturi |
CSS Popup Image Viewer (CSS Popup Image Viewer)
2010-08-30, 9:33 AM | |
Acest cod il puneti in CSS: Code Acest cod il puneti in CSS: Code <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 60px; /*position where enlarged image should offset horizontally */ } </style> Acest cod il puneti unde vreti sa va apara imaginea. imaginea e mica , iar cand puneti mopuseul pe ea se mareste: Code <a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /> Simply beautiful.</span></a> <a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /> So real, it's unreal. Or is it?</span></a> <a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /> Dynamic Drive</span></a> <a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /> Zoka Coffee</span></a> Va arata cam asa: Acest cod il puneti unde vreti sa va apara imaginea. imaginea e mica , iar cand puneti mopuseul pe ea se mareste: Code <a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /> Simply beautiful.</span></a> <a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /> So real, it's unreal. Or is it?</span></a> <a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /> Dynamic Drive</span></a> <a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /> Zoka Coffee</span></a> | |
Vizualizări: 608 | Download-uri: 0 | Rating: 0.0/0 |
Total comentarii : 0 | |