Problème avec un code permettant d'afficher du texte en survolant une image
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème avec un code permettant d'afficher du texte en survolant une image
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 :
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.
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.
Dernière édition par Keyes le Lun 30 Aoû 2010 - 17:42, édité 1 fois
Re: Problème avec un code permettant d'afficher du texte en survolant une image
Bonjour, essaie ce code :
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.
- 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.
Re: Problème avec un code permettant d'afficher du texte en survolant une image
Bonjour,
Merci de m'avoir répondu
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.
Voila code entier du tableau avec le code que vous m'avez donné :
Merci d'avance !
Keyes
Merci de m'avoir répondu
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.
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> <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
Re: Problème avec un code permettant d'afficher du texte en survolant une image
T'as quoi comme code css ?
Re: Problème avec un code permettant d'afficher du texte en survolant une image
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;
}
Re: Problème avec un code permettant d'afficher du texte en survolant une image
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 ?
Re: Problème avec un code permettant d'afficher du texte en survolant une image
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!!!!
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!!!!
Re: Problème avec un code permettant d'afficher du texte en survolant une image
jaimelsvt, le code que tu dois mettre dans ta page :
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é.
- 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é.
Re: Problème avec un code permettant d'afficher du texte en survolant une image
Merci beaucoup!!!!!!!
Re: Problème avec un code permettant d'afficher du texte en survolant une image
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
Tu pourrais me donner à code pour que l'image apparaisse en dessous et non à côté ?
Merci d'avance
Re: Problème avec un code permettant d'afficher du texte en survolant une image
Dans le code css qui va avec :
tu changes
Pour ma part c'est à
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:
.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;
Re: Problème avec un code permettant d'afficher du texte en survolant une image
D'accord, merci de cette réponse et merci pour tout
Problème résolu.
Problème résolu.
Sujets similaires
» Problème code - Texte sur une image réactive
» Problème avec le code de transparence d'image. L'image ne s'affiche pas.
» Problème avec un code pour image.
» Problème avec un code pour une image
» Problème avec code image reactive
» Problème avec le code de transparence d'image. L'image ne s'affiche pas.
» Problème avec un code pour image.
» Problème avec un code pour une image
» Problème avec code image reactive
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum