Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<style type="text/css"> .presun_mne {position:relative; cursor:move;} </style> <script type="text/javascript"> var nn6 = document.getElementById && !document.all; var x,y,presun_objektX,presun_objektY; var presun_class = 'presun_mne'; var presun_objekt = null; // aktualni presunovany objekt var presun_objekt2 = null; // predchozi presunovany objekt. kvuli nastaveni z-indexu function presunPohyb(udalost) //mousemove { if (presun_objekt!=null) { presun_objekt.style.left = presun_objektX + (nn6 ? udalost.clientX - x : event.clientX - x) + "px"; presun_objekt.style.top = presun_objektY + (nn6 ? udalost.clientY - y : event.clientY - y) + "px"; return false; // zablokuj udalost } return true; } function presunSpust(udalost) //mousedown { var objekt = nn6 ? udalost.target : event.srcElement; // ziskej objekt, na ktery se kliklo var top_element = nn6 ? "html" : "BODY" ; while (objekt.className!=presun_class && objekt.tagName!=top_element) // opakuj, dokud se nedostanes na tag HTML/BODY nebo na objekt s class rovnajici se hodnote v presun_class { objekt = nn6 ? objekt.parentNode : objekt.parentElement; } if (objekt.className==presun_class) { presun_objekt = objekt; presun_objekt.style.zIndex = 10; presun_objektX = parseInt(presun_objekt.style.left + 0); // ziskej aktualni souradnice objektu presun_objektY = parseInt(presun_objekt.style.top + 0); x = nn6 ? udalost.clientX : event.clientX; // ziskej aktualni polohu mysi y = nn6 ? udalost.clientY : event.clientY; return false; // zablokuj udalost } return true; } function presunZastav(udalost) { if (presun_objekt2!=null) { presun_objekt2.style.zIndex = 1; } if (presun_objekt!=null) { presun_objekt.style.zIndex = 2; } presun_objekt2 = presun_objekt; presun_objekt = null; return true; } // presmeruj funkce mysi z dokumentu na moje document.onmousedown = presunSpust; document.onmousemove = presunPohyb; document.onmouseup = presunZastav; </script> <span style="position: absolute; top: 10px; left: 20px"><style> img {border: 0px solid purple;} a:focus {outline: 0} .lareg {height: 200px; overflow: hidden; position: relative;} .lareg div {height: 2000px; width: 889px; position: relative; } .thum {float: left; width: 52px; margin-right: 17px} .thum a {border: 1px solid black; display: block;} .thum img {display: block; width: 50px; height: 50px} .thum a:hover {border-color: violet;} .lareg {float: left} </style> <div class="thum"><div style="overflow: auto; width: 69px; height: 100px"> <a href="#box1"><img src="http://www.imagehosting.cz/images/backgruuu.jpg"></a> <a href="#box2"><img src="http://www.imagehosting.cz/images/picsardnd.jpg"></a> <a href="#box3"><img src="http://www.imagehosting.cz/images/picsarlll.jpg"></a> <a href="#box4"><img src="http://www.imagehosting.cz/images/picsarlzl.jpg"></a> </div></div> <div class="lareg"> <div id="box1"> <img src="http://www.imagehosting.cz/images/backgruuu.jpg" width="150" height="100"class="presun_mne"> </div> <div id="box2"> <img src="http://www.imagehosting.cz/images/picsardnd.jpg" width="150" height="100"class="presun_mne"> </div> <div id="box3"> <img src="http://www.imagehosting.cz/images/picsarlll.jpg" width="150" height="100"class="presun_mne"> </div> <div id="box4"> <img src="http://www.imagehosting.cz/images/picsarlzl.jpg" width="150" height="100"class="presun_mne"> </div> </div><div style="clear: both"></div> </span>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>