Comment appeler la fonction Processing.js à partir du HTML?

J'explore HTML5 et Processing.js.Comment appeler la fonction Processing.js à partir du HTML?

Lorsque l'utilisateur clique sur une image sur ma page Web, j'aimerais appeler une fonction dans le code Processing.js. Il suffit d'appeler la fonction dans onclick, comme illustré dans cet exemple simple, ne fonctionne pas:

 
<html> 
    <head> 
    <script language="javascript" src="processing.init.js"></script> 
    <script language="javascript" src="processing.js"></script> 
    </head> 
    <body> 
    <script type="application/processing"> 
    void restart() 
    { /* does something */ } 
    </script><canvas> 
     You'll need a browser that supports HTML5 to see this content. 
    </canvas><br/><br/> 
    <img src="restart-image.png" onclick="restart()"> 
    </body> 
</html>

Toute réflexion sur la façon dont je peux appeler une méthode dans le script Processing.js lorsqu'une image est cliqué? (Peut-être que je fais une erreur HTML de base en utilisant img onclick?)

Source

2009-09-12 David Koelle

Je voudrais savoir comment importer le code qui est lié sur la page avec . – mcandre

Je commencerais par tirer le javascript pour le onclick de la balise img.

Dans un fichier javascript séparé vous pouvez avoir:

document.getElementById('restartimage').onclick = function() { Processing.setup(); }

Il est évident que je mets un attribut id sur votre balise img.

La fonction de configuration, j'ai remarqué sur cette page: http://processingjs.org/

L'idée de base est que, en tirant sur le onclick dans un fichier javascript il sera plus facile de coder ce qu'il doit faire.

Source

2009-09-12 06:14:51

J'ai essayé ceci, mais dans ma console d'erreur, je vois, "document.getElementById ('restartimage') est nul". Ai-je correctement ajouté l'attribut ID à mon tag img? –

Assurez-vous simplement que votre javascript s'exécute après le rendu de cette page, mais que vous avez indiqué le tag d'identification correctement. J'espère que vous avez également une balise de fin (). –

vous devez d'abord changer le type de script en texte/javascript ou application/javascript.

puis placez 'function' avant la fonction 'restart()' en réduisant 'void'.

J'ai utilisé Firefox 3.0.14 sur Ubuntu 9.04.

Source

2009-09-12 06:16:13 Sadat

En fait, en HTML5, la valeur par défaut est text/javascript, donc les tags de script n'ont pas besoin d'un type ou d'une langue. –

J'ai essayé, mais le code Processing.js ne s'est pas exécuté. –

J'ai testé comme ci-dessous Fichier HTML:

fichier JS:. fonction restart() {/ * fait quelque chose */ alert ('bonjour'); } – Sadat

Vous pouvez appeler des fonctions de traitement à l'aide de la fonction getInstanceById de l'objet Processing js.

Par exemple est ici une fonction:

$(window).resize(function(){ 
    var p=Processing.getInstanceById('processing_canvas_id'); 
    p.resize($("#main").width(),$("#main").height()); 
    });

Où redimensionnez est ma fonction de traitement dans le fichier de traitement associé à processing_canvas_id.

Source

2010-07-17 16:53:22 Magneon

Cela devrait fonctionner, entourez votre image à l'intérieur de l'étiquette d'ancrage <a> image </a> Utilisez la balise href pour appeler la fonction.

<a href="javascript:restart()"> image source </a>

Source

2010-08-17 07:05:01 Manivasagan

Comment appeler la fonction Processing.js à partir du HTML?

Répondre

Questions connexes