Les fenêtres Yo peuvent être ouvertes de différentes façon, la plus simple étant un lien html vers une nouvelle page du navigateur.
C’est par exemple le seul moyen autorisé (à ce jour) pour ouvrir les fenêtres Yo depuis Myspace. Nous recommandons l’ouverture de votre panier Yo en iframe,
qui permet la meilleure navigation à l’intérieur de votre site.

En ouvrant les fenêtres Yo en pop-up, vous permettez à votre site de rester visible en arrière plan, pour faciliter la navigation, et éventuellement un retourà la fenêtre Yo par un autre lien (par exemple pour ajouter un article dans le panier). Cependant dans Firefox, la nouvelle page ouverte reste en arrière plan lorsqu’on veut y accéder une nouvelle fois -par exemple pour ajouter un article dans le panier- pour cause de perte du focus.

L’ouverture en pop-up se fait avec les codes suivants :
pour ouvrir le panier : Tester l’ouverture du panier
<a href=”http://www.yozik.com/yo/panier.php?art=AAA” onclick=”javascript:window.open(’http://www.yozik.com/yo/panier.php?art=AAA’, ‘yo’, ‘toolbar=0,location=0,directories=0, status=0,statusbar=0,menubar=0,scrollbars=1,resizable=1,width=250,height=650,left=’+(screen.width-300)/2+’,top=10′); return false;” target=”yo”> Acheter l’ album</a>

pour donner un titre à télécharger : tester le téléchargement gratuit de morceau
<a href=”http://www.yozik.com/yo/telecharge.php?art=AAA” onclick=”javascript:window.open(’http://www.yozik.com/yo/telecharge.php?art=AAA’, ‘fan’, ‘toolbar=0,location=0,directories=0, status=0,statusbar=0,menubar=0,scrollbars=1,resizable=1,width=300,height=300,left=’+(screen.width-300)/2+’,top=10′); return false;” target=”yo”>télécharger le morceau</a>

pour ouvrir l’inscription à la newsletter : tester l’inscription à la newsletter
<a href=”http://www.yozik.com/yo/profil.php?groupe=GGG” onClick=”javascript:window.open(’http://www.yozik.com/yo/profil.php?groupe=GGG’, ‘fan’, ‘toolbar=0,location=0,directories=0, status=0,statusbar=0,menubar=0,scrollbars=1,resizable=1,width=300,height=300,left=’+(screen.width-300)/2+’,top=10′); return false;” target=”fan”>recevez les nouvelles du groupe</a>

pour afficher les concerts : tester la fenêtre concerts
<a href=”http://www.yozik.com/yo/concert.php?groupe=GGG” onClick=”javascript:window.open(’http://www.yozik.com/yo/concert.php?groupe=GGG’, ‘fan’, ‘toolbar=0,location=0,directories=0, status=0,statusbar=0,menubar=0,scrollbars=1,resizable=1,width=250,height=650,left=’+(screen.width-250)/2+’,top=10′); return false;” target=”fan”>concerts du groupe</a>

pour afficher le forum : tester le forum
<a href=”http://www.yozik.com/yo/forum.php?groupe=GGG” onClick=”javascript:window.open(’http://www.yozik.com/yo/forum.php?groupe=GGG’, ‘fan’, ‘toolbar=0,location=0,directories=0, status=0,statusbar=0,menubar=0,scrollbars=1,resizable=1,width=250,height=650,left=’+(screen.width-250)/2+’,top=10′); return false;” target=”fan”>forum du groupe</a>

où GGG est le numéro du groupe et AAA le numéro d’un article.

la fonction javascript peut prendre les paramètres suivant, séparés par une virgule :

top:10 , où 10 est l’espace en pixels entre le haut de la page et la fenêtre.

left:10 , où 10 est l’espace en pixels entre la gauche de la page et la fenêtre, par défaut centrée.

height:300 , où 300 est la hauteur en pixels de la fenêtre, par défaut 650px pour le panier, 300px pour la fonction fan.

width:250 , où 250 est la largeur en pixels de la fenêtre, par défaut 250px pour le panier, 300px pour la fonction fan.

scrollbars=1, où 1 indique que l’on autorise l’affichage d’une barre de défilement.

resizable=1, où 1 indique que l’on autorise le redimensionnement de la fenêtre.

menubar=0, où 0 indique que l’on n’affiche pas le menu dans la fenêtre.
Le code javascript pour ouvrir en pop-up est accepté par la plupart des éditeurs de blog, même hébérgés (sauf Myspace).

L’ouverture des fenêtres Yo en iframe à l’intérieur de votre site est le plus spectaculaire pour intégrer Yozik à votre site, et donner confiance à vos visiteurs en assurant une continuité totale. Les iframes peuvent avoir différents cadres, pas de cadres du tout, et suivre le comportement de la page comme s’il elle en étaient un élément (fixe, centrée, permanentes …).

Une balise <iframe src="http://www.yozik.com/yo/panier.php?groupe=GG>
affiche par exemple le panier à l’endroit où vous la placez dès l’ouverture de la page.
L’ouverture d’une fenêtre à partir d’un clic dans votre page nécessite l’insertion du code suivant juste après l’ouverture de la balise <BODY> :
<script src=”http://www.yozik.com/script/prozik.php”></script>
Si votre page comporte des frames, ou des pages imbriquées, vous pouvez placer ce code dans la page principale, et ajouter au liens yo ci-dessous
window.parent.yo.panier({….
Ce code peut prendre pour variable libtheme=Alphacube, libtheme=darkX, libtheme=mac_os_x, libtheme=spread, libtheme=sansbordureaveccroix, libtheme=sansbordurecroixdansfenetre.
pour modifier le contour de la fenêtre Yo (+ d’infos sur Prototype Window Class, qui est la classe javascript développée par Xilinus utilisée en complément de ScriptAculous pour générer les fenêtres Yo),

ainsi que la variable fixe=1 qui fixe la fenêtre dan la page (elle ne bouge pas quand on déplace les barres de défilement vertical et horizontal.

par exemple <script src=”http://www.yozik.com/script/prozik.php?libtheme=mac_os_x&fixe=1″></script>

et pour chaque type de lien :

pour ouvrir le panier : tester l’ouverture du panier en iframe
<a href=”http://yozik.com/yo/panier.php?article=AAA” onClick=”javascript:yo.panier({article:AAA}); return false;” >achetez l’article</a>

pour donner un titre à télécharger :tester l’ouverture en iframe du téléchargement gratuit
<a href=”http://yozik.com/yo/telecharge.php?article=AAA” onClick=”javascript:yo.fan({article:AAA}); return false;” >téléchargez le morceau</a>

pour ouvrir l’inscription à la newsletter :tester l’ouverture en iframe de l’inscription à la newsletter
<a href=”http://yozik.com/yo/inscription.php?groupe=GGG” onClick=”javascript:yo.news({groupe:GGG}); return false;” >recevez les nouvelles de l’artiste</a>

pour afficher les concerts :tester la fenêtre concerts en iframe
<a href=”http://yozik.com/yo/concerts.php?groupe=GGG” onClick=”javascript:yo.concert({groupe:GGG}); return false;” >tous les concerts de l’artiste</a>

pour afficher le forum :tester le forum en iframe
<a href=”http://yozik.com/yo/forum.php?groupe=GGG” onClick=”javascript:yo.forum({groupe:GGG}); return false;” >le forum de l’artiste</a>

où GGG est le numéro du groupe et AAA le numéro d’un article.

les fonctions javascript panier({}), telecharge({}), news({}), concerts({}), forum({}) peuvent prendre les paramètres suivant, séparés par une virgule :

article:AAA , où AAA est le numéro d’un article

lang:’fr’ , ‘fr’ pour français, ‘en’ pour anglais, par défaut la langue du compte.

style:SSS , où SSS est le numéro d’un style, par défaut le style du groupe.

top:10 , où 10 est l’espace en pixels entre le haut de la page et la fenêtre Yo.

left:10 , où 10 est l’espace en pixels entre la gauche de la page et la fenêtre Yo, par défaut centrée.

right:10 , où 10 est l’espace en pixels entre la droite de la page et la fenêtre Yo, par défaut centrée.

height:300 , où 300 est la hauteur en pixels de la fenêtre Yo, par défaut 650px pour le panier, 300px pour la fonction fan.

width:250 , où 250 est la largeur en pixels de la fenêtre Yo, par défaut 250px pour le panier, 300px pour la fonction fan.

Les dimensions de la fenêtre peuvent donc être paramétrées pour chaque lien. Les valeurs par défaut permettent d’ouvrir les fenêtre sans barre de défilement (scroll) pour une taille de Police jusqu’à 11px. Au delà, il faut augmenter la taille des fenêtres pour éviter l’apparition des barres de défilement.

Les iframes Yo peuvent rester visibles et fixes en dépit du scroll, en ajoutant la variable ,fixe:1 aux liens Yo.

Les liens Yo fonctionnent avec la plupart des navigateurs, testés pour Internet Explorer 3 à 7, Firefox, Mozilla et Safari.

Sur Safari, les fenêtres Yo permettant la navigation entre fenêtres Yo demandent à l’internaute un clic de validation unique et actif pendant toute la session

Les liens Yo sont configurés de manière à fonctionner en version dégradée pour les navigateurs sans javascript.

L’ouverture des fenêtres Yo utilise la classe Prototype et Window, pour laquelle nous remercions Xilinus.

Les fenêtres Yo en iframe fonctionnent parfaitement survotre propre blog (wordpress ou dotclear par exemple), ou hébergé comme Blogger (un des meilleurs),
ainsi que sur musicblog comme ici pour Kill The Young

Elles fonctionnent en pop-up sur la majorité des éditeurs de blog, et seulement en page entière sur Myspace,

Sur Facebook, le player Yo peut être insérer sur les profils et permet d’ouvrir votre propre page dans Facebook.