Dans l'idéal vous ne devez avoir aucun code javascript dans vos pages HTML , seulement une référence vers un fichier js, nous allons voir comment Help&Web vous facilite la tâche pour programmer proprement.

Nous allons réaliser la transformation du javascript ShakeImage en un composant du même nom, le script fait bouger une image au survol de la souris
Première étape vous devez enregistrer dans un fichier séparé d'extension .js tout le code javascript, placez le fichier dans le répertoire system.hew d'Help&Web.

Dans votre composant vous devrez lors de la première exécution de celui-ci recopier le fichier .js dans le répertoire de votre projet (html ou HtmlHelp ).

if GetVarInt('shakeimage.js',0)=0 then
begin
// pour ne pas le regénérer
SetVarInt('shakeimage.js',1);
// on détermine les répertoires source et cible
// Path retourne le répertoire d'Help&Web
pathSystem := Path+'system.hew\';
pathProj := PathProjet;
// tenir compte d'une compilation htmlhelp
if Condition('_HTMLHELP_') then pathProj:=pathProj+'htmlhelp\';
pathProj := pathProj+'html\';
// copier le fichier js
Copyfile(pathSystem+'shakeimage.js',PathProj+'shakeimage.js');
end;
Maintenant il faut référencer notre script dans notre page html, là encore inutile de le faire x fois, une seule fois par page est suffisante

if GetVarInt('shakeimage'+getTitre,0)=0 then
begin
SetVarInt('shakeimage'+getTitre,1); // pour ne pas le regénérer
// on relie le script à la page
AddToHead('<script type="text/javascript" src="shakeimage.js"></script>');
end;

ShakeImage fonctionne en réagissant au événement OnMouseOver et OnMouseOut de la balise img

Help&Web permet de déplacer le code de la balise vers un fichier js qui sera incorporé à la page html, la liaison sur les événements sera elle aussi réalisée et pour cela nous devons donner un identifiant (id) à notre image.

// on génère un identifiant unique
Id := getID('shake');
// on produit la balise <img /> qui affichera l'image
// Get_src_lh_WebImage retourne une chaîne où sera renseignée la largeur, hauteur et l'adresse de notre image
write('<<WEB(<img id="')>>+id+<<FNT(string.-,-,-,-:'" class="')>>+css+<<FNT(string.-,-,-,-:'" alt="')>>+alt+<<FNT(string.-,-,-,-:'" title="')>>+title+<<FNT(string.-,-,-,-:'" ')>>+Get_src_lh_WebImage(image)+<<FNT(string.-,-,-,-:'/>)>>');
// on rattache les évenements sur onmouseover et onmouseout
// mais pas directement dans la balise img
jsAddOnLoad(id,'mouseover','init(document.getElementById('+ #39+Id+#39+'));rattleimage()');
jsAddOnLoad(id,'mouseout','stoprattle(document.getElementById('+ #39+Id+#39+'))');

Au final nous n'avons plus aucun code javascript dans notre page.

Remarque : vous pouvez aussi utiliser jsAddOnLoad pour indiquer une fonction à lancer au chargement de la page sans la lier à une balise quelconque, il vous suffit simplement de passer un paramètre vide pour l'id et l'évenement.

exemple : jsAddOnLoad('','','Alert("Bonjour")');

Vous pouvez lire le source complet du composant ShakeImage car ici nous nous sommes contenté de ne parler que des fonctions spécifiques à l'intégration de javascript, vous verrez que vous pourrez placer un lien sur votre image, lui attribuer une classe CSS , un titre et définir sa propriété alt.

Sommaire