11548 sujets

JavaScript, DOM et API Web HTML5

Rendre cliquable une image dans un canvas

Bonjour à tous !

Je souhaiterais rendre cliquable une image dans un canvas mais je ne trouve pas de documentation... Et si c'est pas possible rendre cliquable un rectangle dans le canvas...

Voici mon code source :


<html>
<head>
<title>Editeur de cartes interactives</title>

  <style type="text/css">
  canvas {
    background-color: #FFFFE0;
border: solid black 1px;

}
  </style>


  <script type="application/x-javascript">

function Info()
{
alert("Reussi");
}

function vider()
{
 var canvas = document.getElementById("canvasElem");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 400, 300);
}


function draw() {
var select = document.getElementById("batiment");
var batiment = select.options[select.selectedIndex].value;

var nom = document.getElementById("nom").value;
var url = document.getElementById("url").value;
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;

if(batiment==1)
{
	var lien ="images/rond.gif";
	var hauteur = 8;
	var largeur = 8;
}
else if(batiment==2)
{
	var lien ="images/camping.gif";
	var hauteur = 20;
	var largeur = 16;
}
else if(batiment==3)
{
	var lien ="images/batiment.gif";
	var hauteur = 19;
	var largeur = 22;
}

 var canvas = document.getElementById("canvasElem");
 var ctx = canvas.getContext("2d");

var img = new Image();  
	img.onload = function(){  
		ctx.drawImage(img,x,y,largeur,hauteur);  
	}  
img.src = lien;
canvas.onclick = function(){
	alert("TEST");
}

  
}

  </script>


</head>
<body>

<h1>Editeur de cartes interactives</h1>

<form>
<table>
<tr>
	<td> <img src="images/rond.gif"> </td>
	<td> 
		<select name="batiment" id="batiment">
			<option value="1">Point important</option>
			<option value="2">Camping</option>
			<option value="3">Batiment</option>
		</select> 
	</td>
	<td> Nom : </td>
	<td> <input type="text" name="nom" id="nom"> </td>
	<td>  </td>
</tr>
<tr>
	<td><img src="images/camping.gif"></td>
	<td></td>
	<td> URL : </td>
	<td> <input type="text" name="url" id="url"> </td>
	<td> <input type="button" value="Ajouter" onclick="draw();"> </td>
</tr>
<tr>
	<td><img src="images/batiment.gif"></td>
	<td>  </td>
	<td> Position : </td>
	<td> X : <input type="text" name="x" id="x" size="2"> Y : <input type="text" name="y" id="y" size="2"> </td>
	<td></td>
</tr>
</table>
</form>

<br><br><br>

<canvas id="canvasElem" width="400" height="300">
Le navigateur ne supporte pas la balise CANVAS.
</canvas>


<br><br>
<input type="button" value="Nettoyer" onclick="vider();">


</body>
</html>



J'espère que c'est possible sinon je suis mal xD
Merci a vous
Donc voilà j'ai fouiller sur google j'ai rien trouver alors j'ai tricher. Vous allez me pardonner j'en suis sûr... Enfin j'espère sinon mettez moi sur le piloris Smiley lol

Donc en fait j'ai utiliser une DIV transparente sur mon canvas et je rend cliquable mes zones.

Peut être que la balise canvas s'améliorera avec le temps...


<html>
<head>
<title>Editeur de cartes interactives</title>

  <style type="text/css">
  canvas {
    background-color: #FFFFE0;
    border: solid black 1px;
}


div.transparente {
      filter:alpha(opacity=60);   /* IE */
      -moz-opacity:0.6;           /* Firefox */
      opacity: 0.6;               /* standard CSS3 */
      -khtml-opacity: 0.6;        /* Konqueror */
      }

  </style>


  <script type="application/x-javascript">

function vider()
{
 var canvas = document.getElementById("canvasElem");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 400, 300);
}


function draw() {
var select = document.getElementById("batiment");
var batiment = select.options[select.selectedIndex].value;

var nom = document.getElementById("nom").value;
var url = document.getElementById("url").value;
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;

if(batiment==1)
{
	var lien ="images/rond.gif";
	var hauteur = 8;
	var largeur = 8;
}
else if(batiment==2)
{
	var lien ="images/camping.gif";
	var hauteur = 20;
	var largeur = 16;
}
else if(batiment==3)
{
	var lien ="images/batiment.gif";
	var hauteur = 19;
	var largeur = 22;
}

 var canvas = document.getElementById("canvasElem");
 var ctx = canvas.getContext("2d");

var img = new Image();  
	img.onload = function(){  
		ctx.drawImage(img,x,y,largeur,hauteur);  
	}  
img.src = lien;

/*
canvas.onclick = function(){
	alert("Carte interactive");
}
*/

var areaEvent = document.getElementById("EventCanvas");
areaEvent.innerHTML += '<div class="transparente" style="position:absolute;margin: '+x+'px 0px 0px '+y+'px;width:'+largeur+';height:'+hauteur+';" onClick="if (confirm(\'Nom batiment :'+nom+'\'))document.location.href=\''+url+'\' " ></div>';

  
}

  </script>


</head>
<body>

<h1>Editeur de cartes interactives</h1>

<form>
<table>
<tr>
	<td> <img src="images/rond.gif"> </td>
	<td> 
		<select name="batiment" id="batiment">
			<option value="1">Point important</option>
			<option value="2">Camping</option>
			<option value="3">Batiment</option>
		</select> 
	</td>
	<td> Nom : </td>
	<td> <input type="text" name="nom" id="nom"> </td>
	<td>  </td>
</tr>
<tr>
	<td><img src="images/camping.gif"></td>
	<td></td>
	<td> URL : </td>
	<td> <input type="text" name="url" id="url"> </td>
	<td> <input type="button" value="Ajouter" onclick="draw();"> </td>
</tr>
<tr>
	<td><img src="images/batiment.gif"></td>
	<td>  </td>
	<td> Position : </td>
	<td> X : <input type="text" name="x" id="x" size="2"> Y : <input type="text" name="y" id="y" size="2"> </td>
	<td></td>
</tr>
</table>
</form>

<br><br><br>

<div id="EventCanvas">
</div>
<canvas id="canvasElem" width="400" height="300">
Le navigateur ne supporte pas la balise CANVAS.
</canvas>


<br><br>
<input type="button" value="Nettoyer" onclick="vider();">


</body>
</html>


onne journée
Sujet clos
Aller à