| CSS Povečava slike |
| CSS vodiči |
|
HTML in CSS koda:
<html>
<head> <style type="text/css"> #povecava {position:relative; top:100px; left:100px; } #povecava a.p1, #povecava a.p1:visited {display:block; width:150px; height:104px; border:5px solid #ccc;} #povecava a img {border:0;} #povecava a .velika {display:block; position:absolute; width:0px; height:0px; border:0; top:0; left:0;} #povecava a.p1:hover .velika {display:block; position:absolute; top:-70px; left:250px; width:350px; height:243px; border:10px solid #ccc;} </style> </head> <body> <div id="povecava"> <a class="p1" href="/"><img src="/slika1.png"><img class="velika" src="/slika2.png"></a> </div> </body> </html>
1. # vrstica: določa odmik manjše slike (slika1) od zgornjega (top) in levega (left) roba
2. # vrstica: določa višino (height) in širino (width) manjše slike ter obrobo (border)
3. # vrstica: odstrani obrobo, ki bi jo vaš brskalnik »mogoče« prikazal
4. # vrstica: določi višino (opx) in širino (0px) večje slike (slika2), zato, da se slika ne vidi. Odmika (top, left) določata odmik glede na manjšo sliko
5. # vrstica: nastavitve, ko greste z miško čez: Robova (top, left) določata odmik od manjše slike; width, height določata širino in višino večje slike; border določa obrobo
*Primer lahko najdete med Prenosi.
|
| Sorodni vodiči | |
Moje-Mesto.com
Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.
| Zadnje na forumu | |||
|
|||