Autor Zpráva
DejwN
Profil
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
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: