faire lien vers un html en javascript, en clickant sur une forme

Marsh Posté le 19-01-2014 à 01:32:01

Bonjour, pourriez-vous m'aidez s'il vous plait,
Etant assez jeune pour ce qui est du savoir en Javascript, je viens vous demander de l'aide. Je galère à trouver ma requête alors je crée ce nouveau sujet.
J'aimerais faire en sorte que lorsque l'on clique sur une forme ou même un texte en Javascript, cela ouvres une page .htlm.
J'ai effectué une recherche sur ce forum et d'autre grâce à google, mais je n'est trouvé que l'inverse de ma recherche c-à-d faire exécuter un Js en cliquant sur un lien!
j'ai une base html pour situer mon problème:

merci d'avance

Code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>exemple</title>
<script>
function init() {
var canvas = document.getElementById("canvas" );
var ctx = canvas.getContext("2d" );
draw(ctx);
}
function draw(ctx) {
// calque1/Trac
ctx.save();
ctx.beginPath();
ctx.moveTo(4.0, 208.2);
ctx.bezierCurveTo(4.0, 95.4, 95.4, 4.0, 208.2, 4.0);
ctx.bezierCurveTo(321.0, 4.0, 412.4, 95.4, 412.4, 208.2);
ctx.bezierCurveTo(412.4, 321.0, 321.0, 412.4, 208.2, 412.4);
ctx.bezierCurveTo(95.4, 412.4, 4.0, 321.0, 4.0, 208.2);
ctx.closePath();
ctx.fillStyle = "rgb(0, 0, 155)";
ctx.fill();
ctx.lineWidth = 8.0;
ctx.strokeStyle = "rgb(35, 45, 0)";
ctx.stroke();
// calque1/Bonbon
ctx.font = "48.0px 'MyriadPro'";
ctx.fillStyle = "rgb(101, 0, 0)";
ctx.fillText("Bonbon", 113.7, 212.4);
ctx.restore();
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="417" height="417"></canvas>
</body>
</html>

Message cité 1 fois

Reply

Marsh Posté le 19-01-2014 à 01:32:01

Reply

Marsh Posté le 19-01-2014 à 05:01:53

afrolloveur a écrit :

J'aimerais faire en sorte que lorsque l'on clique sur une forme ou même un texte en Javascript, cela ouvres une page .htlm.

Avec href, par exemple :

<html>
<body>
Aller au <a href="http://forum.hardware.fr">forum</a>.
</body>
</html>

Peut-être que je n'ai pas bien compris la question, parce que ça parait trop facile.

Reply

Marsh Posté le 19-01-2014 à 12:27:44

href me permet de mettre un lien à l’extérieur de mon code JavaScript ,sur le coté,
j'aimerais que ce soit en clickant sur Bonbon ou le cercle qu'il y ait une redirection vers une autre page .html.

je ne sais pas si c'est plus clair....
merci pour ton aide malgré tout.

Reply

Marsh Posté le 19-01-2014 à 14:06:48

Voici une solution simplifiée :

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<title>exemple</title>
<script>
function init() {
var canvas = document.getElementById("canvas" );
var ctx = canvas.getContext("2d" );
draw(ctx);
}
function draw(ctx) {
// calque1/Trac
ctx.save();
ctx.beginPath();
ctx.moveTo(4.0, 208.2);
ctx.bezierCurveTo(4.0, 95.4, 95.4, 4.0, 208.2, 4.0);
ctx.bezierCurveTo(321.0, 4.0, 412.4, 95.4, 412.4, 208.2);
ctx.bezierCurveTo(412.4, 321.0, 321.0, 412.4, 208.2, 412.4);
ctx.bezierCurveTo(95.4, 412.4, 4.0, 321.0, 4.0, 208.2);
ctx.closePath();
ctx.fillStyle = "rgb(0, 0, 155)";
ctx.fill();
ctx.lineWidth = 8.0;
ctx.strokeStyle = "rgb(35, 45, 0)";
ctx.stroke();
// calque1/Bonbon
ctx.font = "48.0px 'MyriadPro'";
ctx.fillStyle = "rgb(101, 0, 0)";
ctx.fillText("Bonbon", 113.7, 212.4);
ctx.restore();
}
function click_circle(event) {
event = event || window.event;

var canvas = document.getElementById('circle'),
x = event.pageX - canvas.offsetLeft,
y = event.pageY - canvas.offsetTop;

// alert(x + ' ' + y);
if (x <= 417 && y <= 417)
self.location="http://forum.hardware.fr";
// On pourrait faire un test plus compliqué
return True;
}
</script>
</head>
<body onload="init()">
<div id="circle" onclick="click_circle()">
<canvas id="canvas" width="417" height="417"></canvas>
</div>
</body>
</html>

Voir aussi http://stackoverflow.com/questions [...] as-element

Reply

Marsh Posté le 19-01-2014 à 14:31:11

Un sacré merci!
j'avais à peu prés la bonne solution!
il me manqué la Div dans mon html. :jap:

Message édité par afrolloveur le 19-01-2014 à 14:32:13

Reply

faire lien vers un html en javascript, en clickant sur une forme

Sujets relatifs:

Leave a Replay