Problème avec un code permettant d'afficher du texte en survolant une image

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec un code permettant d'afficher du texte en survolant une image

Message par Keyes le Jeu 26 Aoû 2010 - 17:50

Bonjour,

J'ai essayé de mettre du texte en survolant une image comme il est expliqué dans ce sujet mais cependant je n'arrive pas à mettre quatre images à la suite et lorsque que l'on survole une image, celle-ci ce place au dessus de l'autre et on voit la seconde en fond, comme sur cette image.

Voila le code que j'utilise pour les images :

Code:
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><div class="lock">
  <img src="http://a.imageshack.us/img823/412/accueilkeyesv2.jpg">
  <div class="lock-hidden">
      Keyes<br>
      <img src="http://a.imageshack.us/img841/1706/192j.jpg"><br>
      Fondateur forum
  </div>
</div>
<div class="lock">
  <img src="http://a.imageshack.us/img837/5492/accueilquentzv2.jpg">
  <div class="lock-hidden">
      Quentz<br>
      <img src="http://a.imageshack.us/img827/4592/accueilquentz2.jpg"><br>
      Webmaster Aj
  </div>
</div>
<div class="lock">
  <img src="http://a.imageshack.us/img829/1669/accueildeklinv2.jpg">
  <div class="lock-hidden">
      Deklin<br>
      <img src="http://a.imageshack.us/img844/7727/deklinaccueil2.jpg"><br>
      Archiviste</div>
</div><br>
<div class="lock">
  <img src="http://a.imageshack.us/img192/1604/accueilmortonv2.jpg">
  <div class="lock-hidden">
      Morton<br>
      <img src="http://a.imageshack.us/img823/5411/mortonaccueil2.jpg"><br>
      Archiviste</div>
</div><br></span><span class="genmed"><span class="postbody"></span></span></td>

S'il est nécessaire à la personne qui va m'aider d'avoir tout le code, merci de me le dire.

Je remercie d'avance toutes les personnes qui tenteront de m'aider. Wink


Dernière édition par Keyes le Lun 30 Aoû 2010 - 17:42, édité 1 fois

Keyes
*****

Masculin
Messages : 766
Inscrit(e) le : 26/03/2007

http://archivesjedi.forumactif.fr
Keyes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Keyes le Ven 27 Aoû 2010 - 17:59

Up

Keyes
*****

Masculin
Messages : 766
Inscrit(e) le : 26/03/2007

http://archivesjedi.forumactif.fr
Keyes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Lixyr le Ven 27 Aoû 2010 - 19:25

Bonjour, essaie ce code :

Code:

<table>
  <tr>
      <td class="row3" colspan="1" rowspan="1" align="center">

<div class="lock">
  <img src="http://a.imageshack.us/img823/412/accueilkeyesv2.jpg">
  <div class="lock-hidden">
      Keyes<br>
      <img src="http://a.imageshack.us/img841/1706/192j.jpg"><br>
      Fondateur forum
  </div>
</div>
      </td>

        <td class="row3" colspan="1" rowspan="1" align="center">

<div class="lock">
  <img src="http://a.imageshack.us/img837/5492/accueilquentzv2.jpg">
  <div class="lock-hidden">
      Quentz<br>
      <img src="http://a.imageshack.us/img827/4592/accueilquentz2.jpg"><br>
      Webmaster Aj
  </div>
</div>
      </td>

  <td class="row3" colspan="1" rowspan="1" align="center">

<div class="lock">
  <img src="http://a.imageshack.us/img829/1669/accueildeklinv2.jpg">
  <div class="lock-hidden">
      Deklin<br>
      <img src="http://a.imageshack.us/img844/7727/deklinaccueil2.jpg"><br>
      Archiviste
</div>
</div>
</td>

  <td class="row3" colspan="1" rowspan="1" align="center">

<div class="lock">
  <img src="http://a.imageshack.us/img192/1604/accueilmortonv2.jpg">
  <div class="lock-hidden">
      Morton<br>
      <img src="http://a.imageshack.us/img823/5411/mortonaccueil2.jpg"><br>
      Archiviste
</div>
</div>
</td>

  </tr>
</table>


info : je n'ai pas mis tes <span></span>, je ne sais pas ce que tu veux faire avec, comme je t'ai rajouté des colonnes, tu les placeras où tu voudras.

Bon, ensuite, dis-moi si mon code fonctionne ou pas. Tu dois placer ça dans un tableau à plusieurs cellules, et non pas mettre tous les <div> à la fois dans la même cellule. Une cellule par image que tu vas rendre réactive.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5646
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Keyes le Sam 28 Aoû 2010 - 10:56

Bonjour,

Merci de m'avoir répondu Wink

J'ai testé votre code qui marche mais le problème de l'image (celui-ci) est toujours présent. Vous pouvez le voir en accédant à la page d'accueil du forum qui est dans mon profil.

Quant aux <span>, ne connaissant quasiment rien au html, j'ai tout reprit du topic que j'ai signalé dans le premier message. Donc je n'ai pas de raisons particulières de l'avoir pris ^^ si ce n'est qu'il était avec le reste, donc pourquoi pas. Smile

Voila code entier du tableau avec le code que vous m'avez donné :

Code:
<span class="genmed"><span class="postbody"></span><table class="forumline table1 bg3" cellspacing="1" width="100%"><tbody><tr><th colspan="1" rowspan="1" class="thTop forabg" width="28%">News</th><th colspan="1" rowspan="1" class="thTop forabg" width="43%">Bienvenue {USERNAME} !<br></th><th colspan="1" rowspan="1" class="thTop forabg" width="29%">Le staff<br></th>
</tr>



<tr><td class="row3" colspan="1" rowspan="1" align="center" valign="top">La V3 du site est prête et en ligne !<br><br>Le forum redémarre !<br><br>Nous sommes à la recherche de personne qualifiées.<br></td>


<td class="row3" colspan="1" rowspan="1" align="center">Bienvenue sur Archives Jedi, ce site est consacré à l'univers de Star
Wars.<br><br>Vous
trouverez sur le site de nombreuses images car Archives Jedi est la première bibliothèque d'images sur Star Wars francophone.<br><br>Le staff vous souhaite de passe une bonne visite sur Archives Jedi Site et Forum<br></td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">    <table>
      <tbody><tr>
          <td class="row3" colspan="1" rowspan="1" align="center">

    <div class="lock">
      <img src="http://a.imageshack.us/img823/412/accueilkeyesv2.jpg">
      <div class="lock-hidden">
          Keyes<br>
          <img src="http://a.imageshack.us/img841/1706/192j.jpg"><br>
          Fondateur forum
      </div>
    </div>
          </td>

            <td class="row3" colspan="1" rowspan="1" align="center">

    <div class="lock">
      <img src="http://a.imageshack.us/img837/5492/accueilquentzv2.jpg">
      <div class="lock-hidden">
          Quentz<br>
          <img src="http://a.imageshack.us/img827/4592/accueilquentz2.jpg"><br>
          Webmaster Aj
      </div>
    </div>
          </td>

      <td class="row3" colspan="1" rowspan="1" align="center">

    <div class="lock">
      <img src="http://a.imageshack.us/img829/1669/accueildeklinv2.jpg">
      <div class="lock-hidden">
          Deklin<br>
          <img src="http://a.imageshack.us/img844/7727/deklinaccueil2.jpg"><br>
          Archiviste
    </div>
    </div>
    </td>

      <td class="row3" colspan="1" rowspan="1" align="center">

    <div class="lock">
      <img src="http://a.imageshack.us/img192/1604/accueilmortonv2.jpg">
      <div class="lock-hidden">
          Morton<br>
          <img src="http://a.imageshack.us/img823/5411/mortonaccueil2.jpg"><br>
          Archiviste
    </div>
    </div>
    </td>

      </tr>
    </tbody></table>
<br></span><span class="genmed"><span class="postbody"></span></span></td>

</tr><tr><th class="thTop forabg" colspan="1" rowspan="1">Top sites<br></th>
<th class="thTop forabg" colspan="1" rowspan="1">Contexte RPG<br></th><th class="thTop forabg" colspan="1" rowspan="1">Nous recherchons<br></th></tr>

<tr><td class="row3" colspan="1" rowspan="1" align="center"><font class="ecxnormal"><font style="background-color: rgb(255, 248, 201);"><a href="http://www.root-top.com/topsite/anakin/in.php?ID=289" class="postlink" target="_blank"> <img src="http://img.root-top.com/topsite/anakin/banner.gif" alt="" border="0"></a><br><br><a href="http://www.starwars-universe.com/hyperespace/starwarstop/voter.php?lien_id=1062"><img src="http://a.imageshack.us/img831/9131/logostarwarstop.gif"></a>&nbsp;<br></font></font><br><a href="http://www.anakinworld.com/top-vote.html?id=198" onclick="win=window.open(this.href, '_blank'); if(win) return false;"><img src="http://www.anakinworld.com/picture/logo_top.jpg" alt="Votez pour ce site au Top Anakinworld" style="border: medium none; width: 100px; height: 36px;"></a><span class="postbody">
</span></td>

<td class="row3" colspan="1" rowspan="1" align="center">5000 ans avant le premier film Star Wars et l’avènement de l’Empire
Galactique par Palpatine, la galaxie est dans une ère de paix. L’Ordre
Jedi ne cesse d’augmenter son importance et garantit apparemment la paix
 dans la galaxie. L’Ordre Sith, quand à lui, commence à revenir dans les
 esprits de nombreuses personnes, ses membres commençants à représenter
une menace.<br><br>La République permet la création de nouvelles voies de commerces et de bonnes relations diplomatiques entre de nombreux mondes.<br><br>Malheureusement,
 l’attaque de forces mandaloriennes sur la planète Yola et la capture de
 celle-ci oblige les différentes factions de la galaxie à se préparer au
 combat devant la nouvelle menace des mandaloriens.<br><br><br>Le sort de la Galaxie est entre vos mains, quel camp choisirez-vous ?</td>

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">Nous sommes à la recherche de :<br><br>- 2 Archivistes pour le site<br><br>- D'une équipe complète pour le RPG (2 Maîtres du Jeu, 1 chef de faction pour toutes les factions disponibles, 1 Mj spécialisé économie et un autre pour la cartographie.)<br></span></td>
</tr></tbody></table></span>

Merci d'avance !
Keyes

Keyes
*****

Masculin
Messages : 766
Inscrit(e) le : 26/03/2007

http://archivesjedi.forumactif.fr
Keyes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Lixyr le Sam 28 Aoû 2010 - 22:49

T'as quoi comme code css ?

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5646
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Keyes le Dim 29 Aoû 2010 - 10:35

J'ai prit pour css celui qui était dans ce sujet.

Code:
.lock  {
  position: relative;
  cursor: pointer;
}
.lock .lock-hidden {
  /* positionnement du bloc qui apparait */
  display: none;
  position: absolute;
  top: 10px;
  left: 5px;
 
  /* style du bloc qui apparait */
  border: 2px solid black;
  border-radius: 5px;
  background-color: white;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  text-align: center;
}
.lock:hover .lock-hidden {
  display: block;
}

Keyes
*****

Masculin
Messages : 766
Inscrit(e) le : 26/03/2007

http://archivesjedi.forumactif.fr
Keyes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Keyes le Lun 30 Aoû 2010 - 10:46

Up

Keyes
*****

Masculin
Messages : 766
Inscrit(e) le : 26/03/2007

http://archivesjedi.forumactif.fr
Keyes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Lixyr le Lun 30 Aoû 2010 - 14:13

En fait, ton problème, c'est que l'image qui apparait passe en dessous de l'image qui est à côté ? C'est bien ça ?

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5646
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Keyes le Lun 30 Aoû 2010 - 16:00

Oui, c'est ça :


Keyes
*****

Masculin
Messages : 766
Inscrit(e) le : 26/03/2007

http://archivesjedi.forumactif.fr
Keyes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par jaimelsvt le Lun 30 Aoû 2010 - 16:26

Bonjour

Dsl mais je voudrai faire pareil mais je ne comprend pas ou mettre l'adresse de l'image et ou mettre le texte
Merci beaucoup!!!!

jaimelsvt
****

Masculin
Messages : 307
Inscrit(e) le : 27/06/2010

http://bloodwaya.jtkc.org/
jaimelsvt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Lixyr le Lun 30 Aoû 2010 - 16:34

jaimelsvt, le code que tu dois mettre dans ta page :


Code:
<table>
  <tr>
      <td>

<div class="lock">
  <img src="L'ADRESSE DE L'IMAGE QUE TU VAS SURVOLER" />
  <div class="lock-hidden">
      TON TEXTE<br />
      <img src="L'ADRESSE DE L'IMAGE QUI APPARAIT" /><br />
      AUTRE TEXTE
  </div>
</div>

      </td>
      <td>
<div class="lock">
  <img src="L'ADRESSE DE L'IMAGE QUE TU VAS SURVOLER" />
  <div class="lock-hidden">
      TON TEXTE<br />
      <img src="L'ADRESSE DE L'IMAGE QUI APPARAIT" /><br />
      AUTRE TEXTE
      </td>
  </tr>
</table>


Et bien, Keyes, j'avais le même problème que toi et comme j'ai eu aucune solution, j'ai chercher autrement. J'ai place mon image de façon à ce qu'elle apparaisse plus à gauche, ou qu'elle apparaisse en dessous des images de départ. Comme ça pas de mauvais chevauchement, car ce bug ne se crée qu'à droite, si tu as testé.

Et je ne connais pas de code pour remédier à cela, bien que j'ai cherché.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5646
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par jaimelsvt le Lun 30 Aoû 2010 - 16:39

Merci beaucoup!!!!!!!

jaimelsvt
****

Masculin
Messages : 307
Inscrit(e) le : 27/06/2010

http://bloodwaya.jtkc.org/
jaimelsvt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Keyes le Lun 30 Aoû 2010 - 16:44

D'accord pour ta réponse Lyxir.

Tu pourrais me donner à code pour que l'image apparaisse en dessous et non à côté ?

Merci d'avance

Keyes
*****

Masculin
Messages : 766
Inscrit(e) le : 26/03/2007

http://archivesjedi.forumactif.fr
Keyes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Lixyr le Lun 30 Aoû 2010 - 17:22

Dans le code css qui va avec :

Code:
.lock  {
  position: relative;
  cursor: pointer;
}
.lock .lock-hidden {
  /* positionnement du bloc qui apparait */
  display: none;
  position: absolute;
  top: 10px;
  left: 5px;
 
  /* style du bloc qui apparait */
  border: 2px solid blue;
  border-radius: 5px;
  background-color: red;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  text-align: center;
}
.lock:hover .lock-hidden {
  display: block;
}

tu changes
Code:
  top: 10px;
  left: 5px;

Pour ma part c'est à
Code:
top: 52px;
left: 0px;

Plus tu augmentes le top et plus c'est bas, donc éloigné du haut, et plus tu augments le left, plus c'est éloigné du bord gauche.
Tu peux mettre
Code:
right: 1px;
si ça t'arranges.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5646
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un code permettant d'afficher du texte en survolant une image

Message par Keyes le Lun 30 Aoû 2010 - 17:42

D'accord, merci de cette réponse et merci pour tout Wink

Problème résolu.

Keyes
*****

Masculin
Messages : 766
Inscrit(e) le : 26/03/2007

http://archivesjedi.forumactif.fr
Keyes a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum