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://loups-garous.bb-fr.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 102



C'est chouette si tu as réussi toute seule! Very Happy Par ailleurs, le "spacer.gif" est bel et bien dans les étapes du tuto ^^" Tu as du lire trop vite car:

Spoiler:
 

Pourtant, j'ai vu que tu avais mis un lien sur ces spacer, ça me semblait bizarre aussi
:cyclops:
MessageSujet: Re: Créer une PA réactive / mapping   Jeu 05 Aoû 2010, 18:59
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



Non mais j'avais les lignes de spacer à la fin comme toi, et d'autre entre les lignes du code ... Et je les avais bêtement supprimées >.<

Oui !! J'ai tout affiché sur mon forum : Http://b-days.keuf.net je trouve que ça fait un super rendu alors encore un grand merci à toi pour ton tuto <3 Depuis le temps que je voulais savoir comment faire une PA réactive ^^ Merciii =)
MessageSujet: Re: Créer une PA réactive / mapping   Ven 06 Aoû 2010, 08:07
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://maid.forumactif.fr
avatar
{ Membre }
{ Membre }

Féminin Messages : 7



Merci beaucoup pour ce tuto, c'est du beau travail \o/
MessageSujet: Re: Créer une PA réactive / mapping   Ven 06 Aoû 2010, 09:05
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



Bien joué Mina, ça rend bien! Very Happy

Il faudrait que je précise que les "spacer" peuvent: soit ne pas apparaître, soit n'être qu'à la fin, ou soit être après certaines images et à la fin. De ce côté là, il faut juste faire attention et bien vérifier son code ^^

Merci Mariabelle Very Happy si un jour tu le fais, tu sais où trouver de l'aide Wink
MessageSujet: Re: Créer une PA réactive / mapping   Dim 08 Aoû 2010, 21:03
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



Oui, je pense que ce serait utile de préciser, ça t'éviterait de te retrouver plusieurs fois avec des membres qui ont mon problème Very Happy. En tout cas merci pour le rendu *-*
MessageSujet: Re: Créer une PA réactive / mapping   Mar 10 Aoû 2010, 14:56
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://testeur-beta.forumactif.com/
avatar
{ Membre actif }
{ Membre actif }

Masculin Messages : 1002



Salut et SUPERRRR tuto!!! J'ai eu un petit souci comme "Kheira" : j'ai pas eu de spacer.gif. Mais comme tu as donner l'image j'ai réussi et le résulta et super 100 000 000 fois merci

MessageSujet: Re: Créer une PA réactive / mapping   Sam 14 Aoû 2010, 15:32
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://theoutcastchronicles.forumactif.com/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 17



Au secours ! *rires*

J'ai suivi les instructions de Jill à la lettre et tout se déroule nickel (merci à elle, d'ailleurs, très bien fait, même moi, une véritable daube en codage, je me trouve avec un résultat fort satisfaisant !). J'ai réussi à faire le mapping impeccable.

Mais le problème, c'est que je ne parviens pas faire entrer un texte dans la boîte "Intrigue" et "Dernières Informations". Quand j'essaie de mettre du texte selon les instructions de Jill, toutes les images se désolidarisent, du gris apparait et ça fait légèrement... Moche.

http://testgraph.max2forum.com/index.htm (sans les textes)

Voici mon code :

Code:
<html>
<head>
<title>Fond Mapping</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">
<!-- ImageReady Slices (Fond Mapping.bmp) -->
<table id="Tableau_01" width="1201" height="800" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td colspan="4">
         <img src="http://img825.imageshack.us/img825/6291/fondmapping01.gif" width="1200" height="121" alt=""></td>
      <td>
         <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="121" alt=""></td>
   </tr>
   <tr>
      <td rowspan="4">
         <img src="http://img202.imageshack.us/img202/4346/fondmapping02.gif" width="347" height="481" alt="" USEMAP="#annonce"></td>
      <td colspan="3">
         <img src="http://img837.imageshack.us/img837/7072/fondmapping03.gif" width="853" height="65" alt=""></td>
      <td>
         <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="65" alt=""></td>
   </tr>
   <tr>
      <td rowspan="5">
         <img src="http://img409.imageshack.us/img409/9821/fondmapping04.gif" width="160" height="614" alt=""></td>
      <td>
         <img src="http://img838.imageshack.us/img838/896/fondmapping05.gif" width="551" height="281" alt=""></td>
      <td rowspan="5">
         <img src="http://img409.imageshack.us/img409/9383/fondmapping06.gif" width="142" height="614" alt=""></td>
      <td>
         <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="281" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="http://img829.imageshack.us/img829/9705/fondmapping07.gif" width="551" height="114" alt=""></td>
      <td>
         <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="114" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="http://img830.imageshack.us/img830/88/fondmapping08.gif" width="551" height="192" alt=""></td>
      <td>
         <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="21" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="http://img821.imageshack.us/img821/2481/fondmapping09.gif" width="347" height="198" alt=""></td>
      <td>
         <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="171" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="http://img823.imageshack.us/img823/9968/fondmapping10.gif" width="551" height="27" alt=""></td>
      <td>
         <img src="http://img686.imageshack.us/img686/3852/spacerel.gif" width="1" height="27" alt=""></td>
   </tr>
</table>
<MAP NAME="annonce">
<AREA SHAPE="rect" ALT="Règlement" COORDS="33,43,283,110" HREF="http://lenvoldelaigle.forumactif.com/reglement-f1/">
<AREA SHAPE="rect" ALT="Contexte" COORDS="47,144,221,211
" HREF="http://lenvoldelaigle.forumactif.com/contexte-f3/">
<AREA SHAPE="rect" ALT="Présentation" COORDS="48,247,292,314" HREF="http://lenvoldelaigle.forumactif.com/bureau-de-recensement-f5/">
<AREA SHAPE="rect" ALT="Annonce" COORDS="44,357,252,424" HREF="http://"http://lenvoldelaigle.forumactif.com/annonces-f4/>
</MAP>

<!-- End ImageReady Slices -->
</body>
</html>

Et rien là dessus au niveau de ma CSS.
J'aimerai rajouter du texte dans la cinquième tranche (fondmapping5) et dans la huitième (fondmapping8). Quelqu'un pourrait m'expliquer où est mon erreur? J'ai déjà recommencé mon codage 3 fois...

Et j'aurais également une autre question. J'aimerais réduire la taille de l'image. Y a-t-il un code spécifique pour cela, ou dois-je tout redimensionner et recoder?

Merci d'avance.

EDIT : huhu j'avais oublié la map ^^". <== Boulette.
MessageSujet: Re: Créer une PA réactive / mapping   Dim 22 Aoû 2010, 10:10
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



@ Dylan: Merci beaucoup! Very Happy Heureuse d'avoir pu t'aider!

@ Alejandro: Je vais me pencher sur ton problème ^^

Tout d'abord, pour réduire ton mapping, il faut tout redimensionner (et donc, ne pas oublier de changer les tailles des images dans ton code; ou bien reprendre depuis photoshop qui redonnera le code directement (je pense que le plus simple reste la 2nde solution)

Sinon, pour ton mapping, je veux bien t'aider, mais tu préfère que je t'explique tout sur celui là, ou j'attends que tu es redimensionné les images?

En attendant, si tu n'as pas de css, le texte aura des problèmes d'affichage ^^" Je peux te réepliquer, si tu veux Wink
MessageSujet: Re: Créer une PA réactive / mapping   Dim 22 Aoû 2010, 17:05
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://theoutcastchronicles.forumactif.com/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 17



D'accord pour la redimension =). Je termine de créer les classes sociales de mon forum et je fais ça. Dans la foulée, je rehost et recode ^^".

Merci infiniment de te pencher sur mon problème !
MessageSujet: Re: Créer une PA réactive / mapping   Dim 22 Aoû 2010, 17:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://theoutcastchronicles.forumactif.com/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 17



Youpi, ça marche, voici mon nouveau code !

Code:
<html>
<head>
<title>Fond Mapping</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">
<!-- ImageReady Slices (Fond Mapping.bmp) -->
<table id="Tableau_01" width="801" height="533" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td colspan="4">
         <img src="http://img844.imageshack.us/img844/6291/fondmapping01.gif" width="800" height="80" alt=""></td>
      <td>
         <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="80" alt=""></td>
   </tr>
   <tr>
      <td rowspan="4">
         <img src="http://img826.imageshack.us/img826/4549/fondmapping02.png" width="232" height="322" alt=""USEMAP="#annonce"></td>
      <td colspan="3">
         <img src="http://img838.imageshack.us/img838/7072/fondmapping03.gif" width="568" height="43" alt=""></td>
      <td>
         <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="43" alt=""></td>
   </tr>
   <tr>
      <td rowspan="5">
         <img src="http://img834.imageshack.us/img834/9821/fondmapping04.gif" width="106" height="410" alt=""></td>
      <td>
         <img src="http://img827.imageshack.us/img827/896/fondmapping05.gif" width="368" height="189" alt=""></td>
      <td rowspan="5">
         <img src="http://img695.imageshack.us/img695/9383/fondmapping06.gif" width="94" height="410" alt=""></td>
      <td>
         <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="189" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="http://img816.imageshack.us/img816/9705/fondmapping07.gif" width="368" height="75" alt=""></td>
      <td>
         <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="75" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="http://img836.imageshack.us/img836/88/fondmapping08.gif" width="368" height="129" alt=""></td>
      <td>
         <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="15" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="http://img163.imageshack.us/img163/2481/fondmapping09.gif" width="232" height="131" alt=""></td>
      <td>
         <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="114" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="http://img839.imageshack.us/img839/9968/fondmapping10.gif" width="368" height="17" alt=""></td>
      <td>
         <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="17" alt=""></td>
   </tr>
</table>
<MAP NAME="annonce">
<AREA SHAPE="rect" ALT="Règlement" COORDS="28,35,186,76" HREF="http://lenvoldelaigle.forumactif.com/reglement-f1/">
<AREA SHAPE="rect" ALT="Contexte" COORDS="26,103,151,144
" HREF="http://lenvoldelaigle.forumactif.com/contexte-f3/">
<AREA SHAPE="rect" ALT="Présentation" COORDS="28,171,194,212
" HREF="http://lenvoldelaigle.forumactif.com/bureau-de-recensement-f5/">
<AREA SHAPE="rect" ALT="Annonce" COORDS="22,242,188,283" HREF="http://"http://lenvoldelaigle.forumactif.com/annonces-f4/>
</MAP>
<!-- End ImageReady Slices -->
</body>
</html>
MessageSujet: Re: Créer une PA réactive / mapping   Dim 22 Aoû 2010, 17:32
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



Cowl ! Very Happy

Alors, pourrais tu me donner ton code de base aussi (le même que celui-ci mais non rempli) et si tu as, ton css.

Je vais vérifier que ça marche avant de t'expliquer, je n'ai pas envie de t'induire en erreur x)

En tout cas, bien joué, la map, elle, fonctionne parfaitement! ^^
MessageSujet: Re: Créer une PA réactive / mapping   Lun 23 Aoû 2010, 11:25
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://theoutcastchronicles.forumactif.com/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 17



Est-ce ceci que tu nommes "code de base"?

Code:
<html>
<head>
<title>Fond Mapping</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">
<!-- ImageReady Slices (Fond Mapping.bmp) -->
<table id="Tableau_01" width="801" height="533" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td colspan="4">
         <img src="Fond-Mapping_01.gif" width="800" height="80" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="80" alt=""></td>
   </tr>
   <tr>
      <td rowspan="4">
         <img src="Fond-Mapping_02.gif" width="232" height="322" alt=""></td>
      <td colspan="3">
         <img src="Fond-Mapping_03.gif" width="568" height="43" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="43" alt=""></td>
   </tr>
   <tr>
      <td rowspan="5">
         <img src="Fond-Mapping_04.gif" width="106" height="410" alt=""></td>
      <td>
         <img src="Fond-Mapping_05.gif" width="368" height="189" alt=""></td>
      <td rowspan="5">
         <img src="Fond-Mapping_06.gif" width="94" height="410" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="189" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="Fond-Mapping_07.gif" width="368" height="75" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="75" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="Fond-Mapping_08.gif" width="368" height="129" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="15" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="Fond-Mapping_09.gif" width="232" height="131" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="114" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="Fond-Mapping_10.gif" width="368" height="17" alt=""></td>
      <td>
         <img src="spacer.gif" width="1" height="17" alt=""></td>
   </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Et pour la CSS, la voici :

Code:
body {
margin : 0px;
background-repeat: no-repeat;
background-position: center;
}

 a.forumlink {
text-decoration: none;
background-color: #black;
border-bottom: 2px double #gold;
border-top: 2px double #gold;
-moz-border-radius: 10px ;
border-right: 5px solid #black;
-moz-border-radius: 10px ;
border-left: 5px solid #black;
display:block;
font-variant: small-caps ;
font-family: georgia;
text-transform : uppercase;
text-align: center;
}

a {
text-align: justify;}

Rien de spécifique à la PA :-/.
MessageSujet: Re: Créer une PA réactive / mapping   Lun 23 Aoû 2010, 11: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



Coucou! Désolée du retard ^^"

Alors, oui, c'était bien le code de base, et je n'en ai pas eu besoin tout compte fait Wink J'ai réglé ton problème assez facilement puisque tu n'avais pas de css. Pour que le mapping marche entièrement, il faut faire et le html et le css, sinon, rien n'est aligné comme il faut =) Même si on croit que le html donne la base, c'est faux. Il faut obligatoirement rajouter le css en même temps. (je ne cesserai jamais de le répéter xD)

Voila le css: (auquel tu pourras rajouter des caractéristiques sans problème, notamment pour la structure de tes textes, c'est la base de chez base que je te donne ^^)

Code:
.intrigue
{
background-image: url("http://img827.imageshack.us/img827/896/fondmapping05.gif");
background: no repeat;
width: 368px;
height: 189px;
overflow: auto;

}

.annonce
{
background-image: url("http://img836.imageshack.us/img836/88/fondmapping08.gif");
background: no repeat;
width: 368px;
height: 129px;
overflow: auto;
}

Et le html: (qui ne change qu'au niveau des tranches 5 et 8 en fait: Là où il y a "bla bla bla", tu y mets le texte que tu veux, et tu lui donne un style avec le css)

Code:
<html>
<head>
<title>Fond Mapping</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">
<!-- ImageReady Slices (Fond Mapping.bmp) -->
<table id="Tableau_01" width="801" height="533" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td colspan="4">
        <img src="http://img844.imageshack.us/img844/6291/fondmapping01.gif" width="800" height="80" alt=""></td>
      <td>
        <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="80" alt=""></td>
  </tr>
  <tr>
      <td rowspan="4">
        <img src="http://img826.imageshack.us/img826/4549/fondmapping02.png" width="232" height="322" alt=""USEMAP="#annonce"></td>
      <td colspan="3">
        <img src="http://img838.imageshack.us/img838/7072/fondmapping03.gif" width="568" height="43" alt=""></td>
      <td>
        <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="43" alt=""></td>
  </tr>
  <tr>
      <td rowspan="5">
        <img src="http://img834.imageshack.us/img834/9821/fondmapping04.gif" width="106" height="410" alt=""></td>
      <td>
        <div class="intrigue">bla bla bla</div></td>
      <td rowspan="5">
        <img src="http://img695.imageshack.us/img695/9383/fondmapping06.gif" width="94" height="410" alt=""></td>
      <td>
        <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="189" alt=""></td>
  </tr>
  <tr>
      <td>
        <img src="http://img816.imageshack.us/img816/9705/fondmapping07.gif" width="368" height="75" alt=""></td>
      <td>
        <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="75" alt=""></td>
  </tr>
  <tr>
      <td rowspan="2">
        <div class="annonce">bla bla bla</div></td>
      <td>
        <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="15" alt=""></td>
  </tr>
  <tr>
      <td rowspan="2">
        <img src="http://img163.imageshack.us/img163/2481/fondmapping09.gif" width="232" height="131" alt=""></td>
      <td>
        <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="114" alt=""></td>
  </tr>
  <tr>
      <td>
        <img src="http://img839.imageshack.us/img839/9968/fondmapping10.gif" width="368" height="17" alt=""></td>
      <td>
        <img src="http://img842.imageshack.us/img842/6382/spacernc.gif" width="1" height="17" alt=""></td>
  </tr>
</table>
<MAP NAME="annonce">
<AREA SHAPE="rect" ALT="Règlement" COORDS="28,35,186,76" HREF="http://lenvoldelaigle.forumactif.com/reglement-f1/">
<AREA SHAPE="rect" ALT="Contexte" COORDS="26,103,151,144
" HREF="http://lenvoldelaigle.forumactif.com/contexte-f3/">
<AREA SHAPE="rect" ALT="Présentation" COORDS="28,171,194,212
" HREF="http://lenvoldelaigle.forumactif.com/bureau-de-recensement-f5/">
<AREA SHAPE="rect" ALT="Annonce" COORDS="22,242,188,283" HREF="http://"http://lenvoldelaigle.forumactif.com/annonces-f4/>
</MAP>
<!-- End ImageReady Slices -->
</body>
</html>

voilou Wink

Sinon, j'ai vu que tu as posté puis enlevé ton message Miyu, tu as réussi à résoudre ton problème?
MessageSujet: Re: Créer une PA réactive / mapping   Mer 25 Aoû 2010, 14:57
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://theoutcastchronicles.forumactif.com/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 17



Comme disait le grand Gainsbourg, tu es ma Lady Héroïne. Merci beaucoup. C'est juste magnifique, je vais avoir terminé mon cadeau dans les temps !
MessageSujet: Re: Créer une PA réactive / mapping   Mer 25 Aoû 2010, 18:09
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



Oh Merci Very Happy Et de rien!
Si tu as d'autres problèmes plus tard, n'hésite pas! Wink
MessageSujet: Re: Créer une PA réactive / mapping   Jeu 26 Aoû 2010, 05:53
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hanami.forumactif.com
{ Membre }
{ Membre }

Féminin Messages : 8



Coucou,

Le tutoriel est très bien expliqué, j'ai compris tout de suite ce qui est rare quand je lis un tutoriel.
Seulement comme disait quelqu'un précédemment, moi non plus je n'ai pas eue d'images "Spacer" et mes images se sont enregistrées en .GIF ~

Ensuite, j'ai créée une "boîte" sur mon image que j'aimerai utiliser pour y mettre des informations etc, mais voilà le soucis même si le tutoriel est clair, je n'ai pas compris au niveau du CSS & HTML *est très nulle en codes* ... u_u
Je crois plutôt que je l'ai convertie en lien d'ailleurs !

Et j'ai une petite question (la dernière j'espère !) peut-on ajouter des infobulles ensuite, dans les zones où je pourrais mettre le texte, par exemple ?

Je pense que les questions ont été posées, mais comme ma connexion me fait des caprices, ça lui arrive de pas tout m'afficher (L)... xD
MessageSujet: Re: Créer une PA réactive / mapping   Sam 25 Sep 2010, 10:17
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! Merci pour tes compliments sur mon tuto, j'ai passé pas mal d'heures à la réaliser, donc ça me fait vraiment plaisir Wink

Pour la boite, as-tu rajouté ton image dans le css? (et non dans le html)
Sinon, il me semble qu'il est possible de mettre des infobulles sur du texte, mais je ne suis pas assez calée sur ce sujet là (les infobulles je veux dire :p) pour t'aider ^^" (sauf si je me mets dedans Razz)

Pour les spacer, tu n'es pas forcée d'en avoir en fait (faudrait que je rajoute ça dans le tuto d'ailleurs .__. ) Pour les images en .gif, as tu essayé de les ré-enregistrer?

Sinon, je peux t'aider pour rajouter ta boite, mais il me faudrait ton html, ton css, et ton html "de base" (le code donné par photoshop) et me dire quelles sont les tranches à changer (surtout pour ta boite, et si tu veux d'autres ajouts en même temps)

Voili voilou Wink
MessageSujet: Re: Créer une PA réactive / mapping   Dim 26 Sep 2010, 17:47
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hello-holidays.forumgratuit.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 19



Salut!!
Tout d'abord bravo pour ton super tuto! =D
Moi qui ne suis pas une pro j'ai un peu près tout compris.

Mais j'ai un petit problème, les deux parties où il y a du texte ne sont pas au bon endroit, et je n'arrive pas a comprendre où est l'erreur.
(Lien: http://test-forum94.forumperso.com/index.htm )

Codes HTML:
Spoiler:
 

Codes CSS:
Spoiler:
 

Pourrais-tu m'aider?

Merci d'avance!! =)


Graffitti!
MessageSujet: Re: Créer une PA réactive / mapping   Mar 28 Sep 2010, 14:29
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 d'abord, merci pour tes compliments Very Happy


Pour ton problème, j'ai réussi à trouver pour le placement de tes boites de texte, seulement, il y a encore des espaces non voulu. Du coup, pourrais-tu me donner ton html de base? Celui que te donne photoshop. Que je vérifie par ce biais là, puisque tu as glissés plein de petites erreurs (surement dû à la dernière étape, la plus difficile pour un novice du codage).

Mais ne t'inquiètes pas, je peux te rattraper ça ^___^ Je t'expliquerais ensuite ce que tu n'as pas bien fait, pour que tu ne te fasse pas avoir la prochaine fois Wink
MessageSujet: Re: Créer une PA réactive / mapping   Mar 28 Sep 2010, 16:20
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hello-holidays.forumgratuit.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 19



D'accord, merci! =)

Voilà le code:
Spoiler:
 


Graffitti!
MessageSujet: Re: Créer une PA réactive / mapping   Mer 29 Sep 2010, 03:08
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



Voila ton code réparé :p :

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="640" height="470" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td colspan="3">
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0110.gif" width="209" height="123" alt=""></td>
      <td colspan="2" rowspan="3">
        <img src="http://i52.tinypic.com/atq5n5.gif" width="431" height="345" alt="" USEMAP="#navigation"></td>
  </tr>
  <tr>
      <td rowspan="4">
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0310.gif" width="36" height="346" alt=""></td>
      <td colspan="2">
        <div class="News"><span class="texte">Bribri nous a quittée... et il faut donc un autre guerisseur pour le clan du Soleil.
Un concours est organisé pour le nouveau design' ;) Vous pouvez tous participer ICI
La guerre a enfin éclaté : Clan de la Rivière contre Ténèbres et Tonnerre.
C'est aux arbres =)</span></div></td>
  </tr>
  <tr>
      <td colspan="2">
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0510.gif" width="173" height="98" alt=""></td>
  </tr>
  <tr>
      <td rowspan="2">
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0610.gif" width="10" height="124" alt=""></td>
      <td colspan="2"><div class="Membres"><span class="texte">Bois/Cerise/Jais :
Tu as été très active ces derniers temps. Bravo =)
C. de Panthère/N. d'Aube :
Tu es active, c'est bien... Mais ce serait encore mieux si tu te concentrais un petit peu plus au RPS plutôt qu'au flood.
Bravo quand même =)</span></div>
       </td>
      <td rowspan="2">
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0810.gif" width="360" height="124" alt=""></td>
  </tr>
  <tr>
      <td colspan="2">
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/pa_0910.gif" width="234" height="19" alt=""></td>
  </tr>
  <tr>
      <td>
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="36" height="1" alt=""></td>
      <td>
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="10" height="1" alt=""></td>
      <td>
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="163" height="1" alt=""></td>
      <td>
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="71" height="1" alt=""></td>
      <td>
        <img src="http://i26.servimg.com/u/f26/15/06/92/16/spacer10.gif" width="360" height="1" alt=""></td>
  </tr>
</table>

<MAP NAME="navigation">
<AREA SHAPE="rect" ALT="reglement" COORDS="43,109,154,140" HREF="http://test-forum94.forumperso.com/avant-de-se-presenter-f1/reglement-t1.htm">
<AREA SHAPE="rect" ALT="annonces" COORDS="21,171,122,199" HREF="http://test-forum94.forumperso.com/annonces-f3/">
<AREA SHAPE="rect" ALT="evenements" COORDS="17,235,146,258" HREF="http://test-forum94.forumperso.com/evenements-f4/">
</MAP>

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

Je me doutais que tu t'étais emmêlée les pinceaux avec l'ajout du css/html entre les lignes. Tu as dû faire du copier/coller en trop puisque tes deux boites étaient en double, et tu avais un mapping à 11 tranches plutôt qu'à 9 ^^" Par exemple, tu as mis:

Code:
<td colspan="2">
        <marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115"></td>
       
      <td colspan="2">  <div class="News">Bribri nous a quittée... et il faut donc un autre guerisseur pour le clan du Soleil. Un concours est organisé pour le nouveau design' ;) Vous pouvez tous participer ICI
La guerre a enfin éclaté : Clan de la Rivière contre Ténèbres et Tonnerre.
C'est aux arbres =)
</div></td>
Ta première ligne ne donne aucune indication pour ta tranche, car il n'y a ni image, ni lien, ni classe. Je la balise pour faire défiler ton contenu.. qui n'existe pas! Néanmoins, la ligne est quand même comptée et ça t'a décalé tout ton mapping. Idem avec la deuxième boite Wink

Ensuite, l'autre erreur est celle ci:
Code:
<div class="Membres de la Semaine">
Alors que dans ton css, on a:
Code:
.Membres

Il faut écrire le même mot dans les 2 parties, sinon ça ne marchera pas. Et surtout, pas d'espace dans la "div class". Au pire, mets un "_"

Voili voilou, si jamais tu as d'autres questions n'hésite pas Very Happy
MessageSujet: Re: Créer une PA réactive / mapping   Mer 29 Sep 2010, 15:05
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://angels-house.forum-actif.net/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 82



Bonjour et un grand merci pour ce tutoriel super bien expliqué ! C'est un rêve de graphiste qui se réalise =D

J'ai un petit soucis par contre que je désespère de résoudre (la preuve en IMAGE)

Je n'ai pour l'instant pas réussit à le régler depuis hier soir ! Je n'ai pas encore placé de CSS ou autre puisque je voulais d'abord que le panneau s'agence correctement avec les liens cliquables (qui fonctionnent parfaitement d'ailleurs) avant de mettre mes parties de pur HTML+CSS Cependant je doute que cela change grand chose.
Alors si quelqu'un avait la petite astuce ...

Voici mon code :
Code:
<html>
<head>
<title>panneau non coupé</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">
<!-- ImageReady Slices (panneau non coupé.png) -->
<table id="Table_01" width="801" height="451" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="9">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844052.gif" width="800" height="29" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="29" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844053.gif" width="35" height="211" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844054.png" width="155" height="151" alt="" USEMAP="#navigation"></td>
        <td colspan="2" rowspan="3">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844055.gif" width="373" height="211" alt=""></td>
        <td colspan="4">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844056.gif" width="237" height="134" alt="" USEMAP="#team"></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="134" alt=""></td>
    </tr>
    <tr>
        <td colspan="4" rowspan="2">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248121001816844057.gif" width="237" height="77" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="17" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844058.gif" width="155" height="60" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="60" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844059.gif" width="594" height="38" alt=""></td>
        <td colspan="2">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844060.gif" width="179" height="38" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844061.gif" width="27" height="38" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844062.gif" width="46" height="172" alt=""></td>
        <td colspan="2">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844063.gif" width="222" height="144" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844064.gif" width="362" height="172" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844065.gif" width="170" height="172" alt="" USEMAP="#annexe"></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="144" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844066.gif" width="222" height="28" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="1" height="28" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="35" height="1" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="144" height="1" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="78" height="1" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="295" height="1" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="31" height="1" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="36" height="1" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="143" height="1" alt=""></td>
        <td>
            <img src="http://nsm04.casimages.com/img/2010/09/30//1009301248131001816844067.gif" width="27" height="1" alt=""></td>
        <td></td>
    </tr>
</table>

<MAP NAME="navigation">
<AREA SHAPE="rect" ALT="histoire" COORDS="39,6,138,31" HREF="http://angels-house.forum-actif.net/vieux-grimoire-f1/histoire-t1.htm">
<AREA SHAPE="rect" ALT="regles" COORDS="8,25,96,53" HREF="http://angels-house.forum-actif.net/code-civil-f3/reglement-t29.htm">
<AREA SHAPE="rect" ALT="rangs" COORDS="56,55,132,78" HREF="http://angels-house.forum-actif.net/statut-f4/rangs-disponibles-t1388.htm">
<AREA SHAPE="rect" ALT="fiche" COORDS="12,75,80,97" HREF="http://angels-house.forum-actif.net/modele-de-fiche-f6/fiche-de-personnage-t33.htm">
<AREA SHAPE="rect" ALT="predef" COORDS="38,112,150,142" HREF="http://angels-house.forum-actif.net/les-predefinis-f118/">
</MAP>

<MAP NAME="team">
<AREA SHAPE="rect" ALT="admin" COORDS="12,10,53,101" HREF="http://angels-house.forum-actif.net/profile.forum?mode=viewprofile&u=1">
<AREA SHAPE="rect" ALT="raph" COORDS="71,34,118,118" HREF="http://angels-house.forum-actif.net/profile.forum?mode=viewprofile&u=26">
<AREA SHAPE="rect" ALT="willi" COORDS="129,32,171,116" HREF="http://angels-house.forum-actif.net/profile.forum?mode=viewprofile&u=334">
<AREA SHAPE="rect" ALT="jimi" COORDS="181,34,229,114" HREF="http://angels-house.forum-actif.net/profile.forum?mode=viewprofile&u=130">
</MAP>

<MAP NAME="annexe">
<AREA SHAPE="rect" ALT="strass" COORDS="6,23,165,52" HREF="http://angels-house.forum-actif.net/9734-strass-et-paillettes-9734-f82/">
<AREA SHAPE="rect" ALT="evenement" COORDS="23,53,166,85" HREF="http://angels-house.forum-actif.net/9734-angel-s-diary-9734-f13/">
<AREA SHAPE="rect" ALT="intrigue" COORDS="51,92,148,121" HREF="http://angels-house.forum-actif.net/9734-vieux-grimoire-9734-f1/intrigue-crow-s-flight-t1637.htm">
</MAP>
<!-- End ImageReady Slices -->
</body>
</html>


Merci d'avance pour ton aide !


MessageSujet: Re: Créer une PA réactive / mapping   Jeu 30 Sep 2010, 08:39
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hello-holidays.forumgratuit.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 19



Merci beaucoup Jill!! =D


Graffitti!
MessageSujet: Re: Créer une PA réactive / mapping   Jeu 30 Sep 2010, 12:29
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://angels-house.forum-actif.net/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 82



Juste pour dire que j'ai résolu mon problème en redécoupant tout proprement et tout marche parfaitement !

Merci encore pour ce super tutoriel !


MessageSujet: Re: Créer une PA réactive / mapping   Sam 02 Oct 2010, 10:17
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://graphic-horse.graphforum.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 26



Bonjour,
j'ai un problème avec ma page d'accueil.
Quand je mets mon code HTML, j'enregistre et quand j'arrive à la page d'accueil, tout est désordonné :S
Voilà ce que ça donne:
Spoiler:
 

La voilà découpée:
Spoiler:
 

J'ai pas encore mis le CSS pour m'assurer que ça ressemble déjà à quelque chose (ce qui n'est pas le cas).
Voilà le code HTML:
Spoiler:
 
Aidez moi s'il vous plait, je n'y comprends vraiment rien! D:
Merci d'avance





[absente du 26 au 30 juillet]
MessageSujet: Re: Créer une PA réactive / mapping   Dim 10 Oct 2010, 12:45
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 3 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 | Forum gratuit