C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Créer une PA réactive / mapping

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : Précédent  1, 2, 3, 4, 5  Suivant
Voir le profil de l'utilisateur http://www.kirin-art-school.net
avatar
{ Membre }
{ Membre }

Féminin Messages : 122



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">
<!-- Save for Web Slices (pa.psd) -->
<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>

<!-- End Save for Web Slices -->
</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">
<!-- Save for Web Slices (pa.psd) -->
<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>
<!-- End Save for Web Slices -->
</body>
</html>


Merci d'avance x)
MessageSujet: Re: Créer une PA réactive / mapping   Mer 13 Oct 2010, 14:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://loups-garous.bb-fr.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 102



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>
MessageSujet: Re: Créer une PA réactive / mapping   Ven 15 Oct 2010, 09:59
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://graphic-horse.graphforum.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 26



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">
<!-- Save for Web Slices (ScreenShot018.psd) -->
<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>
<!-- End Save for Web Slices -->
</body>
</html>
           
           




[absente du 26 au 30 juillet]
MessageSujet: Re: Créer une PA réactive / mapping   Ven 15 Oct 2010, 11:45
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.kirin-art-school.net
avatar
{ Membre }
{ Membre }

Féminin Messages : 122



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_ô
MessageSujet: Re: Créer une PA réactive / mapping   Sam 16 Oct 2010, 01:51
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://sushikawai.forumq.biz/forum.htm
{ Membre }
{ Membre }

Féminin Messages : 5



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
MessageSujet: Re: Créer une PA réactive / mapping   Sam 16 Oct 2010, 03:22
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hanami.forumactif.com
{ Membre }
{ Membre }

Féminin Messages : 8



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:
<!-- Save for Web Slices (painteractive.psd) -->
<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>

<!-- End Save for Web Slices -->

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

Mazurka ~
MessageSujet: Re: Créer une PA réactive / mapping   Sam 16 Oct 2010, 18:33
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://gintama.forumactif.com/
{ Membre }
{ Membre }

Masculin Messages : 128



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

MessageSujet: Re: Créer une PA réactive / mapping   Sam 16 Oct 2010, 19:11
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://manga-pub.forums-actifs.net
{ Membre }
{ Membre }

Féminin Messages : 5



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">
<!-- Save for Web Slices (Sans titre 4.bmp) -->
<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 l’Ouken 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 l’Espada 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 d’Ichigo était parti la sauver dans le Hueco Mundo comme Aizen l’avait 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 d’attaquer la fausse Karakura avec le reste de l’Espada. 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>

<!-- End Save for Web Slices -->
</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 ?

MessageSujet: Re: Créer une PA réactive / mapping   Jeu 28 Oct 2010, 09:52
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://maisondanslailleurs.forumcanada.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 10



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!
MessageSujet: Re: Créer une PA réactive / mapping   Ven 29 Oct 2010, 10:45
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Masculin Messages : 22



(Ow, mais qui vois-je =3)


Bonjour, alors déjà merci pour ce tuto que je vais utiliser plein de fois je le sens , 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


/\_/\
(o°.°o)

Love
MessageSujet: Re: Créer une PA réactive / mapping   Jeu 04 Nov 2010, 12:57
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hanami.forumactif.com
{ Membre }
{ Membre }

Féminin Messages : 8



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:
<!-- Save for Web Slices (painteractive.psd) -->
<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>

<!-- End Save for Web Slices -->

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. ^_^
MessageSujet: Re: Créer une PA réactive / mapping   Ven 19 Nov 2010, 14:52
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://liebe-de-th.niceboard.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 74



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
MessageSujet: Re: Créer une PA réactive / mapping   Mer 24 Nov 2010, 14:12
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://tahrehelayktreek.forumactif.org/
{ Membre }
{ Membre }

Féminin Messages : 9



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">
<!-- Save for Web Slices (Map.png) -->
<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>


<!-- End Save for Web Slices -->
</body>
</html>

Mon texte doit se situer sur l'image : http://img4.hostingpics.net/pics/285156Map03gif.gif
et : http://img4.hostingpics.net/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.


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
MessageSujet: Re: Créer une PA réactive / mapping   Dim 05 Déc 2010, 13:42
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://loups-garous.bb-fr.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 102



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
MessageSujet: Re: Créer une PA réactive / mapping   Jeu 30 Déc 2010, 11:57
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lycee28.forumactif.com/index.htm
avatar
{ Membre }
{ Membre }

Masculin Messages : 25



▬ 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 : (http://nsm05.casimages.com/img/2011/01/10/110110071835393807450322.jpg)
Spoiler:
 

▬ Voilà le code de la map :

    La partie 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;
    }

    Et la partie 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>
          
          <!--STAFF-->
          <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>
          <!--STAFF-->
          
          <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>
          <!--RECHERCHE-->
          <td colspan="2" rowspan="2" class="recherche">
             <p>Un administrateur - Des modérateurs<br>et bien sûr des Membres</p></td>
          <!--FIN RECHERCHE-->
             
          <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>
       <!--CONTEXTE-->
          <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>
    <!--FIN CONTEXTE-->

          <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>
       
       <!--AMIS-->
          <td colspan="2" rowspan="2" class="amis">
             images des amis</td>
       <!--FIN AMIS-->
       
       
          <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>
       <!--LIENS-->
          <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>
       <!--FIN LIENS-->
       
          <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>
         <!--NEWS-->
          <td colspan="3" class="news">
             Bonne année 2011 à tous !<br>
             Le forum ouvre ses portes, n'hésitez plus<br>
             à vous inscrire !</td>
         <!--FIN NEWS-->
        
         <!--TOPS-->
          <td colspan="2" class="top">
             images des tops sites</td>
         <!--FIN TOPS-->
        
          <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 ??
MessageSujet: Re: Créer une PA réactive / mapping   Lun 10 Jan 2011, 14:20
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://foliforum.forumgratuit.org/index.htm
avatar
{ Membre }
{ Membre }

Masculin Messages : 34



Merci Beaucoup, pour ce tuto Smile

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



~Scrubs Fan~
MessageSujet: Re: Créer une PA réactive / mapping   Mar 11 Jan 2011, 16:25
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://loups-garous.bb-fr.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 102



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! ^^")
MessageSujet: Re: Créer une PA réactive / mapping   Sam 15 Jan 2011, 18:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lycee28.forumactif.com/index.htm
avatar
{ Membre }
{ Membre }

Masculin Messages : 25



@Jill : Merci beaucoup pour ton aide, ça marche beaucoup mieux maintenant Smile
MessageSujet: Re: Créer une PA réactive / mapping   Dim 16 Jan 2011, 05:29
Revenir en haut Aller en bas
Invité
Invité




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 !!
MessageSujet: Re: Créer une PA réactive / mapping   Jeu 20 Jan 2011, 13:53
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ecritoire.forumactif.fr/
avatar
{ Membre }
{ Membre }

Féminin Messages : 107



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}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <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>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <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>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
         <!-- END switch_delete_cookies -->
         </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>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <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>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <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>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<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>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <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>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<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> &nbsp;</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>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<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>
<!-- END switch_fb_index_login -->

Je n'ai pas trouvé le problème, j'espère que quelqu'un le trouvera xD Merci d'avance Razz
MessageSujet: Re: Créer une PA réactive / mapping   Jeu 20 Jan 2011, 18:06
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://les4royaumes.forumperso.com/index.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 26



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:
 


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:
 




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

Merci à la personne qui pourra éclairée mes lanternes!
MessageSujet: Re: Créer une PA réactive / mapping   Lun 24 Jan 2011, 20:45
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://loups-garous.bb-fr.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 102



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^
MessageSujet: Re: Créer une PA réactive / mapping   Sam 29 Jan 2011, 12:17
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://les4royaumes.forumperso.com/index.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 26



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:
 




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. ^^


Dernière édition par Sighild le Lun 07 Fév 2011, 07:52, édité 1 fois
MessageSujet: Re: Créer une PA réactive / mapping   Mar 01 Fév 2011, 14:35
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 146



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 ?
MessageSujet: Re: Créer une PA réactive / mapping   Mer 02 Fév 2011, 03:34
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://elegance-design.forumactif.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 179



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



MessageSujet: Re: Créer une PA réactive / mapping   Jeu 03 Fév 2011, 11:52
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Créer une PA réactive / mapping   
Revenir en haut Aller en bas
 

Créer une PA réactive / mapping

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 4 sur 5Aller à la page : Précédent  1, 2, 3, 4, 5  Suivant

 Sujets similaires

-
» Créer une PA réactive / mapping
» Bannière réactive ? [Mapping ?]
» Problème avec le tuto "Réaliser une PA réactive MAPPING"
» roll-over, zone réactive, image et son
» Explications sur ACTIVE LOG

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Corbeille :: Archives de CSSActif :: Archives 2009~2011-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forumactif.com