Drag and the Drop method is a very common feature of a website, but how do we establish such
difficult code? With the method, you can grab whatever image and drop in the location its supposed
to be in.
Try with the image above! (The image is a little messed up, so you may not accurately place it in)
Just switch around with the codes. Change the width and height to get better results! :)
Now just in time for the code:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Easy, and you are done!
MAKE YOUR TEXT BOUNCY?!
There is a way for your text to go up and down and alternate sides with using this code! This
code would be amazing if you want any thing to pop out or seem "eye-catching".
This is the code:
<marquee behavior="alternate" bgcolor="”#FFFFFF”" height="”37″" scrollamount="”10″" scrolldelay="”95″" width="”202″">DO you want to make your text bouncy?</marquee>
No comments:
Post a Comment