Sujets similaires

Sujet: Re: Créer une PA réactive / mapping Mer 13 Oct 2010, 14:43

Bon, j'ai suivi le tuto à la lettre, je l'ai recommencé trois fois pour à chaque fois obtenir le même résultat.
Tout va bien au niveau des MAP, mais il n'en est pas de même pour mes parties de html où c'est le bazar complet.
J'ai beau lire et relire mes codes je ne vois pas d'où peut venir le problème.

J'ai déjà fait une PA réactive, avec ce même tuto, et ça avait bien fonctionné, je suis sceptique.

http://tohodai.asiat-world.com

Code de ma PA :

Code:: <div class="texte_PA">Bienvenue à Tohodai <b>{USERNAME}</b> ! ♥</div><br><br><br><table><tr><td><html>
<head>
<title>pa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="401" height="550" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="http://img46.xooimage.com/files/6/2/7/pa_01-2154796.gif" width="165" height="49" alt=""></td>
<td rowspan="2">
<img src="http://img42.xooimage.com/files/b/7/c/pa_02-21547ae.gif" width="235" height="121" alt="" USEMAP="#Tops></td>
<td>
<img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="1" height="49" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://img48.xooimage.com/files/d/5/a/pa_03-21547c8.gif" width="38" height="195" alt=""></td>
<td rowspan="2"><div class="Partenaires">uc Partenaires coup de coeur à venir.</div></td>
<td>
<img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="1" height="72" alt=""></td>
</tr>
<tr>
<td><div class="Vacants"><img src="http://img46.xooimage.com/files/7/6/4/76vai52g-214d8e4.png"> <img src="http://img48.xooimage.com/files/4/3/2/m6h9ndl8-214d92c.png"> <img src="http://img26.xooimage.com/files/6/2/3/c4jeilo5-214d94e.png"></div></td>
<td>
<img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="1" height="123" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="http://img26.xooimage.com/files/a/2/1/pa_06-2154816.gif" width="400" height="306" alt="" USEMAP="#Navigation></td>
<td>
<img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="1" height="306" alt=""></td>
</tr>
</table>

<MAP NAME="Navigation">
<AREA SHAPE="rect" ALT="Règlement" COORDS="103,47,196,77" HREF="http://tohodai.asiat-world.com/-panneau-d-affichage-f1/b-reglement-du-forum-t2.htm#2">
<AREA SHAPE="rect" ALT="Contexte" COORDS="214,65,292,93" HREF="http://tohodai.asiat-world.com/-panneau-d-affichage-f1/c-contexte-t1.htm">
<AREA SHAPE="rect" ALT="Invités" COORDS="281,102,348,127" HREF="http://tohodai.asiat-world.com/section-invites-f13/">
<AREA SHAPE="rect" ALT="Prédéfinis" COORDS="170,10,255,147" HREF="http://tohodai.asiat-world.com/-les-predefinis-f2/">
<AREA SHAPE="rect" ALT="Fiches" COORDS="322,156,381,178" HREF="http://tohodai.asiat-world.com/-vos-papiers-f3/">
<AREA SHAPE="rect" ALT="Partenariat" COORDS="224,188,329,211" HREF="http://tohodai.asiat-world.com/partenariat-f29/">
</MAP>

<MAP NAME="Tops">
<AREA SHAPE="rect" ALT="Top1" COORDS="23,43,77,91" HREF="http://www.root-top.com/topsite/kawaii/in.php?ID=336">
<AREA SHAPE="rect" ALT="Top2" COORDS="80,42,131,90" HREF="http://www.root-top.com/topsite/eri/in.php?ID=82">
<AREA SHAPE="rect" ALT="Top3" COORDS="133,48,176,89" HREF="http://www.root-top.com/topsite/asiansound/in.php?ID=65">
<AREA SHAPE="rect" ALT="Top4" COORDS="185,47,230,89" HREF="http://www.root-top.com/topsite/lawliet/in.php?ID=148">
</MAP>


</body>
</html>
</td>
<td width="35%"><blockquote><div class="title">Quoi de neuf ?</div><br><marquee style="width: 250px; height: 390px" direction="up" onmouseover=this.stop(); onmouseout=this.start(); SCROLLAMOUNT=2>» Le forum a ouvert le <b>xx.xx.xx</b><br>» Un minimum de <b>20 lignes</b> par post est requis.<br>» Vous avez <b>15 jours</b> pour postez votre fiche.<br><br><b>INFOS</b><br>La rentrée est passée depuis une semaine. Mais il va falloir encore du temps à nos coréens pour s'habituer à leur nouvelle famille !<br><br><b>TEMPERATURE</b><br>Nous sommes au <b>Printemps</b>, la température est d'environ <b>8°C le matin & 13°C l'après-midi</b>.<br><br><b>EVENTS</b><br>Les étudiants sont autorisés à créer des fraternités, histoire de créer des liens entre eux ! Un bal de rentrée aura bientôt lieu au sein de Tohodai. Trouvez-vous un(e) cavalière, c'est l'occasion de rencontrer du monde !<br><br>Veuillez nous excuser pour les bugs causés par les ongglets (disparition temporaire du QEEL, agrandissement de la PA), je vais essayer de résoudre le problème !</marquee></blockquote></td></tr></table><br><br>

<a href="http://www.root-top.com/topsite/kawaii/in.php?ID=336" class="postlink" target="_blank"><img src="http://img.root-top.com/topsite/kawaii/banner.gif" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/eri/in.php?ID=82" class="postlink" target="_blank"><img src="http://img.root-top.com/topsite/eri/banner.gif" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/asiansound/in.php?ID=65" class="postlink" target="_blank"><img src="http://img.root-top.com/topsite/asiansound/banner.gif" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/lawliet/in.php?ID=148" class="postlink" target="_blank"><img src="http://img.root-top.com/topsite/lawliet/banner.gif" border="0" alt="" /></a>

CSS :

Code:: body { cursor: crosshair }
a:hover { cursor: crosshair }

/*Déco barre navigation*/
a.mainmenu {
background-color: #a2d1d9;
font-weight: bold;
opacity: 0.5;
-moz-border-radius: 15px;
color : #ffffff;
font-style: bold;
text-shadow: #789fa6 1px 1px 3px;
font-size: 10px;
}

.forumline {
border: 0px dashed #cb99a1;
-moz-border-radius: 8px;
}

a.mainmenu:hover {
font-size: 10px;
color: #789fa6;
text-shadow: 3px 3px 3px #ffffff; }

/* Dernière colonne PA*/
.sujets_messages {
padding: 3px;
font-size: 11px;
background-color: #63714e;
-moz-border-radius: 10px;
border: 0px solid #fff4e0;
background-image: url();
text-align: center;
}

tr.post td {padding-left: 5px;} /* Espace entre avatar et post */
tr.post td {padding-right: 5px;}

a { text-decoration: none !important;
text-shadow: #000000 1px 1px 3px;
}

a:hover {
text-decoration: none !important;
color: #b1d4aa;
}

body { margin : 0 ; }
.bodylinewidth {
border-left :solid 0px ;
border-right :solid 0px ;
}

.code div { width: auto !important; }
.code { font-family: Courier new;
font-size: 11px;
color: #72838F;
line-height: 125%;
background-image: url();
border: #FFFFFF;
border-style: solid;
border: 2px dashed #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 3px ;
width: 500px;
display: block;
padding: 10px;
text-align: justify;
}

.profil_contour
{
background-color: #ffffff;
-moz-border-radius: 15px;
filter:alpha(opacity=70);
opacity:0.7;
}

.pseudos {
font-variant: small-caps;
font-size: 14px}

table.bodylinewidth {
position: relative;
border: 6px solid;
border-color: #616c4e;
-moz-border-radius: 20px;
}

.row1{
background-color: #;
background-image: url("");
background-repeat: repeat;
}
td.row2{
background-color: #;
background-image: url("");
background-repeat: repeat;
}
td.row3{
background-color: #;
background-image: url("");
background-repeat: repeat;
}

.titre {
font-size: 20px;
font-family: Georgia;
color: #b1d4aa;
text-shadow: 1px 1px 3px #000000;
text-align: justify;
letter-spacing: 2px;
font-style: italic;
}

.titre_forum {
font-family: Verdana;
font-variant: small-caps;
font-size: 15px;
text-align: justify;
padding-right: 10px;}

.profil_contour
{
background-color: #63714e;
-moz-border-radius: 15px;
}

.pseudos {
font-variant: small-caps;
font-size: 14px}

.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding: 3px;
border:0px solid black;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
cursor:pointer;
font-family: Verdana;
color: #ffffff;
font-size: 12px;
}
.onglet_0
{
background:#63714e;
border-bottom:0px solid black;

}
.onglet_1
{
background:#708767;
border-bottom:0px solid black;

}
.contenu_onglet
{
background-color:#63714e;
border:0px solid black;
margin-top:-1px;
font-family: Verdana;
color: #ffffff;
font-size: 10px;

display:none;
width: 340px;
height: 400px;
padding-left: 15px;
-moz-border-radius: 15px;

}

.image { background-image: url("http://img41.xooimage.com/files/e/1/8/gr-21283a2.png");
background-repeat: no-repeat;
background-position: right;
;
}

.stats {
color: #264301;
letter-spacing: 2px;
opacity: 10;}

.PV {
background-color: #63714e;
-moz-border-radius: 15px;
opacity: 0.7;}

.title {
letter-spacing: 2px;
font-size: 12px; }

.boite
{
height: 150px;
overflow-x: auto;
overflow-y: auto;
padding: 10px;
text-align: justify;
}

.texte_PA {
font-size: 30px;
color: #;
font-family: Learning Curve; }

.Partenaires
{
height: 127px;
width: 195px;
background-image: url("http://img44.xooimage.com/files/2/2/6/pa_04-21547dd.gif") ;
text-align center ;

}

.Vacants
{
height: 235px ;
width: 123px ;
background-image: url("http://img42.xooimage.com/files/c/3/4/pa_05-21547fb.gif") ;
overflow: auto;
}

Code de base de l'image :

Code:: <html>
<head>
<title>pa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="401" height="550" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td colspan="2">
      <img src="BrowserPreview_01.gif" width="165" height="49" alt=""></td>
   <td rowspan="2">
      <img src="BrowserPreview_02.gif" width="235" height="121" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="49" alt=""></td>
</tr>
<tr>
   <td rowspan="2">
      <img src="BrowserPreview_03.gif" width="38" height="195" alt=""></td>
   <td rowspan="2">
      <img src="BrowserPreview_04.gif" width="127" height="195" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="72" alt=""></td>
</tr>
<tr>
   <td>
      <img src="BrowserPreview_05.gif" width="235" height="123" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="123" alt=""></td>
</tr>
<tr>
   <td colspan="3">
      <img src="BrowserPreview_06.gif" width="400" height="306" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="306" alt=""></td>
</tr>
</table>

</body>
</html>

Merci d'avance x)

Sujet: Re: Créer une PA réactive / mapping Ven 15 Oct 2010, 09:59

Désolée pour ce retard, j'ai beaucoup de boulot en ce moment, et pas beaucoup de temps pour me poser ^^"

Alors pour Mikkie, si ton problème n'est toujours pas résolu, il me faudrait ton code de base Wink

Pour Mina, je n'ai pas le temps de faire des essais pour réparer ce qui ne va pas, mais j'ai vu la bourde, qui est une erreur assez redondante je trouve --" Quand on refait plusieurs fois un même mapping parce qu'il ne marche pas, il faut penser à tout reprendre, et pas seulement re-copier/coller puisque c'est justement là le problème.

C'est ton css qui n'est pas bon, tu as inversé les "widht" et les "height" pour leur valeurs. Echange les, et ça pourra peut-être aller.
Pour ce qui est des "MAP", tu as oublié de fermer les guillemets dans le html:

Code:: USEMAP="#Tops>

Sujet: Re: Créer une PA réactive / mapping Ven 15 Oct 2010, 11:45

Voilà mon code de base:

Code:: <html>
<head>
<title>ScreenShot018</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="741" height="556" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="BrowserPreview_tmp_01.gif?1287153901" width="339" height="217" alt=""></td>
<td colspan="3" rowspan="2">
<img src="BrowserPreview_tmp_02.gif?1287153901" width="401" height="281" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="217" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="BrowserPreview_tmp_03.gif?1287153901" width="18" height="339" alt=""></td>
<td rowspan="2">
<img src="BrowserPreview_tmp_04.gif?1287153901" width="321" height="171" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="64" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="BrowserPreview_tmp_05.gif?1287153901" width="17" height="275" alt=""></td>
<td rowspan="3">
<img src="BrowserPreview_tmp_06.gif?1287153901" width="125" height="165" alt=""></td>
<td rowspan="5">
<img src="BrowserPreview_tmp_07.gif?1287153901" width="259" height="275" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="107" alt=""></td>
</tr>
<tr>
<td>
<img src="BrowserPreview_tmp_08.gif?1287153901" width="321" height="38" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="BrowserPreview_tmp_09.gif?1287153901" width="321" height="112" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="BrowserPreview_tmp_10.gif?1287153901" width="125" height="110" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="92" alt=""></td>
</tr>
<tr>
<td>
<img src="BrowserPreview_tmp_11.gif?1287153901" width="321" height="18" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="18" alt=""></td>
</tr>
</table>

</body>
</html>

Sujet: Re: Créer une PA réactive / mapping Sam 16 Oct 2010, 01:51

Oh la la je suis une vraie étourdie ! Vraiment désolée .... Je vais essayer normalement ça devrait le faire. Désolée pour l'erreur de débutant o_ô

Sujet: Re: Créer une PA réactive / mapping Sam 16 Oct 2010, 03:22

J'adore j'adore j'adore !!!!
Je suis amoureuse de ce tutorial !!
J'arrette pas de faire plein de page d'accueil comme sa , c'est beaucoup plus jolie et beaucoup plus facile que les autres =D

Sujet: Re: Créer une PA réactive / mapping Sam 16 Oct 2010, 18:33

Me revoilà donc avec un nouveau soucis (oui, parce que je pense mettre planté quelque part !)

En suivant le tuto en entier, enfin presque parce que pour ce qui est du CSS et tout, j'ai pas encore fait, j'ai donc réussie à faire une PA, sauf que comme vous le voyez ici : http://bruisy-night.forumactif.com/

Ça donne ... ben ça ! Avec des espaces, et je ne comprends pas puisque j'ai suivie à la lettre le tuto !

Et voici mon code :

Code:: 
<table id="Tableau_01" width="801" border="0" cellpadding="0" cellspacing="0" height="600">
<tbody><tr>
<td colspan="4">
<img src="http://img510.imageshack.us/img510/773/painteractive01.gif" alt="" width="550" height="133"></td>
<td rowspan="2">
<img src="http://img291.imageshack.us/img291/7775/painteractive02.gif" alt="" usemap="#Fable Quintet" width="250" height="267"></td>
<td>
<img src="spacer.gif" alt="" width="1" height="133"></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="http://img839.imageshack.us/img839/6648/painteractive03.gif" alt="" width="203" height="173"></td>
<td>
<img src="http://img89.imageshack.us/img89/8794/painteractive04.gif" alt="" usemap="#Nakamura" width="347" height="134"></td>
<td>
<img src="spacer.gif" alt="" width="1" height="134"></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="http://img299.imageshack.us/img299/7254/painteractive05.gif" alt="" usemap="#Mazurka" width="597" height="333"></td>
<td>
<img src="spacer.gif" alt="" width="1" height="39"></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://img139.imageshack.us/img139/1612/painteractive06.gif" alt="" width="30" height="294"></td>
<td>
<img src="http://img98.imageshack.us/img98/5922/painteractive07.gif" alt="" width="148" height="229"></td>
<td rowspan="2">
<img src="http://img829.imageshack.us/img829/6484/painteractive08.gif" alt="" width="25" height="294"></td>
<td>
<img src="spacer.gif" alt="" width="1" height="229"></td>
</tr>
<tr>
<td>
<img src="http://img145.imageshack.us/img145/31/painteractive09.gif" alt="" width="148" height="65"></td>
<td>
<img src="spacer.gif" alt="" width="1" height="65"></td>
</tr>
</tbody></table>

<map name="Fable Quintet">
<area shape="rect" alt="contexte" coords="9,27,115,63" href="http://japanese-fable.forumactif.com/">
<area shape="rect" alt="règlement" coords="39,64,145,100" href="http://japanese-fable.forumactif.com/">
<area shape="rect" alt="postes vacants" coords="58,100,186,136" href="http://japanese-fable.forumactif.com/">
<area shape="rect" alt="prédéfinis" coords="63,133,191,169" href="http://japanese-fable.forumactif.com/">
<area shape="rect" alt="partenaires" coords="81,167,209,203" href="http://japanese-fable.forumactif.com/">
<area shape="rect" alt="crédits" coords="101,202,186,238" href="http://japanese-fable.forumactif.com/">
</map>

<map name="Nakamura">
<area shape="rect" alt="naka" coords="231,12,305,99" href="http://japanese-fable.forumactif.com/">
</map>

<map name="Mazurka">
<area shape="rect" alt="mazu" coords="309,68,384,148" href="http://japanese-fable.forumactif.com/">
</map>

Donc moi je ne dis qu'une chose, help me T_T
Merci d'avance !

Mazurka ~

Sujet: Re: Créer une PA réactive / mapping Sam 16 Oct 2010, 19:11

Bonsoir ! ^^

Ton tutoriel est très bien fait et agréable à lire malgré sa longueur Wink

Ceci étant j'ai des difficultés à comprendre cette partie :

Citation :

Dans notre code, mettez de côté les endroits où vous souhaitez installer le html/css. Quels sont ces endroits? Ce seront ceux où vous écrirez le contexte, les news, les partenaires, les infos variables en fait. Vous pourrez les modifier dans le panneau d'administration très simplement.

De mon côté, j'ai 2 éléments de ma PA que je veux rendre comme ça. Il s'agit de mon image des news et du défilement des partenaires.

Pour cela, je les cible dans mon code. Il s'agissait des tranches 4 et 7; je les recherche donc dans les rangs 4 et 7.
Dans l'ordre, il faut agir ainsi:

D'abord pour la tranche 4.

Coupez tout ce qui se trouve dans le rang 4

Code:

<td colspan="2"></td></tr>
Ajoutez une classe qui décrit bien ce que vous allez en faire (pour le css):

Code:

<td colspan="2"><div class="News"></div></td></tr>
Enfin, rajoutez ce que vous souhaitez y mettre:

Code:

<td colspan="2"><div class="News">CSSActif, dans sa 4ième version, vous en met plein les yeux avec une mise en page unique qui témoigne de la puissance du codage CSS & HTML et de son utilisation sur Forumactif. Le forum met à votre disposition une grande variété de tutoriaux, codes et ressources qui vous permettrons de découvrir ce merveilleux univers, comme il a toujours su le faire avec fierté. Nos codeurs, modérateurs et animateurs sauront, chacun à leur manière, rendre votre expérience sur CSSActif des plus agréable.<br><br>Orange & Snipe_SCK, Admins</div></td></tr>

Idem pour la tranche 7:
Code:

<td colspan="2"><div class="partenaires"><marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115">
<A class=postlink href="http://css-actif.forumactif.org/" target="_blank"><IMG border="0" alt="" src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif"></A></div></td>

Une fois cela fait, nous n'avons pas tout à fait terminé. En effet, il faut encore ajouter le css pour que tout soit parfait, sinon vous aurez un fond de couleur pour ce que vous aurez ajouté.

Je ne saisis pas bien ce que tu veux dire et je me trouve un peu bloqué. = (

Si quelqu'un comprends... Je suis tout ouïe.

La réponse la suite et la réponse de ce message se trouve ici :

http://www.css-actif.com/aide-css-xhtml-f17/mapping-pa-probleme-de-tableau-t7600.htm

Sujet: Re: Créer une PA réactive / mapping Jeu 28 Oct 2010, 09:52

Bonjour ,

J'ai un gros problème pourtant j'ai bien suivi a lettre vôtre tuto .

Allez voir mon forum : http://bleachofsy.forums-actifs.net/index.htm

Le code html :

Code:: <html>
<head>
<title>Header</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="700" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td colspan="2">
      <img src="http://img194.imageshack.us/img194/2213/sanstitre501.gif" width="700" height="81" alt=""></td>
      <td colspan="2"><div class="Contexte">
      Après la trahison du capitaine de la 5ème division nommée Aizen ainsi accompagné par ses complices Gin Ichimaru et Tousen.
      Celui-ci complotait la puissance du Hogyôku et la création de lOuken mais pour faire cela il fallait 10 000 âmes humaines.
      Le Gotei 13 lança une enquête dans le Sereitei pour empêcher Aizen à commettre cette folie,la Soul Society commença à se préparer pour une bataille sans fin.
      Pendant ce temps, Aizen prit le contrôle du Hueco Mundo et utilisait la puissance du Hogyôku afin de créer des arrancars et lEspada en pensant que l'armée qu'il créerait aurez assez de force pour combattre les Capitaines et les Shinigami.
      Il y avait un seul inconvénient le Hogyôku mettait 3 mois pour se réveiller et Aizen n'apprécie pas cela.
      Le roi du Hueco Mundo avait remarqué que Inoue avait le pouvoir de réveiller le Hogyôku.
      Inoue fut enlevée par Ulquiorria. Le groupe dIchigo était parti la sauver dans le Hueco Mundo comme Aizen lavait prévu.
      Les quatre autres capitaines Byakuya,Kenpachi,Mayuri et Unohana étaient venu prêter main forte mais cela affaiblissait encore plus la Soul Society.
      Aizen profita le moment dattaquer la fausse Karakura avec le reste de lEspada. La bataille faisait rage, mais finalement les Vizard sont apparu et venir en aide au Gotei 13 leur but était de tué Aizen .
Rejoignez donc la grande aventure et écrivez la suite de l'histoire! </div></td></tr>

</tr>
<tr>
   <td rowspan="2">
      <img src="http://img183.imageshack.us/img183/2410/sanstitre502.gif" width="310" height="322" alt=""></td>
   <td>
      <img src="http://img146.imageshack.us/img146/2623/sanstitre503.gif" width="390" height="142" alt=""></td>
</tr>
<tr>
   <td>
      <img src="http://img21.imageshack.us/img21/8418/sanstitre504.gif" width="390" height="180" alt=""></td>
      <td colspan="2"><div class="partenaires"><marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115">
<A class=postlink href="http://worldaid.purforum.com/" target="_blank"><IMG border="0" alt="" src="http://i63.servimg.com/u/f63/14/93/43/86/sans-t10.gif"></A></div></td>

</tr>
<tr>
   <td>
      <img src="http://img183.imageshack.us/img183/9500/sanstitre505.gif" width="310" height="97" alt=""></td>
   <td>
      <img src="http://img401.imageshack.us/img401/2492/sanstitre506.png" width="390" height="97" alt=""></td>
</tr>
</table>
<MAP NAME="Top sites">
<AREA SHAPE="rect" ALT="Top sites1" COORDS="29,182,152,283" HREF="http://www.root-top.com/topsite/soulsociety/in.php?ID=584">
</MAP>


</body>
</html>

Le code css :

Code:: .Contexte
{
height: 390px ;
width: 142px ;
background-image: url("http://img183.imageshack.us/img183/2410/sanstitre502.gif") ;
text-align center ;
overflow: auto ;
}

.partenaires
{
height: 97px ;
width: 310px ;
background-image: url("http://img183.imageshack.us/img183/9500/sanstitre505.gif") ;
}

J'ai déjà recommencer 2 fois et pourtant j'ai le même problème que faire ....

Savez vous d'où vient le problème ?

Sujet: Re: Créer une PA réactive / mapping Ven 29 Oct 2010, 10:45

Omg je sens que je vais rigoler... Je vais surement être candidate au suicide mais comme je suis maso je vais me lancer xD!
Merci pour ce tutaux x') il devrait me permettre d'avoir une super page d'accueil!

Sujet: Re: Créer une PA réactive / mapping Jeu 04 Nov 2010, 12:57

(Ow, mais qui vois-je =3)

Bonjour, alors déjà merci pour ce tuto que je vais utiliser plein de fois je le sens Créer une PA réactive / mapping - Page 4 510527

, mais ensuite j'aurais une question:
Est-ce normale que lors de l'enregistrement, je n'ai aucune image spacer.gif ? Son absence aura-t'elle des concéquences désastreuses ? Oo" (moi je suis sous IE mais bon, on pense aux autres quand même)

Edit: bon dorénavant je lirais plus souvent les réponses de la première page xD..
ps: Sur IE sélectionner le pixel était une vrais galère xD

Sujet: Re: Créer une PA réactive / mapping Ven 19 Nov 2010, 14:52

Mazurka a écrit:

Me revoilà donc avec un nouveau soucis (oui, parce que je pense mettre planté quelque part !)

En suivant le tuto en entier, enfin presque parce que pour ce qui est du CSS et tout, j'ai pas encore fait, j'ai donc réussie à faire une PA, sauf que comme vous le voyez ici : http://bruisy-night.forumactif.com/

Ça donne ... ben ça ! Avec des espaces, et je ne comprends pas puisque j'ai suivie à la lettre le tuto !

Et voici mon code :

Code:: 
<table id="Tableau_01" width="801" border="0" cellpadding="0" cellspacing="0" height="600">
<tbody><tr>
<td colspan="4">
<img src="http://img510.imageshack.us/img510/773/painteractive01.gif" alt="" width="550" height="133"></td>
<td rowspan="2">
<img src="http://img291.imageshack.us/img291/7775/painteractive02.gif" alt="" usemap="#Fable Quintet" width="250" height="267"></td>
<td>
<img src="spacer.gif" alt="" width="1" height="133"></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="http://img839.imageshack.us/img839/6648/painteractive03.gif" alt="" width="203" height="173"></td>
<td>
<img src="http://img89.imageshack.us/img89/8794/painteractive04.gif" alt="" usemap="#Nakamura" width="347" height="134"></td>
<td>
<img src="spacer.gif" alt="" width="1" height="134"></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="http://img299.imageshack.us/img299/7254/painteractive05.gif" alt="" usemap="#Mazurka" width="597" height="333"></td>
<td>
<img src="spacer.gif" alt="" width="1" height="39"></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://img139.imageshack.us/img139/1612/painteractive06.gif" alt="" width="30" height="294"></td>
<td>
<img src="http://img98.imageshack.us/img98/5922/painteractive07.gif" alt="" width="148" height="229"></td>
<td rowspan="2">
<img src="http://img829.imageshack.us/img829/6484/painteractive08.gif" alt="" width="25" height="294"></td>
<td>
<img src="spacer.gif" alt="" width="1" height="229"></td>
</tr>
<tr>
<td>
<img src="http://img145.imageshack.us/img145/31/painteractive09.gif" alt="" width="148" height="65"></td>
<td>
<img src="spacer.gif" alt="" width="1" height="65"></td>
</tr>
</tbody></table>

<map name="Fable Quintet">
<area shape="rect" alt="contexte" coords="9,27,115,63" href="http://japanese-fable.forumactif.com/">
<area shape="rect" alt="règlement" coords="39,64,145,100" href="http://japanese-fable.forumactif.com/">
<area shape="rect" alt="postes vacants" coords="58,100,186,136" href="http://japanese-fable.forumactif.com/">
<area shape="rect" alt="prédéfinis" coords="63,133,191,169" href="http://japanese-fable.forumactif.com/">
<area shape="rect" alt="partenaires" coords="81,167,209,203" href="http://japanese-fable.forumactif.com/">
<area shape="rect" alt="crédits" coords="101,202,186,238" href="http://japanese-fable.forumactif.com/">
</map>

<map name="Nakamura">
<area shape="rect" alt="naka" coords="231,12,305,99" href="http://japanese-fable.forumactif.com/">
</map>

<map name="Mazurka">
<area shape="rect" alt="mazu" coords="309,68,384,148" href="http://japanese-fable.forumactif.com/">
</map>

Donc moi je ne dis qu'une chose, help me T_T
Merci d'avance !

Mazurka ~

Je me permet de UP mon message. Parce que là j'avoue qu'après avoir fait 36 000 expériences dessus, ça ne change toujours rien .... Mad

Merci pour l'aide que quelqu'un pourrait m'apporter. ^_^

Sujet: Re: Créer une PA réactive / mapping Mer 24 Nov 2010, 14:12

Coucou =D
Déjà merci pour ce tuto, il est vraiment génial et donne envie, mais euh, je sens que je ne vais pas du tout y arriver, en plus je n'ai plus toshop -_-

J'aurais une question, y a t-il un moyen de faire comme sur ton forum (le changement de page sur la PA) mais seulement avec des code dans chaque partie, au lieu de faire une image réactive?

Je sais pas si je suis très claire, désolée Very Happy

Bonsoir,

Tout d'abord, merci pour ce tutoriel vraiment génial.

J'ai réussi à faire tout correctement mais mon problème est quand je veux mettre du texte, j'ai beau placer le code, le texte s'affiche mais à côté de l'image où il doit être posé.

Voici le code Html :

Code:: <html>
<head>
<title>Bannière page d'acceuil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="1151" height="399" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td colspan="7">
      <img src="http://img4.hostingpics.net/pics/799439Map01gif.gif" width="1150" height="54" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="54" alt=""></td>
</tr>
<tr>
   <td rowspan="5">
      <img src="http://img4.hostingpics.net/pics/218519Map02gif.gif" width="208" height="344" alt=""></td>
   <td colspan="2" rowspan="2">
      <img src="http://img4.hostingpics.net/pics/285156Map03gif.gif" width="353" height="112" alt=""></td>
   <td rowspan="3">
      <img src="http://img4.hostingpics.net/pics/326267Map04gif.gif" width="172" height="184" alt=""></td>
   <td colspan="2">
      <img src="http://img4.hostingpics.net/pics/153791Map05gif.gif" width="408" height="103" alt=""></td>
   <td rowspan="5">
      <img src="http://img4.hostingpics.net/pics/701190Map06gif.gif" width="9" height="344" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="103" alt=""></td>
</tr>
<tr>
   <td colspan="2" rowspan="2">
      <img src="http://img4.hostingpics.net/pics/728005Map07gif.gif" width="408" height="81" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
   <td colspan="2">
      <img src="http://img4.hostingpics.net/pics/741354Map08gif.gif" width="353" height="72" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="72" alt=""></td>
</tr>
<tr>
   <td rowspan="2">
      <img src="http://img4.hostingpics.net/pics/428078Map09gif.gif" width="54" height="160" alt=""></td>
   <td colspan="3">
      <img src="http://img4.hostingpics.net/pics/431895Map10gif.gif" width="603" height="108" alt=""USEMAP="#Navigation"></td>
   <td rowspan="2">
      <img src="http://img4.hostingpics.net/pics/746702Map11gif.gif" width="276" height="160" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="108" alt=""></td>
</tr>
<tr>
   <td colspan="3">
      <img src="http://img4.hostingpics.net/pics/329479Map12gif.gif" width="603" height="52" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="52" alt=""></td>
</tr>
<tr>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="208" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="54" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="299" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="172" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="132" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="276" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="9" height="1" alt=""></td>
   <td></td>
</tr>
</table>

<MAP NAME="Navigation">
<AREA SHAPE="rect" ALT="règlements" COORDS="47,53,580,74" HREF="http://tahrehelayktreek.forumactif.org/vous-voulez-etre-paarminoux-f2/regles-et-modalites-de-recrutement-t5.htm">
</MAP>


</body>
</html>

Mon texte doit se situer sur l'image : https://2img.net/r/hpimg4/pics/285156Map03gif.gif
et : https://2img.net/r/hpimg4/pics/153791Map05gif.gif

Mon autre problème est l'impossibilité d’enregistrer les images en Png mais pour le moment, ce n'est pas un problème.

Merci.

Edit : Après avoir lu et relu ton post, fait ma page Css, j'y suis enfin arrivé. Une petite reproche donc que je peux faire sur ton tuto. Mieux expliquer la partie, enlever ce qui a dans le rang. Tu n'es pas assez "universel".

Pour ceux à qui ça pourrait aider, j'ai donc pris mon rang :

Code:: <td colspan="2" rowspan="2">
<img src="http://img4.hostingpics.net/pics/285156Map03gif.gif" width="353" height="112" alt=""></td>

Bien enlever ce qui dans les balises, ce qui me donne :

Code:: <td colspan="2" rowspan="2"></td>

Il ne reste plus qu'à ajouter la balise Div :

Code:: <td colspan="2">
<div class="Titre">Votre texte</div></td>

Voilà. Je ne suis pas un expert, je suis donc content d'avoir pu comprendre mon erreur tout seul. Smile

Maintenant, puisque je viens de résoudre le problème de la persistance de Ps d’enregistrer en .Gif au lieu du .Png :

Il suffit juste lors de l’enregistrement de sélectionner "Personnalisé" dans les paramètres. Après, bien entendu, il fallait choisir .png dans les paramètres prédéfinis.

Créer une PA réactive / mapping - Page 4 289180ScreenShot005png

Je ne sais pas s'il y a une autre solution mais celle-là m'a permis d'avoir mes images en .Png alors je la conseille.

Voilà. Wink

Bonjour tout le monde!

Tout d'abord, pardonnez moi pour mon absence (qui a été signalée, mais je ne sais pas si beaucoup de gens ont percutés). D'ailleurs, je suis toujours en absence normalement, mes partiels commencent dès lundi, je ne vais donc pas faire long feu sur l'ordi xD

Si je poste, c'est pour faire un peu de "rangement" dans les demandes d'aide. Comme certaines datent d'octobre, je ne sais pas si c'est toujours d'actualité (= travail en moins = un peu plus de cerveau disponible xD). Le temps que tout le monde poste, ça me laisse du temps pour finir mes exams et je pourrais commencer à répondre à vos questions à partir du weekend prochain ^^

Voilà, si vous êtes toujours intéressés, postez à la suite de ce message, en indiquant bien toutes les pièces demandées (oui parce que souvent j'ai la flemme de répondre parce que je sais que je dois demander encore une partie du code; donc évitez moi ce léger contre-temps et tout ira plus vite Very Happy

) qui sont: le html du rendu, le html de base et le css (et si possible un aperçu ou un lien de forum pour voir ce que ça donne)

Dites vous bien que si vous me donnez tout en une seule fois, ça ira dix fois plus vite Wink

Bref, je vous laisse la suite. Sachez aussi que je réponds dans l'ordre. Donc premier arrivé, premier servi Wink

(bon, seulement à partir du weendend pro' hein! =p)

ps: merci Nep-thune! J'ajouterais tout ça la semaine prochaine! Wink

Sujet: Re: Créer une PA réactive / mapping Lun 10 Jan 2011, 14:20

▬ Bonjour,

▬ Pour commencer, merci pour ce superbe tuto Wink

▬ Le problème est que la map ne s'affiche pas de la même façon sur Mozilla et sur Chrome/IE, comme le montre cette image : (https://nsm05.casimages.com/img/2011/01/10/110110071835393807450322.jpg)

Spoiler:

▬ Voilà le code de la map :

CSS

Code:: .recherche {
background-image:url(http://nsm05.casimages.com/img/2011/01/09/110109070306393807445416.gif);
width:241px;
height:74px;
text-align:center;
vertical-align:top;
}

.liens {
background-image:url(http://nsm05.casimages.com/img/2011/01/09/110109070307393807445423.gif);
width:310px;
height:140px;
text-align:center;
vertical-align:top;
}

.news {
background-image:url(http://nsm05.casimages.com/img/2011/01/09/110109070308393807445425.gif);
width:264px;
height:101px;
text-align:center;
vertical-align:top;
}

.top {
background-image:url(http://nsm05.casimages.com/img/2011/01/09/110109070308393807445426.png);
width:267px;
height:101px;
text-align:center;
vertical-align:top;
}

.amis {
background-image:url(http://nsm05.casimages.com/img/2011/01/09/110109070307393807445421.gif);
width:241px;
height:72px;
text-align:center;
vertical-align:top;
}

.contexte {
background-image:url(http://nsm05.casimages.com/img/2011/01/09/110109070306393807445419.png);
width:505px;
height:128px;
text-align:justify;
padding:10px;
vertical-align:top;
}

.staff {
background-image:url(http://nsm05.casimages.com/img/2011/01/09/110109070306393807445414.gif);
width:153px;
height:75px;
text-align:center;
vertical-align:top;
}

/*INFOBULLE*/
div.infobulle {
position: relative;
}
div.infobulle span {
display: none;
}
div.infobulle:hover {
background: none;
z-index: 999;
}
div.infobulle:hover span {
display: inline;
position: absolute;
white-space: nowrap;
top: 15px;
left: 15px;
background: #CCCCCC;
color: black;
padding: 3px;
border: 1px solid #000000;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
}

HTML

Code:: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="851" height="501" border="0" cellpadding="0" cellspacing="0">

<tr><td colspan="6"><img src="http://nsm05.casimages.com/img/2011/01/09/110109070305393807445412.gif" width="850" height="117" alt=""></td>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="1" height="117" alt=""></td>
</tr>

<tr><td colspan="2" rowspan="2"><img src="http://nsm05.casimages.com/img/2011/01/09/110109070305393807445413.gif" width="352" height="75" alt=""></td>

   
   <td rowspan="2" class="staff">
      <table><tr><td>
      <div class="infobulle"><img src="http://i52.tinypic.com/jb1t14.jpg">
      <span>
      <img src="http://i55.tinypic.com/10db3ud.jpg">

      Fillette

         Fondatrice

         <a href="http://lrdm.forumgratuit.org/u1">Tu veux jouer avec moi ?</a>
      </span>
      </div></td>

      <td>
      <div class="infobulle"><img src="http://i54.tinypic.com/2dhe879.jpg">
      <span>
      <img src="http://i54.tinypic.com/b539mr.jpg">

      Maître des Clefs

         Maitre du Jeu

         <a href="http://lrdm.forumgratuit.org/u2">Que puis-je faire pour vous ?!</a>
      </span>
      </div> </td></tr></table>

   </td>
   

   <td colspan="3"><img src="http://nsm05.casimages.com/img/2011/01/09/110109070306393807445415.gif" width="345" height="52" alt=""></td>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="1" height="52" alt=""></td>
</tr>

<tr>
   
   <td colspan="2" rowspan="2" class="recherche">
      <p>Un administrateur - Des modérateurs<br>et bien sûr des Membres</p></td>
   

   <td rowspan="5"><img src="http://nsm05.casimages.com/img/2011/01/09/110109070306393807445417.gif" width="104" height="191" alt=""></td>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="1" height="23" alt=""></td>
</tr>

<tr>

   <td colspan="3" rowspan="3" class="contexte">
      Bienvenue à toi qui t'éveilles en ces lieux. Tu es ici parce que tu as passé
ta vie à effrayer les autres. Cela fait des années que tu considères le reste
de l'Humanité comme de vulgaires fourmis, tout juste bonnes à t'essuyer
les pieds dessus. Mais aujourd'hui, c'est toi la fourmi. Toi qui as pris tant de
plaisir à faire peur aux autres, cette fois-ci c'est à ton tour d'avoir peur. <a href="http://lrdm.forumgratuit.org/f3-contexte">[LIRE LA SUITE]</a></td>


   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="1" height="51" alt=""></td>
</tr>

<tr><td colspan="2"><img src="http://nsm05.casimages.com/img/2011/01/09/110109070307393807445420.gif" width="241" height="45" alt=""></td>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="1" height="45" alt=""></td></tr><tr>


   <td colspan="2" rowspan="2" class="amis">
      images des amis</td>


   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="1" height="32" alt=""></td>
</tr>

<tr>
   <td colspan="3">
      <img src="http://nsm05.casimages.com/img/2011/01/09/110109070307393807445422.gif" width="505" height="40" alt=""></td>
   <td>
      <img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="1" height="40" alt=""></td>
</tr>

<tr>

   <td rowspan="2" class="liens">
      <a href="http://lrdm.forumgratuit.org/f4-reglement">Règlement</a> & <a href="http://lrdm.forumgratuit.org/f3-contexte">Contexte du forum</a><br><a href="http://lrdm.forumgratuit.org/t7-fiche-type">Présentation</a> & <a href="http://lrdm.forumgratuit.org/f9-les-demandes">Demandes</a><br><a href="http://lrdm.forumgratuit.org/t13-pour-un-partenariat">Devenir Partenaires</a></td>


   <td colspan="5"><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445424.gif" width="540" height="39" alt=""></td>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="1" height="39" alt=""></td>
</tr>

<tr>
   
   <td colspan="3" class="news">
      Bonne année 2011 à tous !<br>
      Le forum ouvre ses portes, n'hésitez plus<br>
      à vous inscrire !</td>
   

   
   <td colspan="2" class="top">
      images des tops sites</td>
   

   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="1" height="101" alt=""></td>
</tr>

<tr>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="310" height="1" alt=""></td>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="42" height="1" alt=""></td>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="153" height="1" alt=""></td>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="69" height="1" alt=""></td>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="172" height="1" alt=""></td>
   <td><img src="http://nsm05.casimages.com/img/2011/01/09/110109070308393807445427.gif" width="104" height="1" alt=""></td>
   <td></td>
</tr>
</table>
</body>
</html>

▬ Merci d'avance, si vous réussissez à résoudre mon problème Smile

▬ Peut-être est-ce dû au fait que les images soient en gif ??

Sujet: Re: Créer une PA réactive / mapping Mar 11 Jan 2011, 16:25

Merci Beaucoup, pour ce tuto Smile

je suis totale débutant et j'ai pu le suivre sans encombre (miracle) *o*

Sujet: Re: Créer une PA réactive / mapping Sam 15 Jan 2011, 18:43

Merci à toi Folieust! Wink

@ Lebravex: il suffit juste d'enlever le padding du css dans la partie contexte, c'est ce qui fait tout foirer Wink

(à ne jamais mettre dans un css de mapping en fait, j'en sais quelque chose xD)

Comme quoi, chaque détail compte ^^ le plus dur étant de trouver où ça cloche

(pardon pour le retard, mais je n'ai pas du tout le temps de passer la semaine! ^^")

Sujet: Re: Créer une PA réactive / mapping Dim 16 Jan 2011, 05:29

@Jill : Merci beaucoup pour ton aide, ça marche beaucoup mieux maintenant Smile

Sujet: Re: Créer une PA réactive / mapping Jeu 20 Jan 2011, 13:53

Jill, je t'aime è_é

Je ne savais pas me servir des tranches de Photoshop .... Je crois qu'il va me faciliter le codage de mes sites *o*

Merci !!

Sujet: Re: Créer une PA réactive / mapping Jeu 20 Jan 2011, 18:06

Coucou ^^ Super tuto! Mais j'ai un soucis... J'ai fait mon QEEL avec cette technique et tout allait bien jusqu'à ce que je mette le code sur le forum auquel il était destiné. Sur mon forum test, en revanche, absolument aucun problème... :/ Il réagit comme s'il y avait un padding dans le CSS, c'est à dire que les images sont décalées...

Le forum où se situe le problème: http://sos-agence.forumactif.org/
Celui où tout va bien: http://tarsicius-test.creer-forum.com/

Voici mon CSS:

Code:: .stat_qeel{
background-image: url('http://img228.imageshack.us/img228/8458/statu.jpg');
width:234px;
height: 125px;
text-align: center;
font-size: 16px;
}

.connectes{
background-image: url('http://img40.imageshack.us/img40/6284/connectes.jpg');
width: 236px;
height: 135px;
overflow: auto;
text-align: center;
}

Et Template:

Code:: {JAVASCRIPT}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
   <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
   <td class="row1" rowspan="3" align="center" valign="middle">
   <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
   </td>
</tr>

</table>



<form action="{S_LOGIN_ACTION}" method="post" name="form_login">

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
   <tr>
      <td class="row1" align="center">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><span class="genmed">{L_USERNAME}:</span> </td>
               <td><input class="post" type="text" size="10" name="username"/> </td>
               <td>
                  <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                  <span class="gensmall">{L_AUTO_LOGIN}</span>
               </td>
            </tr>

            <tr>
               <td><span class="genmed">{L_PASSWORD}:</span> </td>
               <td><input class="post" type="password" size="10" name="password"/> </td>
               <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
            </tr>
         </table>
      </td>
   </tr>
</table>



<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
   <tr>
      <td valign="top" width="100%" class="row1" align="center">
         <table width="100%">
            <tr>
               <td width="55%" valign="middle" align="right">
                  <table class="right">
                     <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                           <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                           <span class="gensmall">{L_AUTO_LOGIN}</span>
                        </td>
                     </tr>

                     <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                     </tr>
                  </table>
               </td>
               <td width="10%" align="center" valign="middle">
                  <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
               </td>
               <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

</form>


{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
   <td width="50%" valign="top">
      
      <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
      
      
      <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
      
      </span>
   </td>
   <td width="50%" align="right">
      <span class="gensmall">
         <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
         <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
         <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
         
            
            <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
            
         
      </span>
   </td>
</tr>
</table>


<form action="{S_LOGIN_ACTION}" method="post" name="form_login">

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
   <tr>
      <td class="row1" align="center">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><span class="genmed">{L_USERNAME}:</span> </td>
               <td><input class="post" type="text" size="10" name="username"/> </td>
               <td>
                  <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                  <span class="gensmall">{L_AUTO_LOGIN}</span>
               </td>
            </tr>

            <tr>
               <td><span class="genmed">{L_PASSWORD}:</span> </td>
               <td><input class="post" type="password" size="10" name="password"/> </td>
               <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
            </tr>
         </table>
      </td>
   </tr>
</table>



<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
   <tr>
      <td valign="top" width="100%" class="row1" align="center">
         <table width="100%">
            <tr>
               <td width="55%" valign="middle">
                  <table class="right">
                     <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                           <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                           <span class="gensmall">{L_AUTO_LOGIN}</span>
                        </td>
                     </tr>

                     <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                     </tr>
                  </table>
               </td>
               <td width="10%" align="center" valign="middle">
                  <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
               </td>
               <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" perms="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

</form>



<div style="margin-left: 80px"><table id="Tableau_01" width="653" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td rowspan="23">
      <img id="sos_QEEL_copie_01" src="http://img405.imageshack.us/img405/5525/sosqeelcopie01.jpg" width="65" height="484" alt="" /></td>
   <td colspan="2" rowspan="3">

      <img id="sos_QEEL_copie_02" src="http://img9.imageshack.us/img9/6954/sosqeelcopie02.jpg" width="236" height="73" alt="" /></td>
   <td rowspan="23">
      <img id="sos_QEEL_copie_03" src="http://img607.imageshack.us/img607/5959/sosqeelcopie03.jpg" width="1" height="484" alt="" /></td>
   <td rowspan="23">
      <img id="sos_QEEL_copie_04" src="http://img338.imageshack.us/img338/5562/sosqeelcopie04.jpg" width="224" height="484" alt="" /></td>
   <td colspan="12">
      <img id="sos_QEEL_copie_05" src="http://img714.imageshack.us/img714/6144/sosqeelcopie05.jpg" width="71" height="30" alt="" /></td>
   <td rowspan="23">
      <img id="sos_QEEL_copie_06" src="http://img833.imageshack.us/img833/6055/sosqeelcopie06.jpg" width="55" height="484" alt="" /></td>

   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="30" alt="" /></td>
</tr>
<tr>
   <td colspan="3" rowspan="2">
      <img id="sos_QEEL_copie_07" src="http://img830.imageshack.us/img830/7892/sosqeelcopie07.jpg" width="5" height="43" alt="" /></td>
   <td colspan="9">
      <a href="http://sos-agence.forumactif.org/g1-manager" target="_blank">
         <img id="managers" src="http://img193.imageshack.us/img193/7261/managersr.jpg" width="66" height="24" border="0" alt="" /></a></td>

   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
   <td colspan="9">
      <img id="sos_QEEL_copie_09" src="http://img413.imageshack.us/img413/5762/sosqeelcopie09.jpg" width="66" height="19" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="19" alt="" /></td>
</tr>

<tr>
   <td rowspan="6">
      <img id="sos_QEEL_copie_10" src="http://img220.imageshack.us/img220/7666/sosqeelcopie10.jpg" width="2" height="125" alt="" /></td>
   <td rowspan="6">
      <div class="stat_qeel">
Bienvenue sur SOS Agence! <br><span id="yosh">{NEWEST_USER}</span>
<script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Nous tenons à remercier");</script> qui est notre dernier agent inscrit,

<span id="matt">{TOTAL_USERS}</span>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"rejoignant");</script>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membre enregistré/,"agent déjà dans nos rangs. ");</script>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"agents déjà dans nos rangs. ");</script><br>

<span id="yow">{TOTAL_POSTS}</span>
<script type="text/javascript">document.getElementById('yow').innerHTML=document.getElementById('yow').innerHTML.replace(/Nos membres ont posté un total de/,"Ils ont partagé ");</script>
<script type="text/javascript">document.getElementById('yow').innerHTML=document.getElementById(yow').innerHTML.replace(/message/,"rapport. ");</script>
<script type="text/javascript">document.getElementById('yow').innerHTML=document.getElementById('yow').innerHTML.replace(/messages/,"rapports. ");</script><br>

<br>

</div></td>
   <td colspan="2" rowspan="6">
      <img id="sos_QEEL_copie_12" src="http://img408.imageshack.us/img408/5724/sosqeelcopie12.jpg" width="4" height="125" alt="" /></td>
   <td colspan="10">
      <a href="http://sos-agence.forumactif.org/g2-surveillants" target="_blank">

         <img id="surveillants" src="http://img203.imageshack.us/img203/4088/surveillants.jpg" width="67" height="23" border="0" alt="" /></a></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
   <td colspan="10">
      <img id="sos_QEEL_copie_14" src="http://img440.imageshack.us/img440/5918/sosqeelcopie14.jpg" width="67" height="17" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="17" alt="" /></td>

</tr>
<tr>
   <td colspan="5" rowspan="2">
      <img id="sos_QEEL_copie_15" src="http://img255.imageshack.us/img255/1296/sosqeelcopie15.jpg" width="16" height="42" alt="" /></td>
   <td>
      <a href="http://sos-agence.forumactif.org/g3-vip" target="_blank">
         <img id="vip" src="http://img337.imageshack.us/img337/200/vipx.jpg" width="32" height="25" border="0" alt="" /></a></td>
   <td colspan="4" rowspan="2">
      <img id="sos_QEEL_copie_17" src="http://img155.imageshack.us/img155/8053/sosqeelcopie17.jpg" width="19" height="42" alt="" /></td>

   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="25" alt="" /></td>
</tr>
<tr>
   <td>
      <img id="sos_QEEL_copie_18" src="http://img64.imageshack.us/img64/4798/sosqeelcopie18.jpg" width="32" height="17" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="17" alt="" /></td>
</tr>

<tr>
   <td colspan="9">
      <a href="http://sos-agence.forumactif.org/g4-animateurs" target="_blank">
         <img id="animateurs" src="http://img411.imageshack.us/img411/7328/animateurs.jpg" width="66" height="25" border="0" alt="" /></a></td>
   <td rowspan="4">
      <img id="sos_QEEL_copie_20" src="http://img695.imageshack.us/img695/1792/sosqeelcopie20.jpg" width="1" height="84" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="25" alt="" /></td>
</tr>

<tr>
   <td colspan="9">
      <img id="sos_QEEL_copie_21" src="http://img30.imageshack.us/img30/1192/sosqeelcopie21.jpg" width="66" height="18" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
   <td colspan="2" rowspan="4">
      <img id="sos_QEEL_copie_22" src="http://img841.imageshack.us/img841/7795/sosqeelcopie22.jpg" width="236" height="74" alt="" /></td>

   <td rowspan="2">
      <img id="sos_QEEL_copie_23" src="http://img577.imageshack.us/img577/7058/sosqeelcopie23.jpg" width="3" height="41" alt="" /></td>
   <td colspan="10">
      <a href="http://sos-agence.forumactif.org/g5-redacteurs" target="_blank">
         <img id="redacteurs" src="http://img811.imageshack.us/img811/1497/redacteurs.jpg" width="67" height="25" border="0" alt="" /></a></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="25" alt="" /></td>
</tr>
<tr>

   <td colspan="10">
      <img id="sos_QEEL_copie_25" src="http://img8.imageshack.us/img8/9469/sosqeelcopie25.jpg" width="67" height="16" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="16" alt="" /></td>
</tr>
<tr>
   <td colspan="12">
      <a href="http://sos-agence.forumactif.org/g6-concepteurs" target="_blank">
         <img id="concepteurs" src="http://img256.imageshack.us/img256/7672/concepteurs.jpg" width="71" height="25" border="0" alt="" /></a></td>

   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="25" alt="" /></td>
</tr>
<tr>
   <td colspan="12" rowspan="2">
      <img id="sos_QEEL_copie_27" src="http://img526.imageshack.us/img526/4206/sosqeelcopie27.jpg" width="71" height="18" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="8" alt="" /></td>
</tr>

<tr>
   <td colspan="2" rowspan="7">
      <div class="connectes"><span id="delf">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"personne dans les couloirs de l'agence");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"personnes dans les couloirs de l'agence");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistré/,"agent");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistrés/,"agents");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisible et/,"espion,");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisibles et /,"espions,");</script>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invité/,"visiteur");</script>.
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invités/,"visiteurs");</script>

<br>

<span id="nounou">{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">document.getElementById('nounou').innerHTML=document.getElementById('nounou').innerHTML.replace(/Utilisateurs enregistrés/,"Voici leurs noms");</script>
</span>

<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
         <script type="text/javascript">
         //<![CDATA[
         insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
         //]]>
         </script>
</div></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="10" alt="" /></td>
</tr>
<tr>
   <td colspan="6" rowspan="2">
      <img id="sos_QEEL_copie_29" src="http://img152.imageshack.us/img152/3959/sosqeelcopie29.jpg" width="13" height="42" alt="" /></td>

   <td colspan="4">
      <a href="http://sos-agence.forumactif.org/g7-codeurs" target="_blank">
         <img id="codeurs" src="http://img413.imageshack.us/img413/9650/codeurs.jpg" width="51" height="24" border="0" alt="" /></a></td>
   <td colspan="2" rowspan="4">
      <img id="sos_QEEL_copie_31" src="http://img525.imageshack.us/img525/866/sosqeelcopie31.jpg" width="7" height="83" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>

   <td colspan="4">
      <img id="sos_QEEL_copie_32" src="http://img407.imageshack.us/img407/1834/sosqeelcopie32.jpg" width="51" height="18" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
   <td colspan="4" rowspan="2">
      <img id="sos_QEEL_copie_33" src="http://img121.imageshack.us/img121/7222/sosqeelcopie33.jpg" width="10" height="41" alt="" /></td>
   <td colspan="6">

      <a href="http://sos-agence.forumactif.org/g8-critiques" target="_blank">
         <img id="critiques" src="http://img809.imageshack.us/img809/2641/critiquesb.jpg" width="54" height="24" border="0" alt="" /></a></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
   <td colspan="6">
      <img id="sos_QEEL_copie_35" src="http://img600.imageshack.us/img600/9599/sosqeelcopie35.jpg" width="54" height="17" alt="" /></td>
   <td>

      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="17" alt="" /></td>
</tr>
<tr>
   <td rowspan="5">
      <img id="sos_QEEL_copie_36" src="http://img407.imageshack.us/img407/3180/sosqeelcopie36.jpg" width="3" height="119" alt="" /></td>
   <td colspan="11">
      <a href="http://sos-agence.forumactif.org/g9-correcteurs" target="_blank">
         <img id="correcteurs" src="http://img835.imageshack.us/img835/1416/correcteurs.jpg" width="68" height="26" border="0" alt="" /></a></td>
   <td>

      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="26" alt="" /></td>
</tr>
<tr>
   <td colspan="11" rowspan="2">
      <img id="sos_QEEL_copie_38" src="http://img535.imageshack.us/img535/3494/sosqeelcopie38.jpg" width="68" height="19" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="16" alt="" /></td>
</tr>
<tr>

   <td colspan="2" rowspan="3">
      <img id="sos_QEEL_copie_39" src="http://img834.imageshack.us/img834/3401/sosqeelcopie39.jpg" width="236" height="77" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
   <td colspan="4" rowspan="2">
      <img id="sos_QEEL_copie_40" src="http://img200.imageshack.us/img200/4298/sosqeelcopie40.jpg" width="9" height="74" alt="" /></td>
   <td colspan="4">

      <a href="http://sos-agence.forumactif.org/g10-agents" target="_blank">
         <img id="agents" src="http://img40.imageshack.us/img40/1568/agentsq.jpg" width="48" height="22" border="0" alt="" /></a></td>
   <td colspan="3" rowspan="2">
      <img id="sos_QEEL_copie_42" src="http://img4.imageshack.us/img4/945/sosqeelcopie42.jpg" width="11" height="74" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
   <td colspan="4">

      <img id="sos_QEEL_copie_43" src="http://img403.imageshack.us/img403/5838/sosqeelcopie43.jpg" width="48" height="52" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="52" alt="" /></td>
</tr>
<tr>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="65" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="2" height="1" alt="" /></td>

   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="234" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="224" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="3" height="1" alt="" /></td>
   <td>

      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="5" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="2" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="1" alt="" /></td>

   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="7" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="32" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="8" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="4" height="1" alt="" /></td>
   <td>

      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="6" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="1" height="1" alt="" /></td>
   <td>
      <img src="http://img5.imageshack.us/img5/940/spacertc.gif" width="55" height="1" alt="" /></td>
   <td></td>
</tr>
</table>
</div>

<tr>
   <td class="row1">
      <span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
         
         <div id="chatbox_popup"></div>
         <script type="text/javascript">
         //<![CDATA[
         insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
         //]]>
         </script>
         
      </span>
   </td>
</tr>

</table>

{CHATBOX_BOTTOM}
<br clear="all" />

<table border="0" cellspacing="3" cellpadding="0" align="center">
<tr>
   <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
   <td><span class="gensmall">{L_NEW_POSTS}</span></td>
   <td></td>
   <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
   <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
   <td>  </td>
   <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
   <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
</tr>
</table>


{AUTO_DST}


<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
status: true,
cookie: true,
xfbml: true
});
//]]>
</script>

Je n'ai pas trouvé le problème, j'espère que quelqu'un le trouvera xD Merci d'avance Razz

Sujet: Re: Créer une PA réactive / mapping Lun 24 Jan 2011, 20:45

Bonjour, cela faisait longtemps que je cherchais un tel tuto et je suis bien contente de l'avoir trouvé ici.

Tout était à peu près clair, sauf quelques petits problèmes :
_ je n'ai pas eu lors de l'enregistrement de mes images le truc space machin, j'ai pris le lien qui a été donné ici dans le tuto puisqu'apparemment, cela n'est pas si important mais bon...

_ Je n'arrive pas à coder pour la partie html/css sur ma map.

L'image est bonne (je suppose, j'ai pas de décalage) mais je n'arrive pas à mettre la zone de texte changeable dans mon code sans déformer, sans compter la feuille css où visiblement, cela ne marchait pas.... bref : Où j'intègre dans mon grand code ma zone de texte "news" (entre quoi et quoi, et ce que je dois supprimer) et quel code css je rajoute dans ma feuille?

(je préfère le redemander parce que je pense avoir fait une mauvaise manœuvre ou mal saisie ce qui a été dit dans le tutoral)

Voici mon code entier :

Spoiler:

Code:: <html>
<head>
<title>accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="800" height="800" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="5"><img src="http://img339.imageshack.us/img339/3303/accueil01.gif" width="799" height="287" alt=""></td>
<td><img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="287" alt=""></td></tr>
<tr><td colspan="5"><img src="http://img29.imageshack.us/img29/3007/accueil02.gif" width="799" height="2" alt=""></td>
<td><img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="2" alt=""></td></tr>
<tr><td><img src="http://img209.imageshack.us/img209/2659/accueil03.gif" width="303" height="199" alt=""></td>
<td colspan="3" rowspan="2"><img src="http://img337.imageshack.us/img337/1848/accueil04.gif" width="481" height="208" alt=""></td>
<td rowspan="4"><img src="http://img684.imageshack.us/img684/2882/accueil05.gif" width="15" height="511" alt=""></td>
<td><img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="199" alt=""></td></tr>
<tr><td rowspan="3"><img src="http://img254.imageshack.us/img254/6616/accueil06.gif" width="303" height="312" alt="" USEMAP="#accueil principal"></td>
<td><img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="9" alt=""></td></tr><tr>
<td rowspan="2"><img src="http://img214.imageshack.us/img214/8473/accueil07.gif" width="3" height="303" alt=""></td>
<td><img src="http://img11.imageshack.us/img11/8412/accueil08.gif" width="474" height="287" alt="" USEMAP="#topsite"></td>
<td rowspan="2"><img src="http://img233.imageshack.us/img233/6629/accueil09.gif" width="4" height="303" alt=""></td><td><img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="287" alt=""></td></tr>
<tr><td><img src="http://img251.imageshack.us/img251/4474/accueil10.gif" width="474" height="16" alt=""></td>
<td><img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="16" alt=""></td></tr>

</table>
<MAP NAME="accueil principal">
<AREA SHAPE="rect" ALT="Règlement" COORDS="64,22,189,65" HREF="http://les4royaumes.forumperso.com/t10-les-preceptes-du-forum">
<AREA SHAPE="rect" ALT="histoire" COORDS="65,70,188,107" HREF="http://les4royaumes.forumperso.com/t54-histoire-d-istheria">
<AREA SHAPE="rect" ALT="contexte" COORDS="68,113,189,152" HREF="http://les4royaumes.forumperso.com/t55-contexte-actuel">
<AREA SHAPE="rect" ALT="persos" COORDS="9,157,244,194" HREF="http://les4royaumes.forumperso.com/f6-personnages-predefinis">
<AREA SHAPE="rect" ALT="questions " COORDS="65,204,194,237" HREF="http://les4royaumes.forumperso.com/f30-questions-suggestions">
<AREA SHAPE="rect" ALT="staff" COORDS="89,248,169,280" HREF="http://les4royaumes.forumperso.com/t11-les-membres-du-staff">
</MAP>

<MAP NAME="topsite">
<AREA SHAPE="rect" ALT="1" COORDS="122,155,169,203" HREF="http://www.root-top.com/topsite/forumrpg/in.php?IDmark=4715">
<AREA SHAPE="rect" ALT="2" COORDS="185,153,231,200" HREF="http://www.root-top.com/topsite/odealavie/in.php?IDmark=563">
<AREA SHAPE="rect" ALT="3" COORDS="246,153,291,199" HREF="http://www.root-top.com/topsite/vampie/in.php?IDmark=853">
<AREA SHAPE="rect" ALT="4" COORDS="303,154,349,199" HREF="http://www.root-top.com/topsite/megane_angel/in.php?IDmark=373">
<AREA SHAPE="rect" ALT="5" COORDS="363,154,411,198" HREF="http://www.root-top.com/topsite/lilie/in.php?IDmark=5869">
<AREA SHAPE="rect" ALT="6" COORDS="159,205,209,253" HREF="http://www.root-top.com/topsite/velusia/in.php?IDmark=4153">
<AREA SHAPE="rect" ALT="7" COORDS="225,208,271,251" HREF="http://www.root-top.com/topsite/dracos/in.php?IDmark=15">
<AREA SHAPE="rect" ALT="8" COORDS="285,206,329,250 " HREF="http://www.root-top.com/topsite/virtu4lgames/in.php?IDmark=1865">
<AREA SHAPE="rect" ALT="9" COORDS="344,207,389,252 " HREF="http://www.root-top.com/topsite/moonlighttoprpg/in.php?IDmark=2328">
</MAP>

</body>
</html>

L'image où je souhaite placer mon texte est "accueil-4"

Voici l'aperçu de ma map pour la vue d'ensemble sur mon forum :
http://test-graph-calli.forumactif.org/

Le code d'origine :

Spoiler:

Code:: <html>
<head>
<title>accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="800" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td colspan="5">
      <img src="BrowserPreview_01.gif" width="799" height="287" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="287" alt=""></td>
</tr>
<tr>
   <td colspan="5">
      <img src="BrowserPreview_02.gif" width="799" height="2" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
   <td>
      <img src="BrowserPreview_03.gif" width="303" height="199" alt=""></td>
   <td colspan="3" rowspan="2">
      <img src="BrowserPreview_04.gif" width="481" height="208" alt=""></td>
   <td rowspan="4">
      <img src="BrowserPreview_05.gif" width="15" height="511" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="199" alt=""></td>
</tr>
<tr>
   <td rowspan="3">
      <img src="BrowserPreview_06.gif" width="303" height="312" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
   <td rowspan="2">
      <img src="BrowserPreview_07.gif" width="3" height="303" alt=""></td>
   <td>
      <img src="BrowserPreview_08.gif" width="474" height="287" alt=""></td>
   <td rowspan="2">
      <img src="BrowserPreview_09.gif" width="4" height="303" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="287" alt=""></td>
</tr>
<tr>
   <td>
      <img src="BrowserPreview_10.gif" width="474" height="16" alt=""></td>
   <td>
      <img src="spacer.gif" width="1" height="16" alt=""></td>
</tr>
</table>

</body>
</html>

Voilà, j'espère que j'ai rien oublié!! loool

Merci à la personne qui pourra éclairée mes lanternes!

Sujet: Re: Créer une PA réactive / mapping Sam 29 Jan 2011, 12:17

Bonjour à vous deux!

Tout d'abord, Tarsicius, j'avoue ne pas pouvoir trop t'aider ^^" Il s'agit ici d'un QEEL, non d'une PA. N'étant pas vraiment calée en templates, je préfère ne pas m'y aventurer. Cependant, vu la situation, si le qeel marche sur un forum et pas sur l'autre, alors il y a un problème de templates sur l'autre forum. As-tu essayé de copier/coller le template entier sur l'autre forum?

Pour Sighild, si tu n'arrive pas à ajouter du texte sur ton image, c'est parce qu'il faut placer ton image dans ton css et placer ton texte dans le html. Je ne vois pas de css ici, il faut que tu me le montre, sinon je ne pourrais pas t'aider. Pour cela, tu peux copier/coller ce que j'ai fais avec mes propres images, en remplaçant les données par les tiennes. Si tu veux une autre version de l'explication, réfère toi à la page précédente, nep-thune avait trouvé son erreur et a réexpliqué la technique.

@ Ketsia: De rien et merci à toi! ^o^

Re bonjour!!

Alors, je reviens parce que la partie changeable avec la feuille css ne fonctionne toujours pas dans mon cas. L'image de fond n'apparaît, et le texte donc ne fait pas joli. Je suppose que cela vient de ma feuille css.

J'ai refait totalement ma page (parce que je voulais l'améliorer et je me suis dit que peut-être j'avais zappé quelque chose... mais finalement..)

Voici ce que j'obtiens visuellement :

Spoiler:

Donc, on voit bien que je n'ai pas le fond qui apparaît.

Voici donc la partie css qui doit correspondre à cette zone :

Spoiler:

voici le code entier de ma fiche :

Spoiler:

Code:: <html>
<head>
<title>Sans titre 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tableau_01" width="800" height="801" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td colspan="17">
      <img src="http://img4.hostingpics.net/pics/978486Sanstitre101.gif" width="799" height="289" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="289" alt=""></td>
</tr>
<tr>
   <td rowspan="13">
      <img src="http://img4.hostingpics.net/pics/256396Sanstitre102.gif" width="212" height="511" alt="" USEMAP="#Navigation"></td>
   <td colspan="15">
      <div class="News">CSSActif, dans sa 4ième version, vous en met plein les yeux
      avec une mise en page unique qui témoigne de la puissance du codage CSS & HTML
      et de son utilisation sur Forumactif. Le forum met à votre disposition une grande variété
      de tutoriaux, codes et ressources qui vous permettrons de découvrir ce merveilleux univers,
      comme il a toujours su le faire avec fierté. Nos codeurs, modérateurs et animateurs sauront,
      chacun à leur manière, rendre votre expérience sur CSSActif des plus agréable.<
      br><br>Orange & Snipe_SCK, Admins</div></td>
   <td rowspan="13">
      <img src="http://img4.hostingpics.net/pics/264151Sanstitre104.gif" width="189" height="511" alt="" USEMAP="#topsites"></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="198" alt=""></td>
</tr>
<tr>
   <td colspan="15">
      <img src="http://img4.hostingpics.net/pics/736835Sanstitre105.gif" width="398" height="80" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
   <td colspan="6">
      <img src="http://img4.hostingpics.net/pics/547712Sanstitre106.gif" width="162" height="1" alt=""></td>
   <td colspan="3" rowspan="3">
      <img src="http://img4.hostingpics.net/pics/334958Sanstitre107.gif" width="81" height="81" alt=""></td>
   <td colspan="6">
      <img src="http://img4.hostingpics.net/pics/540126Sanstitre108.gif" width="155" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
   <td colspan="2" rowspan="5">
      <img src="http://img4.hostingpics.net/pics/162762Sanstitre109.gif" width="67" height="95" alt=""></td>
   <td colspan="3" rowspan="3">
      <img src="http://img4.hostingpics.net/pics/119036Sanstitre110.gif" width="81" height="81" alt=""></td>
   <td rowspan="4">
      <img src="http://img4.hostingpics.net/pics/663758Sanstitre111.gif" width="14" height="94" alt=""></td>
   <td rowspan="4">
      <img src="http://img4.hostingpics.net/pics/258418Sanstitre112.gif" width="14" height="94" alt=""></td>
   <td colspan="3">
      <img src="http://img4.hostingpics.net/pics/726022Sanstitre113.gif" width="81" height="79" alt=""></td>
   <td colspan="2" rowspan="6">
      <img src="http://img4.hostingpics.net/pics/244324Sanstitre114.gif" width="60" height="96" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="79" alt=""></td>
</tr>
<tr>
   <td colspan="3" rowspan="3">
      <img src="http://img4.hostingpics.net/pics/562478Sanstitre115.gif" width="81" height="15" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
   <td colspan="3" rowspan="2">
      <img src="http://img4.hostingpics.net/pics/706780Sanstitre116.gif" width="81" height="14" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
   <td colspan="3">
      <img src="http://img4.hostingpics.net/pics/778979Sanstitre117.gif" width="81" height="13" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
   <td colspan="2">
      <img src="http://img4.hostingpics.net/pics/958366Sanstitre118.gif" width="45" height="1" alt=""></td>
   <td colspan="3" rowspan="3">
      <img src="http://img4.hostingpics.net/pics/361375Sanstitre119.gif" width="81" height="81" alt=""></td>
   <td rowspan="6">
      <img src="http://img4.hostingpics.net/pics/117314Sanstitre120.gif" width="14" height="138" alt=""></td>
   <td colspan="3" rowspan="3">
      <img src="http://img4.hostingpics.net/pics/298023Sanstitre121.gif" width="81" height="81" alt=""></td>
   <td colspan="2" rowspan="2">
      <img src="http://img4.hostingpics.net/pics/539023Sanstitre122.gif" width="50" height="2" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
   <td rowspan="5">
      <img src="http://img4.hostingpics.net/pics/661425Sanstitre123.gif" width="17" height="137" alt=""></td>
   <td colspan="2" rowspan="3">
      <img src="http://img4.hostingpics.net/pics/201769Sanstitre124.gif" width="80" height="81" alt=""></td>
   <td rowspan="5">
      <img src="http://img4.hostingpics.net/pics/819467Sanstitre125.gif" width="15" height="137" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
   <td rowspan="4">
      <img src="http://img4.hostingpics.net/pics/853022Sanstitre126.gif" width="13" height="136" alt=""></td>
   <td colspan="2" rowspan="3">
      <img src="http://img4.hostingpics.net/pics/529883Sanstitre127.gif" width="81" height="81" alt=""></td>
   <td rowspan="4">
      <img src="http://img4.hostingpics.net/pics/927850Sanstitre128.gif" width="16" height="136" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="79" alt=""></td>
</tr>
<tr>
   <td colspan="3" rowspan="3">
      <img src="http://img4.hostingpics.net/pics/695487Sanstitre129.gif" width="81" height="57" alt=""></td>
   <td colspan="3" rowspan="3">
      <img src="http://img4.hostingpics.net/pics/630133Sanstitre130.gif" width="81" height="57" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
   <td colspan="2" rowspan="2">
      <img src="http://img4.hostingpics.net/pics/500297Sanstitre131.gif" width="80" height="56" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
   <td colspan="2">
      <img src="http://img4.hostingpics.net/pics/929514Sanstitre132.gif" width="81" height="55" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="1" height="55" alt=""></td>
</tr>
<tr>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="212" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="17" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="50" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="30" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="15" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="36" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="14" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="31" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="14" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="36" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="14" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="31" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="13" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="37" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="44" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="16" height="1" alt=""></td>
   <td>
      <img src="http://i36.servimg.com/u/f36/11/36/78/50/spacer10.gif" width="189" height="1" alt=""></td>
   <td></td>
</tr>
</table>

<MAP NAME="navigation">
<AREA SHAPE="rect" ALT="règlement" COORDS="56,15,149,44" HREF="http://les4royaumes.forumperso.com/t10-les-preceptes-du-forum">
<AREA SHAPE="rect" ALT="histoire" COORDS="64,52,142,78" HREF="http://les4royaumes.forumperso.com/t54-histoire-d-istheria">
<AREA SHAPE="rect" ALT="contexte" COORDS="60,84,145,110" HREF="http://http://les4royaumes.forumperso.com/t55-contexte-actuel">
<AREA SHAPE="rect" ALT="persos vacants" COORDS="11,117,192,147" HREF="http://les4royaumes.forumperso.com/f6-personnages-predefinis">
<AREA SHAPE="rect" ALT="questions" COORDS="56,152,149,179" HREF="http://les4royaumes.forumperso.com/f30-questions-suggestions">
<AREA SHAPE="rect" ALT="staff" COORDS="75,187,130,215" HREF="http://les4royaumes.forumperso.com/t11-les-membres-du-staff">
</MAP>

<MAP NAME="topsites">
<AREA SHAPE="rect" ALT="1" COORDS="17,22,65,67" HREF="http://www.root-top.com/topsite/forumrpg/in.php?IDmark=4715">
<AREA SHAPE="rect" ALT="2" COORDS="73,24,121,69" HREF="http://www.root-top.com/topsite/odealavie/in.php?IDmark=563">
<AREA SHAPE="rect" ALT="3" COORDS="128,24,176,69" HREF="http://www.root-top.com/topsite/vampie/in.php?IDmark=853">
<AREA SHAPE="rect" ALT="4" COORDS="19,70,67,115" HREF="http://www.root-top.com/topsite/megane_angel/in.php?IDmark=373">
<AREA SHAPE="rect" ALT="5" COORDS="75,72,123,117" HREF="http://www.root-top.com/topsite/lilie/in.php?IDmark=5869">
<AREA SHAPE="rect" ALT="6" COORDS="131,71,179,116" HREF="http://www.root-top.com/topsite/velusia/in.php?IDmark=4153">
<AREA SHAPE="rect" ALT="7" COORDS="17,122,65,167" HREF="http://www.root-top.com/topsite/dracos/in.php?IDmark=15">
<AREA SHAPE="rect" ALT="8" COORDS="72,123,120,168" HREF="http://www.root-top.com/topsite/virtu4lgames/in.php?IDmark=1865">
<AREA SHAPE="rect" ALT="9" COORDS="129,123,177,168" HREF="http://www.root-top.com/topsite/moonlighttoprpg/in.php?IDmark=2328">
</MAP>


</body>
</html>

Voilà, j'arrive pas à voir ce qui cloche.

Merci d'avance si vous pouvez m'éclairer.

ps: J'ai trouvé mon erreur, c'était un tout petit rien. Cela venait de mon css où il manquait un point au tout début du texte. ^^

Bonjour. Pour ce qui est des infobulles pour une MAP, est-ce possible ? J'utilise Photofiltre donc pour moi il est assez compliqué de ne pas savoir faire avec Photoshop, de plus des explications pour inclure les infobulles ne sont pas mises, pourrais-je avoir des renseignements ?

Mitsu > C'est tout à fait possible d'incorporer des infobulles. & pour PhotoShop tu peux utiliser un version d'essai ! Wink

Pour ma part je viens d'essayer le tuto et ça marche tout à fait & il n'est pas si long que ça étant donné que on peut sauter l'étape 2 qui ne sert qu'à mettre des liens pour cliquer directement sur l'image ! Smile

De plus moi aussi je n'ai pas eu l'image spacer quand j'ai enregistré alors merci de l'avoir rajouté en citation Wink

Créer une PA réactive / mapping

Créer une PA réactive / mapping

Sujets similaires

Sujets similaires

Partenaires Or