| Autor | Zpráva | ||
|---|---|---|---|
| DejwN Profil |
#1 · Zasláno: 29. 4. 2012, 10:05:55
Zdravím,
vím, že tady toto téma už hodněkrát je, přesto se jedná o specifický problém, tak jsem založil nové téma. Mám tento kód: <style type="text/css">
a.p1 {display:block; width:75px; height:75px; text-decoration:none; background:#fff; border:0; margin:20px 0 0 100px; float:left;}
a.p1 img {display:block; border:0;}
a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500;}
a.p1 b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;
-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-o-border-radius: 4px;
-icab-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
-ms-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
}
a.p1:hover b {top:-65px; left:110px; padding:10px; border:1px solid #aaa; background:#fff; opacity:1.0;}
</style>
------------------------
<a class="p1" href="#v"><img src="thumbs.jpg" alt=""><b><img class="large" src="image.jpg" alt=""></b></a>Větší obrázek se po najetí myši zobrazí, vše funguje. Ale poradíte mi, jak nějak pozicovat obrázek vždy na střed monitoru. Píši záměrně střed monitoru != střed stránky. Popř. kdyby někdo věděl, jak udělat takhle, bylo by to super. Jako že ten náhled cestuje podle aktuální pozice kurzoru. Díky moc |
||
| Str4wberry Profil |
#2 · Zasláno: 29. 4. 2012, 10:51:11
Pokud by nevadilo, že žádný obrázkům nadřazený element nebude muset mít
position: relative, můžeš tuto vlastnost přidat pro <body> a konstrukcí .large {position: absolute; left: 50%; margin-left: -25%} tento obrázek dostat na střed.
V jiném případě se asi bez JS neobejdeš. Na odkazu je to řešeno JavaScriptem, kdy se v podstatě jen počítá s pozicí kurzoru při najetí na obrázek a s jeho rozměry. |
||
|
Časová prodleva: 12 let
|
|||
0