Les projets arrivent à la pelle!!! C'est cool. Entre autres, on a rentré officiellement un beau projet de site web à la boite aujourd'hui. Un site de carnets de voyages à travers le monde, dans l'esprit d'un précédent site réalisé sur l'Ethiopie : http://www.dear-ethiopia.com

Il y a de temps en temps des projets bien sympas qui tombent, et apportent une bonne grosse bouffée d'oxygène. Mise en ligne prévue normalement pour la fin de l'année... à suivre...

a+ :D

Créer des rollovers est normalement à la portée de n'importe quel éditeur HTML de base. Cependant, il génère souvent du code à rallonge, obscure et difficile à modifier. Voici donc quelques lignes de codes javascript pour gérer vos rollovers comme un chef, avec pré-chargement des images et tout et tout.

Comment ça marche ?
En gros, nous allons créer un code qui va d'abord télécharger les images en mémoire, puis deux petites fonctions permettant de gérer les survols des images (quand la souris entre, et quand elle sort...).

Le code...
Allons-y joyeusement ! Insérer d'abord le code suivant dans le head de votre page :

<script language="javascript">
rollImage1on = new Image(150, 100);
rollImage1on.src = "monImageOn1.jpg";
rollImage2on = new Image(150, 100);
rollImage2on.src = "monImageOn2.jpg";

rollImage1off = new Image(150, 100);
rollImage1off.src = "monImageOff1.jpg";
rollImage2off = new Image(150, 100);
rollImage2off.src = "monImageOff2.jpg";

function rollOn(imgName) {
if (document.images) {
imgOn = eval(imgName + "on.src");
document[imgName].src = imgOn;
}
}

function rollOff(imgName) {
if (document.images) {
imgOff = eval(imgName + "off.src");
document[imgName].src = imgOff;
}
}
</script>

Pour adapter le code à votre page, remplacez monImageOn1.jpg par le chemin vers votre première image survol actif, et monImageOff1.jpg par la première image survol inactif. Puis faire de même avec monImageOn2.jpg, etc... Vous pouvez multiplier les lignes ainsi pour obtenir le bon nombre d'images, en prenant soin d'incrémenter les index.

Les chiffres 150 et 100 de new Image(150, 100) correspondent aux dimensions de l'image (largeur et hauteur), que vous pouvez naturellement modifier à votre guise.

Ensuite, il faut adapter la balise <img> sur chacune de vos images, en ajoutant les attributs suivants :
Pour la première image :
name = "rollImage1"
onMouseOver = "rollOn('rollImage1')"
onMouseOut = "rollOff('rollImage1')"

Pour la seconde image :
name = "rollImage2"
onMouseOver = "rollOn('rollImage2')"
onMouseOut = "rollOff('rollImage2')"

etc...

Et voilà, de beaux rollovers prêts à l'emploi !

Le DHTML... Qu'est-ce que c'est ?
Ce n'est pas à proprement parlé un langage à part entière, mais la combinaison de code HTML (le langage de base des pages Web), de javascript et de CSS. Bref, tout un programme ! En gros, le DHTML permet d'améliorer vos pages en programmant des fonctionnalités supplémentaires. D'où l'appellation DHTML, càd Dynamic HTML.

Comment ça marche ?
Le DHTML s'appuie surtout sur le concept de calques, c'est à dire des pages HTML supplémentaires que vous pouvez superposer les unes au dessus des autres. Vous pouvez ensuite déplacer les calques les uns par rapport aux autres (donc créer des objets qui se déplacent sur votre page...), modifier le contenu d'un calque (textes, images, code HTML,...), rendre visible ou invisible un calque, etc... Avec un peu d'imagination, on peut tout faire... ou presque...

C'est quoi le problème ? parce que problème il y a...
D'abord, là, ya pas le choix, faut mettre la patte dans le code de votre page. Les accros du wysiwyg et autres allergiques au code... faut se faire une raison...
Ensuite, le soucis avec le DHTML, c'est la compatibilité avec les différents navigateurs. Eternel problème du Web, les calques DHTML ne réagissent pas toujours de la même façon suivant que vous travaillez sous Windows, Mac, IE, FireFox, Netscape,... sans parler des différentes versions de navigateurs. En règle générale, pour bien faire (au mieux en tout cas...), il est nécessaire de tripler le code, pour être sur qu'il soit lisible correctement par le plus grand nombre.
Enfin, et on s'arrêtera là, le DHTML et Flash ne font pas bon ménage, surtout sur Mac...

Malgré tout, le DHTML présente de nombreuses alternatives, pour booster vos pages de petits effets sympas.

C'est parti!
Pour commencer, voici deux pages, qui illustrent bien quelques fonctionnalités de base du codage DHTML. La première présente une façon de coder un affichage de bulles sur un lien. La seconde modifie les mises en valeur d'un texte en cliquant sur différents liens...

Voilà pour un premier jet. On s'amusera à utiliser tout cela par la suite...

a+ :D

Ce blog est actuellement en cours de réalisation... Bon, avec un peu de courage, et quelques heures de scan, ça devrait être tout bon pour la fin Juin...
Pour les plus impatients ;-) je vous invite à visiter http://leopold.huguenin.free.fr, site qui aujourd'hui date un peu, mais qui a le mérite d'être là!...

a+ :D

ATTENTION!
Les images et autres contenus de ce blog ne sont pas libres de droits.

Cependant, elles sont exploitables dans une certaine mesure. Conscient que la mise en ligne sur le web est avant tout une mise en public, et que les dessins ne sont pas fait pour dormir dans des cartons, les internautes qui désirent exploiter certains de mes visuels pour leurs propres créations peuvent le faire sous certaines conditions.
A savoir :

Infographies : les design présentés sur ce site sont la propriété exclusif des ayants droits. Toute copie, totale ou partielle, pour exploitation publique visuelle et commerciale, est interdite.
Photographies : Toutes les photographies présentées sur ce site sont la propriété de l'auteur, Léopold Huguenin. Les copies pour exploitation publique visuelle, à caractère NON COMMERCIAL (page perso, associations,...), ne présentant pas explicitement une personne reconnaissable (visage essentiellement), sont autorisées. Toute autre utilisation est interdite.
Illustrations : Toutes les illustrations présentées sur ce site sont la propriété de l'auteur, Léopold Huguenin, et de leurs ayants droits. Les copies pour exploitation publique visuelle, à caractère NON COMMERCIAL (page perso, associations,...), ne présentant pas explicitement une personne reconnaissable (visage essentiellement), sont autorisées, SAUF pour la série d'illustrations numérotées 201 à 223 inclus. Toute autre utilisation est interdite.

Merci de bien vouloir respecter ces quelques conditions.
Ce texte n'a pas valeur juridique ou contractuel, en tant que tel, en dehors de la protection relative aux oeuvres de l'esprit. Il n'est écrit qu'à titre purement préventif. L'auteur ne saurait être tenu responsable de poursuites, issues de l'utilisation non-autorisées des visuels présents sur ce site, initiées par les ayants droits.