Lo inserisco stasera quando esco dal lavoro!
Lo inserisco stasera quando esco dal lavoro!
Trovi l'esempio qui: http://www.sergiopession.eu/Prova/Fumetto2.html
Il codice completo che ho usato è il seguente.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="STYLESHEET" type="text/css" href="./Fumetto2.css">
</head>
<body>
<div id="sfondo"><IMG SRC="./11.png" id="immagine" border=0 width="960" height="1363" onLoad="Caricamento()"></div>
<div id="bot12"><IMG SRC="./b12.png" id="b12" BORDER=0 ondragstart="iniziaTrascinamento(event, 'bot12')" draggable="true" data-valore="b" data-icona="./b12.png"></div>
<div id="cont1"><IMG SRC="./c1.png" id="c1" dropzone="move s:text" draggable="false" ondragover="trascinamentoInZonaDiDrop(event)" ondrop="rilascioDellOggettoTrascinato(event)"></div>
<div id="bot"><output id="bottiglie">0</output></div>
<script type="text/javascript" src="Fumetto2.js"></script>
</body>
</html>
CSS:
#sfondo {position: absolute;top: 0px; left: 0px;}
#b12 {cursor: move; position: relative; top: 1195px; left: 674px;}
#c1 {cursor: pointer; position: absolute; top: 1300px; left: 500px;}
#bot{cursor: move; position: absolute; top: 1315; left: 600px; font-family: Arial, Verdana, sans-serif; font-size: 25;}
JAVASCRIPT:
var Elim;
function Caricamento(){document.getElementById('immagine'). style.cursor = 'default';}
function iniziaTrascinamento(evento, tipo)
{
document.body.style.cursor = "move";
Elim = tipo;
evento.dataTransfer.setData("text", evento.target.dataset.valore);
evento.dataTransfer.effectAllowed = 'move';
icona = document.createElement('img');
icona.src = evento.target.dataset.icona;
evento.dataTransfer.setDragImage(icona, 0, 0);
}
function trascinamentoInZonaDiDrop(evento)
{
evento.dataTransfer.dropEffect = 'move';
evento.preventDefault();
}
function rilascioDellOggettoTrascinato(evento)
{
if(evento.dataTransfer.getData("text") == "b")
{
sommatoria = document.getElementById("bottiglie");
sommatoria.innerHTML = parseFloat(sommatoria.innerHTML) + parseFloat(1);
evento.preventDefault();
document.getElementById(Elim).style.display='none' ;
}
else{evento.preventDefault();}
}
function Nascondi_tutto()
{
//Nascondo gioco 1
for(i = 0; i < 84; i++){document.getElementById(Casella[i]).style.display='none';}
//Nascondo gioco 2
for(i = 0; i < 6; i++){document.getElementById(Vignetta[i]).style.display='none';}
//Nascondi gioco 3
Nascondi_gioco3(0, 0, 20);
//Nascondo gioco 4
for(i = 0; i < 20; i++){document.getElementById(Numeri[i]).style.display='none';}
document.getElementById('oscuro').style.display='n one';
}
Grazie per l'aiuto
Permessi di invio
Rispondi quotando