HTML CSS Windows Photoshop
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header

haber

-

Uçak bileti

-
 Avtor: -primož-    03.09.09
CSS Povečava slike               
CSS vodiči

povecava_slike_thumbHover povečava slike

Kliknite za PRIKAZ

 

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>




Razlaga kode:

 

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


Upam, da si boste s kodo lahko kako pomagali in da bo to naredilo vašo stran še bolj zanimivo.

 

*Primer lahko najdete med Prenosi.

 

Komentiraj:
Jure |19-03-2011 13:01
Kako bi pa lahko potem naredil, da bi se večja slika prikazala ne glede na položaj strani na sredini in 50px od manjše slike?
Jure |19-03-2011 13:01
50px v desno...
-primož- |19-03-2011 15:29
Velika slika je zaradi position: absolute; pozicionirana glede na div #povecava. Da bi spremenil pozicijo velike slike moraš spremeniti: top:-70px; left:250px;

Če nisi imel tega v mislih prosim malo bolj obrazloži problem.

Lep pozdrav,
-primož-
Jure |20-03-2011 18:01
Recimo, da imaš veliko vsebine na strani, morš scrollat in če imaš nekje na koncu strani eno sliko, povečane slike ne boš videl, ker se bo prikazala določeno pikslov od vrha in ne od zaslona. Upam, da razumeš kaj hočem povedati.
-primož- |20-03-2011 19:20
Živjo,

vem kaj misliš ... ali si odstranil div povecava? oz. ali si odstranil position: relative; v tem divu? Ker če tega ni se večja slika nima na kaj orientirati in se zato orientira na body (kakor vidiš ti). Poglej, če je to to, drugače mi pa na e-mail pošlji svoj primer, pa bom probal najti rešitev.

Lp,
-primož-
Jure |20-03-2011 21:23
Jah težava je v tem kr uporabljam asp:repeater, da mi bere podatke iz baze...če uporabim top:auto je nekako podobn rezultat, ampak mi pa potem sliko prikaže malo nižje kar je malo moteče...drugače pa to izven repeaterja dela BP.
-primož- |20-03-2011 21:38
Uf, z aspjem nimam veliko izkušenj. Zdajle sem vse še enkrat prebral. Ali je problem le pri spodnjih slikah na strani? Če je temu tako potem spodnjim slikam določi drug class (npr. velika2) in jim spremeni top:
Jure |21-03-2011 04:41
Problem je pri vseh slikah, ki se pokažejo povečano..
-primož- |21-03-2011 09:42
Mi lahko prosim pošlješ screenshot na trcek.primoz@gmail.com in po možnosti še označiš, kje bi morala slika biti. Tipam v temi tukaj :)

Lp,
-primož-
Ime
E-mail
Spletna stran

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

 
Sorodni vodiči

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

 

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé, Čokolada

Follow us on Twitter
Follow us on Twitter
Follow us on Twitter

Oglasi