100 lines
2.9 KiB
HTML
100 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The web site of alienhospital</title>
|
|
<!-- The style.css file allows you to change the look of your web pages.
|
|
If you include the next line in all your web pages, they will all share the same look.
|
|
This makes it easier to make new pages for your site. -->
|
|
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
|
|
|
|
</head>
|
|
<body>
|
|
<center><a href="/homepage">home</a><br>
|
|
<div id="tns"><img src="/dressup/image1.png" width="400px"></div>
|
|
|
|
<h1 style="color: white;"> dress up the spirit!!</h1></center>
|
|
|
|
<div id="draggable">
|
|
<img src="/dressup/heartglasses.png" width="150px" class="dragme"> <img src="/dressup/purpleshades.png" width="150px" class="dragme"> <img src="/dressup/rainbowtie.png" width="150px" class="dragme"> <img src="/dressup/heartie.png" width="150px" class="dragme"><img src="/dressup/hat1.png" width="150px" class="dragme"> <img src="/dressup/hat2.png" width="100px" class="dragme"> <img src="/dressup/hat3.png" width="100px" class="dragme"> <img src="/dressup/hat4.png" width="100px" class="dragme">
|
|
<div id="shirt" class="dragme"><img src="/dressup/dmshirt.png" width="385px" class="dragme"></div>
|
|
<script>
|
|
function startDrag(e) {
|
|
// determine event object
|
|
if (!e) {
|
|
var e = window.event;
|
|
}
|
|
if(e.preventDefault) e.preventDefault();
|
|
|
|
// IE uses srcElement, others use target
|
|
var targ = e.target ? e.target : e.srcElement;
|
|
|
|
if (targ.className != 'dragme') {return};
|
|
// calculate event X, Y coordinates
|
|
offsetX = e.clientX;
|
|
offsetY = e.clientY;
|
|
|
|
// assign default values for top and left properties
|
|
if(!targ.style.left) { targ.style.left='0px'};
|
|
if (!targ.style.top) { targ.style.top='0px'};
|
|
|
|
// calculate integer values for top and left
|
|
// properties
|
|
coordX = parseInt(targ.style.left);
|
|
coordY = parseInt(targ.style.top);
|
|
drag = true;
|
|
|
|
// move div element
|
|
document.onmousemove=dragDiv;
|
|
return false;
|
|
|
|
}
|
|
function dragDiv(e) {
|
|
if (!drag) {return};
|
|
if (!e) { var e= window.event};
|
|
var targ=e.target?e.target:e.srcElement;
|
|
// move div element
|
|
targ.style.left=coordX+e.clientX-offsetX+'px';
|
|
targ.style.top=coordY+e.clientY-offsetY+'px';
|
|
return false;
|
|
}
|
|
function stopDrag() {
|
|
drag=false;
|
|
}
|
|
window.onload = function() {
|
|
document.onmousedown = startDrag;
|
|
document.onmouseup = stopDrag;
|
|
}
|
|
</script>
|
|
</div></div>
|
|
</body>
|
|
<style>
|
|
body {
|
|
background-image: url('https://i.ibb.co/m50KTwSN/rob-laughter-WW1js-In-Xgw-M-unsplash.jpg');
|
|
background-size: cover;
|
|
|
|
}
|
|
|
|
#tns {
|
|
margin: 0 auto;
|
|
width: 400px;
|
|
}
|
|
|
|
a {
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
.dragme {
|
|
position: relative;
|
|
|
|
cursor: move;
|
|
}
|
|
|
|
|
|
|
|
#draggable {
|
|
}
|
|
</style>
|
|
</html>
|