Mapa mental en html
jorge2309Práctica o problema27 de Julio de 2017
342 Palabras (2 Páginas)194 Visitas
<!DOCTYPE HTML>
<html>
<head>
<style>
div#caja1 {
position:absolute;
left: 400px;
top: 120px;
width: 135px;
height: 95px;
margin: 1px;
padding: 4px;
border: 1px solid black;
}
div#caja2 {
position:absolute;
left: 225px;
top: 200px;
width: 135px;
height: 95px;
margin: 1px;
padding: 4px;
border: 1px solid black;
}
div#caja3 {
position:absolute;
left: 620px;
top: 185px;
width: 135px;
height: 95px;
margin: 1px;
padding: 4px;
border: 1px solid black;
}
div#caja4 {
position:absolute;
left: 410px;
top: 280px;
width: 135px;
height: 95px;
margin: 1px;
padding: 4px;
border: 1px solid black;
}
div#caja5 {
position:absolute;
left: 690px;
top: 290px;
width: 135px;
height: 95px;
margin: 1px;
padding: 4px;
border: 1px solid black;
}
div#caja6 {
position:absolute;
left: 235px;
top: 390px;
width: 135px;
height: 95px;
margin: 1px;
padding: 4px;
border: 1px solid black;
}
div#caja7 {
position:absolute;
left: 570px;
top: 400px;
width: 135px;
height: 95px;
margin: 1px;
padding: 4px;
border: 1px solid black;
}
</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>
<body background="fondofig.jpg">
<h2>Arrastre las figuras a su lugar correspondiente para armar el mapa mental del REFORZAMIENTO</h2>
<p><font size=5>
<div id="caja1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="caja2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="caja3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="caja4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="caja5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="caja6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="caja7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img src="fig1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="135" height="95">
</div>
<img src="fig2.jpg" draggable="true"
...