Drag and Drop
<script>
<link rel=stylesheet type="text/css" href="DragAndDrop.css">
<script src="DragAndDrop.js"></script>
<script src="rozmeryObrazovky.js"></script>
window.onload = function () {
dragElement(document.getElementById("mydiv1"));
dragElement(document.getElementById("mydiv2"));
}
function zmenPozici(div, pozice) {
document.getElementById(div).style.zIndex = pozice;
}
function klikIkona(ktery, co) {
var div = document.getElementById("mydiv" + ktery);
var telo = document.getElementById("telo" + ktery);
if (co == "0") {
telo.style.display = "none";
div.style.top = (vyskaObrazovky - 36) + "px";
} else if (co == "1") {
telo.style.display = "none";
} else if (co == "2") {
telo.style.display = "inline";
div.style.top = (10) + "px";
}
}
</script>
<div id="mydiv1" onMouseOver="zmenPozici('mydiv1', 101)" onMouseOut="zmenPozici('mydiv1', 100)">
<div id="mydiv1hlavicka">
<div class="ikony">
<img onClick="klikIkona(1, 0)" src="img/red.png" class="ikona" />
<img onClick="klikIkona(1, 1)" src="img/yellow.png" class="ikona" />
<img onClick="klikIkona(1, 2)" src="img/green.png" class="ikona" />
</div>
<div class="nadpis">Sheldon Cooper</div>
</div>
<div id="telo1">
<img src="img/sheldon.jpg" />
</div>
</div>
<div id="mydiv2" onMouseOver="zmenPozici('mydiv2', 101)" onMouseOut="zmenPozici('mydiv2', 100)">
<div id="mydiv2hlavicka">
<div class="nadpis">Missy Cooper</div>
</div>
<div id="telo2">
<img src="img/missy.jpg" />
</div>
</div>