Arobàn verso est un objet flash representant une corne de page dans l'angle supérieur droit de la fenêtre de votre navigateur. (Voir sur cette page en haut à droite).

Arobàn verso

Explication

- L'image en arrière plan apparaît sur un simple passage de souris.
- Verso se referme quand la souris n'est plus dessus.
- Vous pouvez mettre une image ou un autre flash (.swf) en arrière plan

Fichiers

- verso.swf : le fichier maître swf à inclure dans un répertoire de votre site.
- verso.xml : le fichier de paramètrage.Ce fichier est passé en flashvars dans le code HTML (voir plus bas).
- verso.jpg : l'image qui apparaîtra (cette image est paramétrable et peut-être un autre objet flash).
- verso.js : le code javascript permettant de changer le z-index du div dans lequel est l'animation.

Dans le code

Les lignes en rouge sont nécessaires, ne les ommetez pas ! (passez la souris dessus pour plus d'informations).

HTML : ce code est à inclure dans une de vos page HTML

<div id="verso" style="position:absolute;top:0px;right:0px;width:400px;height:400px;z-index:0;"></div>
<script type="text/javascript">
var so = new SWFObject("verso.swf", "flsVerso", "100%", "100%", "8");
so.addParam("quality", "high");
so.addVariable("xmlFlashVars","verso.xml");
so.addParam("wmode", "transparent");
so.addParam("swLiveConnect","true");
so.write("verso");
</script>

JAVASCRIPT :

Nous avons utilisé la bibliothèque swfobject pour l'inclusion du flash (incluse dans le zip plus bas) : http://blog.deconcept.com/swfobject/

Cette fonction est appelée par le flash pour changer le z-index du div où est l'animation.

function verso(on_off){
if(on_off == 1)document.getElementById("verso").style.zIndex=99999;
else document.getElementById("verso").style.zIndex=0;
}

XML : Ce fichier est celui qui va paramétrer l'application.

<?xml version='1.0' encoding="UTF-8" ?>
<config titre="verso" urlValue="http://www.urlaatteindre.fr" window="_blank">
<background src="medias/swf/versoInside.swf"/>
</config>


Téléchargement : (~ 28 Ko)

Arobàn myword est un objet flash qui permet d'afficher des informations complémentaire sur un mot en passant la souris dessus

Arobàn myword

Explication

- Vous définissez la façon dont les mots myword doivent apparaître.
- Lorsque l'internaute passe dessus, une petite fenêtre s'ouvre à coté du mot avec des informations complémentaires.
- Lorsque la souris n'est plus sur le mot, la fenêtre disparaît.

Fichiers

- myword.swf : le fichier maître swf à inclure dans un répertoire de votre site.
- myword.xml : le fichier dictionnaire (dans le même dossier que la page) qui contient les mots et les informations qui leurs sont rattachés.
- myword.js : le code javascript permettant d'envoyer aux flash les informations à afficher.

Dans le code

Les lignes en rouge sont nécessaires, ne les ommetez pas ! (passez la souris dessus pour plus d'informations).

HTML : ce code est à inclure dans une de vos page HTML

<div id="myWord" style="position:absolute;top:0px;left:0px;z-index:10000;width:200px;height:150px;"></div>

<script type="text/javascript">
var so = new SWFObject("myword.swf", "myWordFlash", "100%", "100%", "8");
so.addParam("quality", "high");
so.addVariable("dico","myword.xml");
so.addParam("wmode", "transparent");
so.addParam("swLiveConnect","true");
so.write("myWord");
</script>

Pour appeler MyWord sur un ou plusieurs mot (Vous pouvez bien sur appliquer votre propre style sur le/les mots) :

<span style="border-bottom:dotted 1px #CC3300;cursor:pointer;" onmouseover="callMyWord('votre_mot',event); return false;" onmouseout="hideMyWord();">
votre_mot
</span>

JAVASCRIPT :

Nous avons utilisé la bibliothèque swfobject pour l'inclusion du flash (incluse dans le zip plus bas) : http://blog.deconcept.com/swfobject/

Cette fonction est appelée pour transmettre au flash les informations sur le/les mots.

var onMyWord=false;

function callMyWord(word,myEvent) {
if(onMyWord == false){
var div = document.getElementById("myWord");
curX = myEvent.clientX;
curY = myEvent.clientY+document.documentElement.scrollTop;
div.style.left = (curX-100) +"px";
div.style.top = (curY-160) +"px";
document.getElementById("myWordFlash").wordCome(word);
onMyWord = true;
}
}

function hideMyWord(){
if(onMyWord==true){onMyWord = false;document.getElementById("myWordFlash").hideMe();};
}

XML : Ce fichier est celui qui contient les explications à afficher.

<?xml version='1.0' encoding="UTF-8"?>
<dico>
<word wd="Web 2.0">Ensemble de technologies permettant un Internet plus interactif.</word>
<word wd="ROI">Le ROI est l'abréviation de Return On Investment (retour sur investissement)</word>
</dico>


Téléchargement : (~ 12 Ko)