Création de tutoriaux pour créer un beau forum

Comme promis, nous avons gagné le concours 2012 du plus beau forum Ogame, nous allons donc partager nos secret de fabrication avec vous dans une série de tutoriaux qui seront crées prochainement.

La liste-lien sera faite ici même, vos demandes de tutoriaux pourront être faite ici.

>>> Aujourd'hui, j'optimise les codes de passage d'une image a une autre, j'ajoute une souris hache. cela me prendra la journée, après quoi je commence les tuto. merci de votre compréhension

kurdil

Bonjour,

Kuku est en vacance donc tu va devoir attendre un peut avant d'avoir sa réponse



cordialement Devas

me revoila.

je vous montre ça bientôt, j'ai quelques jours devant moi d'ici la fin de semaine.

en gros (tu peux trouver sur le net) il s'agit de mettre un code avec une image quand la souris n'est pas sur la catégorie et une autre quand la souris survole l'image. ça s'apelle une image réactive.

en plus, tu dois mettre des liens sur des morceaux d'image pour pouvoir acceder aux catégories. avec image-map ça se fait très bien.

kuku

truc simple sa fallait le dire je l'aurais fait Rho !!!

CODE A COLLER UNE SEULE FOIS DANS LA PREMIERE DESCRIPTION DE LA PREMIERE CATEGORIE:


function bbType(type){
zone=type.substring(0,type.length-1);

for(i=0; i<70; i++){ // 70 images max
if(i != zone){
if(document.getElementById(i+'a'))
document.getElementById(i+'a').style.display = '';
if(document.getElementById(i+'b'))
document.getElementById(i+'b').style.display = 'none';
}
}

if (type==zone+'a'){
document.getElementById(zone+'b').style.display = 'none';
document.getElementById(zone+'a').style.display = '';
}
else{
document.getElementById(zone+'a').style.display = 'none';
document.getElementById(zone+'b').style.display = '';
}
}


CODE A COLLER DANS LA DESCRIPTION DE CHAQUE CATEGORIE:

Code:

<img id="0a" onmouseover="javascript:bbType('0b');" src="http://img35.imageshack.us/img35/1399/conseiloptimise65.jpg">

<img id="0b" onmouseout="javascript:bbType('0a');" style="display:none"  src="http://img809.imageshack.us/img809/3553/conseilgoptimise65.jpg"

usemap="#0b">
<map onmouseover="javascript:bbType('0b');" name="0b">

/!\ ATTENTION: a CHAQUE CATEGORIE, MODIFIER LES 0b et 0a en changeant le chiffre (1a, 1b, etc. toujours garder le même chiffre par catégorie.)
en PREMIER l'image quand la souris n'est pas sur la catégorie
en SECOND l'image quand la souris est sur la catégorie.


PUIS

Code:

<area shape="rect" coords="53,7,165,33" href="http://ally-lrdp.actifforum.com/f27-conseil-de-pacte" alt="Diplomatie" title="Diplomatie"    />
<area shape="rect" coords="53,34,165,60" href="http://ally-lrdp.actifforum.com/f28-conseil-de-candidature" alt="Candidatures" title="Candidatures"    />
<area shape="rect" coords="584,6,671,32" href="http://ally-lrdp.actifforum.com/f46-news-projet-lrdp" alt="Projets" title="Projets"    />
<area shape="rect" coords="584,33,671,59" href="http://ally-lrdp.actifforum.com/f22-conseil-de-guerre" alt="Guerres" title="Guerres"    />
</map>

UN CODE DE CE TYPE LA OBTENU SUR LE SITE http://www.image-maps.com/
LAISSEZ VOUS GUIDé, le but de ce code étant de permettre a ces images de devenir des liens pour rediriger vers vos catégorie (car là on a deux images, mais plus de liens, de titre de catégorie pour y entrer)


clair ou pas du tout ?

kuku

essayez sur une catégorie déja. n'oubliez pas de c/c en premier lieu le lien de redirection de votre catégorie.

en gros, si c'est pour la taverne, prenez le premier lien obtenu après avoir cliqué sur "taverne", et gardez le sous le coude. vous aurez grace a image map un code du style:




(vous pouvez donner a chaque zone définie par des coordonnées spatiales sur votre image un lien particulier. pour moi par exemple, 1 lien de chaque coté de l'image dans ambassade, et un au milieu.)

kuu

Tout d'abord, très joli forum.
Si seulement je savais faire pareil.

Sinon, pour les codes a placer et tout, serait-il possible, pour une meilleur compréhension, de nous faire des screen car il est vrai que j'ai pas tout compris où il faut les placer.

normal, il faut que toi même tu utilises le site image-map pour avoir tes propres coordonnées réactives. je vous referais tout ça en détaillé, bidouillez d'ici là

ps: possible oui, j'ai du faire que des catégories, avec dedans des forums. les catégories sont ratachées a de grandes "sections"...

kuku

pour faire très simple tu peux faire ceci:

1) une image de base, quand la souris n'est pas sur la catégorie (comme ici quand le texte n'est pas entouré d'un halo blanc)

2) une image-lien (pour aller dans la catégorie) qui apparaît par dessus l'image de base (avec le texte entouré d'un halo blanc ici)

soit ce code:

Citation :

function bbType(type){
zone=type.substring(0,type.length-1);

for(i=0; i<70; i++){ // 70 images max
if(i != zone){
if(document.getElementById(i+'a'))
document.getElementById(i+'a').style.display = '';
if(document.getElementById(i+'b'))
document.getElementById(i+'b').style.display = 'none';
}
}

if (type==zone+'a'){
document.getElementById(zone+'b').style.display = 'none';
document.getElementById(zone+'a').style.display = '';
}
else{
document.getElementById(zone+'a').style.display = 'none';
document.getElementById(zone+'b').style.display = '';
}
}

puis

Code:

<img id="0a" onmouseover="javascript:bbType('0b');" src="IMAGEDEBASE">

<a href="LIEN-CATEGORIE"><img id="0b" onmouseout="javascript:bbType('0a');" style="display:none"  src="IMAGE-LIEN">
</a>

Ce dernier la je suis pas sur^^ (j'ai pas testé lol)

kuku

comment ca ?

Arjuna a écrit:

Franchement j'abandonne.

Tu peux expliquer?

Chrischance a écrit:

Arjuna a écrit:

Franchement j'abandonne.

Tu peux expliquer?

Ptêtre que les lignes de codes ont eu raison de lui ?

de ELLE



enfin je crois



nn c'est easy le code

Arjuna sois patiente je t'en prie stp

Oui, nous n'avons pas terminé. La leçon suivante sera « Le polymorphisme pour les nuls ». Ca va être d'enfer

lol

c'est un lieu de travail ici les gars !



leçons 2 seras commenter par fly !

Allez tonton au boulot roooo

retourne te coucher toi !!!