Créer une PA réactive / mapping - Page 2 Bouton_activeCréer une PA réactive / mapping - Page 2 Bouton_hoverCréer une PA réactive / mapping - Page 2 Fb-hoverCréer une PA réactive / mapping - Page 2 Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Créer une PA réactive / mapping - Page 2 EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Créer une PA réactive / mapping - Page 2 EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Créer une PA réactive / mapping - Page 2 EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Créer une PA réactive / mapping - Page 2 EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Créer une PA réactive / mapping - Page 2 EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Créer une PA réactive / mapping - Page 2 EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Créer une PA réactive / mapping - Page 2 EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Créer une PA réactive / mapping - Page 2 EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -20%
Drone Dji DJI Mini 4K (EU)
Voir le deal
239 €

CSSActif :: Corbeille :: Archives de CSSActif :: Archives 2009~2011Partagez
 

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
http://kagaminoshougai.com
Taktiik
Taktiik
{ Membre }
{ Membre }

Masculin Messages : 73



Créer une PA réactive / mapping - Page 2 Empty
Hαrιcoow a écrit:
Pour être dans les règles j'aurais préféré que cette demande se fasse dans la section spécialisée (Demande de Codes) et non en plein tutoriel :/ Créer une PA réactive / mapping - Page 2 732153

Désolé je ne savais pas l'ampleur des mes fautes ( Embarassed )

Pourquoi pas continuer par Mp par exemple ?
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 14:46
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
Les commandes par MP sont interdites Wink Et puis tant qu'à faire, autant que ton suivi se fasse en public, si un jour d'autres sont bloqués, ça pourra peut-être les aider Very Happy
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 14:48
Revenir en haut Aller en bas
http://kagaminoshougai.com
Taktiik
Taktiik
{ Membre }
{ Membre }

Masculin Messages : 73



Créer une PA réactive / mapping - Page 2 Empty
Soîte ^^' Merci encore.


Réponse :

- Pour le html/css, tu veux la partie: contexte, nos potes, et les crédits (tu veux y faire défiler quelque chose?)?

La partie contexte marcherais avec le morceau de code css que je t'ai donné plus haut. Ce serait un texte (L'histoire se déroule 20 ans après la mort de Naruto. L'Akatsuki ne donne plus de nouvelle d'elle, les personnages les plus importants sont morts, le monde ninja est dans un versant de son histoire. Viendrez-vous apporter la paix ou la destruction ?) avec une barre de défilement (comme sur le screen mais elle est réduite). Pour Nos potes et Les crédits j'ai tenté de faire un défilement oui. Pour le moment, Rien dans nos potes vu qu'on en a pas (Prend un curly ! *sort*-*entre*) Pour les crédits en 'scroll' : Forum by Le Staff - Design by Kat'z - Codage by Naõ|Naito ~~ Un grand Merci à Jill pour sa précieuse aide ♥️.

- Image réactive (USEMPAP): top sites, navigation, nous lier, être affiché, et les quatres images du haut?

Ouèp, Top sites (pas encore inscrit mais j'arriverais à changer) Navigation évidemment ^^, être affiché - nous lier et les Quatre images aussi.

{Pour les liens ils sont dans les USEMAPS sûrement.}

Merci encore Smile
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 15:00
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
Merki Very Happy (oui, je dis merci à qui me fait coder ce que je sais faire xD)

Dans ce cas, je vais le faire en t'expliquant petit à petit, comme ça, on reste dans le thème x)

Voila la première partie (vu la vitesse, on dirait que j'ai fais ça toute ma vie xD)

Les tranches:
Voila ce que j'ai après avoir tranché ton image: tu peux voir qu'il n'y en a que 12. J'ai minimisé l'espace pour avoir moins de travail au niveau de l'hébergement des images et tout le tintouin ^^
Spoiler:

Fichiers
Voila ainsi ce que j'obtiens en enregistrant mon image (via la fenêtre "enregistrer pour le web") On peut voir que le "spacer" est bien là (et en .gif Razz)
Spoiler:

A la limite, tu peux toujours essayer de le faire après moi si tu veux bien comprendre ^^
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 15:08
Revenir en haut Aller en bas
http://kagaminoshougai.com
Taktiik
Taktiik
{ Membre }
{ Membre }

Masculin Messages : 73



Créer une PA réactive / mapping - Page 2 Empty
Effectivement tu gagnes déjà un maximum de place ^^' (Je suis en même temps Wink)
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 15:18
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
En fait, faire les tranches permet de mieux arranger ta PA. Une fois qu'on a compris comment bien les disposer, ça reste un jeu d'enfant. Il faut juste s'entrainer un peu, rien de bien méchant Wink

Je mets directement le code de base, je ferais les "USEMAP" dans mon prochain post =)

Ensuite, grâce à l'aperçu, je me retrouve avec ce code:

Spoiler:

Je vais donc remplacer tout par mes images en suivant cette logique: rang 1 = img 1 (ou tranche 1), rang 2 = img 2, etc...

Voila ce que j'ai:

Spoiler:

(je ferais le reste plus tard, je vais manger ^^)
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 15:33
Revenir en haut Aller en bas
http://kagaminoshougai.com
Taktiik
Taktiik
{ Membre }
{ Membre }

Masculin Messages : 73



Créer une PA réactive / mapping - Page 2 Empty
Ok, déjà là où j'avais 'foiré' c'était pour les spacer ^^' Pour le moment je te suis encore xD

(Bon app' Wink)
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 15:35
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
Super! ^^ Alors maintenant, on va faire les images réactives. Tu ouvres Photofiltre, et tu ouvres les images où tu veux qu'il y ait des liens: pour moi les img 3, 4, 7, 10
Après tu te réfères au tuto d'Haricoow pour prendre les coordonnées (enfin, vu ton ancien code, je pense que tu avait compris ça, non?)

Du coup, voila les code de map pour chaque:

Code:

<MAP NAME="personnages">
<AREA SHAPE="rect" ALT="" COORDS="0,0,57,102" HREF="http://">
<AREA SHAPE="rect" ALT="" COORDS="82,0,139,102" HREF="http://">
<AREA SHAPE="rect" ALT="" COORDS="163,0,220,102" HREF="http://">
<AREA SHAPE="rect" ALT="" COORDS="247,0,304,102" HREF="http://">
</MAP>


<MAP NAME="topsites">
<AREA SHAPE="rect" ALT="top1" COORDS="201,0,334,59" HREF="http://">
<AREA SHAPE="rect" ALT="top2" COORDS="200,133,333,192" HREF="http://">
</MAP>


<MAP NAME="navigation">
<AREA SHAPE="rect" ALT="règles" COORDS="264,6,358,52" HREF="http://narutosensouv3.forumotion.com/reglements-backgrounds-f2/">
<AREA SHAPE="rect" ALT="présentations" COORDS="183,80,357,134" HREF="http://narutosensouv3.forumotion.com/presentation-de-votre-shinobi-f4/">
<AREA SHAPE="rect" ALT="fiche technique" COORDS="97,156,308,213" HREF="http://narutosensouv3.forumotion.com/fiches-techniques-f32/">
<AREA SHAPE="rect" ALT="Bureau des Admins" COORDS="6,235,254,281" HREF="http://">
</MAP>


<MAP NAME="partenaires">
<AREA SHAPE="rect" ALT="nous lier" COORDS="24,10,108,35" HREF="http://narutosensouv3.forumotion.com/partenariat-f59/nous-lier-t51.htm#59">
<AREA SHAPE="rect" ALT="être affiché?" COORDS="246,9,362,39" HREF="http://narutosensouv3.forumotion.com/partenariat-f59/">
</MAP>

Mais il me manque les liens du "bureau des admins", et des 4 personnages ^^"

Ainsi dans mon code, ça nous fait:

Spoiler:

J'ai ajouté les USEMAP à la fin du code, et j'ai rajouté dans les rangs 3, 4, 7, et 10 ceci:
Code:
USEMAP="#NOM"
Comme ça, les USEMAP sont liées aux liens ^^


Ça va jusqu'ici? Je crois que dans ton premier code, tu as voulu aller trop vite, sans faire les étapes minutieusement. Par exemple, nous avons rajouté les images de ce qui sera pour le html/css, alors que nous devrons les enlever ensuite pour rajouter le texte. Le fait de les mettre peut paraître inutile, mais il vaut mieux y aller petit à petit que de vouloir tout faire d'un coup (c'est vrai que c'est tentant ^^)
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 18:43
Revenir en haut Aller en bas
http://kagaminoshougai.com
Taktiik
Taktiik
{ Membre }
{ Membre }

Masculin Messages : 73



Créer une PA réactive / mapping - Page 2 Empty
Yep pour les liens manquants je pourrais le faire et sur la précipitation je dis pas non What a Face Je me sentais pret du but alors j'ai accélérer ! Sinon pour moi tout est OK Smile
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 18:47
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
Okay cool Very Happy

Ensuite, je rajoute aux rangs où je veux le html/css, le texte donné. Ce, aux rangs 1, 8 et 11

rang 1:
Code:
<td>
         <div class="titre">Contexte</div><br><div class="Contexte">L'histoire se déroule 20 ans après la mort de Naruto. L'Akatsuki ne donne plus de nouvelle d'elle, les personnages les plus importants sont morts, le monde ninja est dans un versant de son histoire. Viendrez-vous apporter la paix ou la destruction ?</div></td>
      <td>

rang 8:
Code:
<td colspan="3">
         <div class="potes"><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>
Bon, bien sûr, j'ai mis le logo de cssactif, mais si tu veux ajouter d'autres logo, tu rajoutes ceci:
Code:
<A class=postlink href="lien du forum" target="_blank"><IMG border="0" alt="" src="img du forum"></A>

rang 11:
Code:
<div class="crédits"><marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115">Forum by Le Staff - Design by Kat'z - Codage by Naõ|Naito ~~ Un grand Merci à Jill pour sa précieuse aide < 3 </div>


Il faut enlever tout ce qu'il y a dans le rang, en copiant le lien de l'image (pour le réutiliser dans le css)

______________________________

Au niveau du css, on a:

Code:
.Contexte
{
  height: 156px ;
  width: 244px ;
  background-image: url("http://i36.servimg.com/u/f36/11/36/78/50/base-i10.png") ;
  text-align: center ;
  overflow: auto ;
  color: #000000;
  font-size:12px;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:3px;
  text-align:center;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  vertical-align:top;
 
}

.potes
{
    height: 57px ;
    width: 426px ;
    background-image: url("http://i36.servimg.com/u/f36/11/36/78/50/base-i17.png") ;
}

.crédits
{
    height: 33px ;
    width: 507px ;
    background-image: url("http://i36.servimg.com/u/f36/11/36/78/50/base-i20.png") ;
}
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 19:29
Revenir en haut Aller en bas
http://kagaminoshougai.com
Taktiik
Taktiik
{ Membre }
{ Membre }

Masculin Messages : 73



Créer une PA réactive / mapping - Page 2 Empty
Yop ! Déjà merci de ta patiente ^^ et si j'ai bien compris donc pour le code final ça donne ça :

Spoiler:
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 19:42
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
Presque, mais tu t'es trompé en rajoutant le html: il faut enlever le

Code:
<img src="http://i36.servimg.com/u/f36/11/36/78/50/base-i20.png" width="507" height="33" alt="">
de chaque ligne où tu en rajoute, puisque l'image de fond sera rajoutée dans le css

Tu as fais comme ça:
Code:

<td colspan="4">
        <img src="http://i36.servimg.com/u/f36/11/36/78/50/base-i20.png" width="507" height="33" alt=""><marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115"><div class="crédits">Forum by Le Staff - Design by Kat'z - Codage by Naõ|Naito ~~ Un grand Merci à Jill pour sa précieuse aide Amour </div></td>

Alors qu'il faut que ce soit comme ça:
Code:

<td colspan="4">
<marquee onmouseover="this.stop();" onmouseout="this.start();" Scrolldelay="115"><div class="crédits">Forum by Le Staff - Design by Kat'z - Codage by Naõ|Naito ~~ Un grand Merci à Jill pour sa précieuse aide Amour </div></td>


Mais, une question me taraude scratch je vois que ton image est très large, mais t'es tu assurée que ton forum permette de la caler sur la PA ?
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 19:54
Revenir en haut Aller en bas
http://kagaminoshougai.com
Taktiik
Taktiik
{ Membre }
{ Membre }

Masculin Messages : 73



Créer une PA réactive / mapping - Page 2 Empty
Ouai j'ai vérifier avant Wink Suis-je si nul éè ? XD

Tukka merci beaucoup je mets la PA et je t'en dis ce qu'il en est Wink
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 20:01
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
Héhé ^^"

Mais je pense qu'il va y avoir un couac quelque part Laughing
Ne serait-ce que les crédits, j'ai zappé que ça allait défiler, donc ça mange dessus é_è (shame on me)

Le truc pour la largeur, c'est qu'une image en un seul bloc ça peut passer, mais pour plusieurs images, je pense qu'elle vont avoir tendance à se décaler. C'est plus simple d'avoir une largeur entre 600 ~ 800 px ^^" pour un mapping
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 20:11
Revenir en haut Aller en bas
http://kagaminoshougai.com
Taktiik
Taktiik
{ Membre }
{ Membre }

Masculin Messages : 73



Créer une PA réactive / mapping - Page 2 Empty
Jill a écrit:
Le truc pour la largeur, c'est qu'une image en un seul bloc ça peut passer, mais pour plusieurs images, je pense qu'elle vont avoir tendance à se décaler. C'est plus simple d'avoir une largeur entre 600 ~ 800 px ^^"

Problème trouvé ^^' toujours cet éparpillement mais les liens sont biens là ! Les crédits j'y suis arrivé Wink Je pense pouvoir recommencer tout seul, merci pour cet aide précieuse !!
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 20:13
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
J'aurais du y penser plus tôt pour la largeur ^^" désolé silent

Du coup, tu va refaire ta PA? (graphiquement parlant)

Pour le reste, si tu as de nouveau un problème, tu sais où t'adresser Wink
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 20:21
Revenir en haut Aller en bas
http://kagaminoshougai.com
Taktiik
Taktiik
{ Membre }
{ Membre }

Masculin Messages : 73



Créer une PA réactive / mapping - Page 2 Empty
No problème Wink C'déjà sympa de t'être occupé de moi. Oui je vais refaire un PA. A mes risques et périls merci de la proposition Smile
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptySam 24 Juil 2010, 20:23
Revenir en haut Aller en bas
http://onemoretime.forumactif.com/forum.htm
Sthyx
Sthyx
{ Membre }
{ Membre }

Féminin Messages : 107



Créer une PA réactive / mapping - Page 2 Empty
Bonsoir !

J'ai débuté votre tuto, tout allait bien jusqu'au moment où j'ai mis du texte. Les images se sont disloquées.

Aperçus :

Page d'accueil :
Spoiler:

Mes tranches :
Spoiler:

Mon code (avec images hébergées) :
Spoiler:

Je navigue sous firefox et je travaille avec photoshop cs4.

Je n'ai pas eu de fichier "spacer" ni dans le dossier ni dans le code. J'ai vérifié d'avoir les même paramètres que dans le tuto, mais rien n'y fait...
HELP T__T
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptyMar 03 Aoû 2010, 18:59
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
Coucou!

Alors, je m'y mets demain promis (il est bien trop tard là xD) Du coup, j'en profite aussi pour te demander de me montrer le code de base (celui que tu as en faisant "aperçu" dans photoshop). Je verrais surement mieux le problème =) Oh et aussi le css tant qu'à faire ^^

C'est vrai que je suis étonnée que tu n'ai pas eu de "spacer" mais t'inquiètes on va faire avec Wink
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptyMar 03 Aoû 2010, 20:23
Revenir en haut Aller en bas
http://onemoretime.forumactif.com/forum.htm
Sthyx
Sthyx
{ Membre }
{ Membre }

Féminin Messages : 107



Créer une PA réactive / mapping - Page 2 Empty
Bonjouur !
Merci de m'aider ^^.

Donc voilà le code que j'ai eu avec aperçu :

Spoiler:

Et mon code css :

Code:
.nouv {
  height: 397px;
  width: 353px;
  background-image: url("http://i33.tinypic.com/xbmg04.jpg");
  font-size: 12px;
  display: block;
}
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptyMer 04 Aoû 2010, 07:34
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
J'ai eu du mal, mais j'ai trouvé! Very Happy En fait, tu as mal rempli ton css pour le widht et le height! Tu t'es emmêlée et tu les a alternés!

Remplace le par ça, et ça ira nickel: (j'ai mis le overflow dans ton css, donc n'oublie pas de l'enlever dans ton html Wink )

Code:
.nouv {
  height: 353px;
  width: 397px;
  background-image: url("http://i33.tinypic.com/xbmg04.jpg");
  font-size: 12px;
  display: block;
  overflow: auto;
}

Enjoy Very Happy
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptyMer 04 Aoû 2010, 12:45
Revenir en haut Aller en bas
http://www.kirin-art-school.net
Mina
Mina
{ Membre }
{ Membre }

Féminin Messages : 122



Créer une PA réactive / mapping - Page 2 Empty
Bonsoir !
Alors, moi j'ai presque réussi. A savoir que je l'ai fait une première fois hier, et je me retrouvais avec les images dans tous les sens .... J'ai refait lentement ce soir et ça marche, sauf que ! Un tout ptit souci d'alignement entre deux tranches ... Sinon tous les liens marchent <3

Aperçu : http://itsumademo.asiat-world.com/

En bas à droite les deux parties de l'acteur (Nishikido Ryo =D) sont décalés, et ya une mini ligne blanche ....

Mon HTML :
Code:
<html>
<head>
<title>PA copie</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 copie.jpg) -->
<table id="Tableau_01" width="751" height="551" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td colspan="6">
         <img src="http://img47.xooimage.com/files/e/4/e/pa-copie_01-1ef7268.png" width="750"

height="68" alt="" USEMAP="#Navigation"></td>
   </tr>
   <tr>
      <td rowspan="3">
         <img src="http://img49.xooimage.com/files/b/4/4/pa-copie_02-1ef7293.png" width="47"

height="236" alt=""></td>
      <td rowspan="3"><div class="News"><DIV style="WIDTH: 200px; HEIGHT: 200px; OVERFLOW: auto"

align=left>20 lignes min.<br>15j pour la fiche<br>~ 50 PV's dispos, privilégiez-les<br><br>Design par Sung Jae Won,

V3 - Nishikido Ryo<br>Contexte &co by Sung Jae Won<br>PV's by Sung Jae Won & Sakamto Keishô<br>CSS/HTML by CSSactif

et leurs membres<br><br>Il vous reste encore 3 JOURS pour vous recenser. Suite à cela, si vous n'avez pas donné

signe de vie votre compte sera supprimé. Les membres qui ne veulent pas jouer sont inutiles.</DIV></div></td>
      <td colspan="4">
         <img src="http://img45.xooimage.com/files/4/4/6/pa-copie_04-1ef72b3.png" width="474"

height="30" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="http://img47.xooimage.com/files/d/1/8/pa-copie_05-1ef72d0.png" width="78"

height="70" alt=""></td>
      <td colspan="2"><div class="partenaires"><marquee onmouseover="this.stop();"

onmouseout="this.start();" Scrolldelay="115">
<A class=postlink href="http://tl-rpg.forumactif.com/" target="_blank"><IMG border="0" alt=""

src="http://img7.hostingpics.net/pics/432042bouton.png"></A></div></td>
      <td>
         <img src="http://img41.xooimage.com/files/b/4/f/pa-copie_07-1ef72f7.png" width="19"

height="70" alt=""></td>
      <td>
         
   </tr>
   <tr>
      <td colspan="2" rowspan="3">
         <img src="http://img43.xooimage.com/files/8/4/e/pa-copie_08-1ef7316.gif" width="334"

height="382" alt=""></td>
      <td colspan="2" rowspan="2">
         <img src="http://img47.xooimage.com/files/d/5/a/pa-copie_09-1ef732e.gif" width="140"

height="188" alt="" USEMAP="#Tops"></td>
      
   </tr>
   <tr>
      <td colspan="2" rowspan="2">
         <img src="http://img45.xooimage.com/files/e/7/4/pa-copie_10-1ef7351.gif" width="276"

height="246" alt=""></td>
      
   </tr>
   <tr>
      <td colspan="2">
         <img src="http://img45.xooimage.com/files/f/9/e/pa-copie_11-1ef736a.gif" width="140"

height="194" alt=""></td>
      
   </tr>
   <tr>
      <td>
         <img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="47" height="1"

alt=""></td>
      <td>
         <img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="229" height="1"

alt=""></td>
      <td>
         <img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="78" height="1"

alt=""></td>
      <td>
         <img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="256" height="1"

alt=""></td>
      <td>
         <img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="121" height="1"

alt=""></td>
      <td>
         <img src="http://img1.xooimage.com/files/d/f/3/_-2f2a.gif" width="19" height="1"

alt=""></td>
      <td></td>
   </tr>
</table>

<MAP NAME="Navigation">
<AREA SHAPE="rect" ALT="Règlement" COORDS="24,11,135,51" HREF="http://b-days.keuf.net/regles-contexte-f2/reglement

-t1.htm">
<AREA SHAPE="rect" ALT="Contexte" COORDS="153,12,256,48" HREF="http://b-days.keuf.net/regles-contexte-f2/contexte-

t2.htm">
<AREA SHAPE="rect" ALT="Prédéfinis" COORDS="275,11,374,51" HREF="http://b-days.keuf.net/predefinis-f8/">
<AREA SHAPE="rect" ALT="Partenariat" COORDS="393,9,515,53" HREF="http://b-days.keuf.net/partenariat-f5/">
<AREA SHAPE="rect" ALT="Identité" COORDS="538,10,622,56" HREF="http://b-days.keuf.net/casting-identite-f7/">
<AREA SHAPE="rect" ALT="Invités" COORDS="647,10,729,55" HREF="http://b-days.keuf.net/suggestions-co-f6/">
</MAP>

<MAP NAME="Tops">
<AREA SHAPE="rect" ALT="Top1" COORDS="17,40,100,81" HREF="http://www.root-top.com/topsite/eri/in.php?ID=64">
<AREA SHAPE="rect" ALT="Top2" COORDS="24,75,114,117" HREF="http://www.root-top.com/topsite/lawliet/in.php?ID=139">
<AREA SHAPE="rect" ALT="Top3" COORDS="5,105,90,150" HREF="http://www.root-top.com/topsite/blueye/in.php?ID=2181">
</MAP>

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

Mon CSS :
Code:
.News
{
  height: 200px;
  width: 200px;
  background-image: url("http://img46.xooimage.com/files/2/f/c/pa_04-1eefeb1.gif");
  text-align: justify;
  font-size: 11px;
  Font-family: Arial;
  padding: 10px;
}

.partenaires
{
    height: 36px;
    width: 300px;
    background-image: url("http://img48.xooimage.com/files/e/a/d/pa_07-1eefed5.gif");
padding: 10px;
}

Voili voilou, si ya besoin d'autre chose ...

En tout cas superbe tuto très bien expliqué ! Pas dur mais juste long et minutieux (comme tu dis la moindre erreur est fatale ><) Merci beaucoup Jill !!
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptyMer 04 Aoû 2010, 18:15
Revenir en haut Aller en bas
http://onemoretime.forumactif.com/forum.htm
Sthyx
Sthyx
{ Membre }
{ Membre }

Féminin Messages : 107



Créer une PA réactive / mapping - Page 2 Empty
Han purée, la boulette XD !!

Merci Jill, ça marche parfaitement ♥
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptyJeu 05 Aoû 2010, 06:26
Revenir en haut Aller en bas
http://loups-garous.bb-fr.com/
Jill
Jill
{ Membre }
{ Membre }

Féminin Messages : 102



Créer une PA réactive / mapping - Page 2 Empty
@ Sthyx: De rien Wink Ca me fait plaisir de voir que des gens essaient le tuto ^^

@ Mina: Merci du compliment! Very Happy
Sinon pour ton mapping, il me aussi faudrait le code de base et si tu as: un aperçu des tranches (je peux faire sans, mais si tu l'as, ce serait plus simple ^^)

Il n'y a pas que deux tranches qui sont décalées, elles le sont toutes ^^' Mais ça ne se voit pas forcément avec ta couleur de fond.
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptyJeu 05 Aoû 2010, 11:09
Revenir en haut Aller en bas
http://www.kirin-art-school.net
Mina
Mina
{ Membre }
{ Membre }

Féminin Messages : 122



Créer une PA réactive / mapping - Page 2 Empty
Je crois bien que je viens de trouver toute seule !
En effet quand j'avais fait "enregistrer pour le Web", bah j'avais des "spacer.gif" un peu partout dans mon code et comme toi tu n'en avais pas, je les ai bêtement supprimés XD

Donc dès que tu m'as demandé mon code de base j'ai voulu essayer de tout remettre et ça marche ! =)

Merci beaucoup à toi !

Résultat opérationnel : http://itsumademo.asiatworld.com
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 EmptyJeu 05 Aoû 2010, 14:23
Revenir en haut Aller en bas
Contenu sponsorisé




Créer une PA réactive / mapping - Page 2 Empty
MessageSujet: Re: Créer une PA réactive / mapping   Créer une PA réactive / mapping - Page 2 Empty
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 2 sur 5Aller à la page : Précédent  1, 2, 3, 4, 5  Suivant

 Sujets similaires

-
» Bannière réactive ? [Mapping ?]
» Problème avec le tuto "Réaliser une PA réactive MAPPING"
» Créer une Image Réactive
» Image Réactive (messages)
» Mapping (PA) problème de tableau.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Corbeille :: Archives de CSSActif :: Archives 2009~2011-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

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 | Signaler un abus | Cookies | Forum gratuit