Image avec légende
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
Image avec légende
Bonjour
Je vous explique mon problème. J'ai voulu faire une image avec une légende, qui au passage sur "lire la légende", dévoilait la légende elle même. Sauf, que, quand je l'ai posté, la couleur d'arrière plan a disparu et la bannière aussi.
file:///D:/D%C3%A9mo%206/index.html
Je vous explique mon problème. J'ai voulu faire une image avec une légende, qui au passage sur "lire la légende", dévoilait la légende elle même. Sauf, que, quand je l'ai posté, la couleur d'arrière plan a disparu et la bannière aussi.
file:///D:/D%C3%A9mo%206/index.html
Dernière édition par Kimi Kozuma le Mar 17 Mai 2011 - 20:20, édité 1 fois
Re: Image avec légende
[quote="Kimi Kozuma"]Bonjour
Je vous explique mon problème. J'ai voulu faire une image avec une légende, qui au passage sur "lire la légende", dévoilait la légende elle même. Sauf, que, quand je l'ai posté, la couleur d'arrière plan a disparu et la bannière aussi.
J'aimerais vraiment pouvoir faire mon effet, mais je ne sais pas pourquoi ça me bugue tout u_u
Voici le code du poste:
et le css:
Merci d'avance
Je vous explique mon problème. J'ai voulu faire une image avec une légende, qui au passage sur "lire la légende", dévoilait la légende elle même. Sauf, que, quand je l'ai posté, la couleur d'arrière plan a disparu et la bannière aussi.
J'aimerais vraiment pouvoir faire mon effet, mais je ne sais pas pourquoi ça me bugue tout u_u
Voici le code du poste:
- Code:
<head><link href="css/styles.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div class="legende">
<a href="#"><img src="http://i54.tinypic.com/2ynjuqc.jpg" alt"pv"/>
<span class="bouton">Lire la légende</span>
<span class="description">
<h2>Titre de l'image</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget diam et ipsum viverra tempor in non lacus. Sed dapibus tempor lacus a tempus. Etiam tellus neque, aliquam in fringilla in, sodales sed nulla. Etiam sit amet erat lectus. Integer tincidunt ipsum felis, ac hendrerit elit. Etiam placerat tristique odio, at ultricies lorem viverra quis. Nam a odio nulla. Suspendisse potenti. In quis sodales leo. Sed eget libero vitae mauris porta fringilla vitae vel mi. Nam faucibus interdum tincidunt. Curabitur luctus feugiat rhoncus. Nam luctus commodo dolor sit amet egestas. Phasellus vel nibh est, ut malesuada orci. Donec sed ipsum purus, id malesuada metus. Aliquam vel elit sed risus blandit rutrum et ut justo.</p>
</span>
</a>
</div>
</head>
<body>
</body>
</html>
et le css:
- Code:
@charset "utf-8";
/* CSS Document */
body {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
background-color:#000000;
color:#FFF;
}
.img-legende {
margin: 0;
overflow: hidden;
float: left;
position: relative;
}
.img-legende a {
text-decoration: none;
float: left;
}
.img-legende a:hover {
cursor: pointer;
}
.img-legende a img {
background: #dadada;
border: 2px solid #b5b5b5;
float: left;
margin: 0;
padding: 10px;
}
.img-legende a .bouton {
background:url(../images/bouton.png) 0 0 no-repeat;
width:135px;
height:32px;
position: absolute;
left: 11px;
bottom: 0;
font-size:11px;
color: #8e8e8e;
padding:5px;
}
.img-legende a:hover .bouton {
visibility: hidden;
}
.img-legende a:hover .description{
position: absolute;
bottom: 12px;
left: 12px;
padding: 10px;
margin: 0;
display: block;
background: #dadada;
width: 380px;
border-top: 2px solid #b5b5b5;
}
.img-legende a:hover .description h2{
margin:0;
padding:0;
font-size:14px;
color: #8e8e8e;
}
.img-legende a:hover .description p{
margin:0;
padding:0;
font-size:11px;
color: #8e8e8e;
}
.img-legende a .description {
display: none;
}
Merci d'avance
Re: Image avec légende
Bonjour,
Votre message est considéré comme un UP, hors les UP ne sont autorisés qu'une fois par 24 heures, merci d'utiliser le bouton la prochaine fois!
Où souhaitez vous mettre cette image? Quels tutoriels avez-vous suivi pour réaliser ce code?
Cordialement.
Votre message est considéré comme un UP, hors les UP ne sont autorisés qu'une fois par 24 heures, merci d'utiliser le bouton la prochaine fois!
Où souhaitez vous mettre cette image? Quels tutoriels avez-vous suivi pour réaliser ce code?
Cordialement.
Invité- Invité
Re: Image avec légende
Désolée, je me suis trompé de bouton et j'ai envoyé par erreur.
Sinon, cette image servira pour un message sur le forum et pour le tutoriel, je l'ai trouvé dans un livre qui explique comment faire.
Sinon, cette image servira pour un message sur le forum et pour le tutoriel, je l'ai trouvé dans un livre qui explique comment faire.
Re: Image avec légende
Je vous propose un code, j'espère que j'ai compris ce que vous souhaitez faire.
Dans un tableau, on place l'image et la légende, et sur cette légende on met une infobulle qui s'affiche au passage de la souris.
Le code à mettre dans le message est:
Celui à placer dans la feuille CSS est:
Cordialement.
Dans un tableau, on place l'image et la légende, et sur cette légende on met une infobulle qui s'affiche au passage de la souris.
Le code à mettre dans le message est:
- Code:
<table><tr><td><img src="http://i54.tinypic.com/2ynjuqc.jpg" alt"pv"/>
<div class="infobulle"><div class="bouton">voir la légende</div>
<span><h2>Titre de l'image</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget diam et ipsum viverra tempor in non lacus. Sed dapibus tempor lacus a tempus. Etiam tellus neque, aliquam in fringilla in, sodales sed nulla. Etiam sit amet erat lectus. Integer tincidunt ipsum felis, ac hendrerit elit. Etiam placerat tristique odio, at ultricies lorem viverra quis. Nam a odio nulla. Suspendisse potenti. In quis sodales leo. Sed eget libero vitae mauris porta fringilla vitae vel mi. Nam faucibus interdum tincidunt. Curabitur luctus feugiat rhoncus. Nam luctus commodo dolor sit amet egestas. Phasellus vel nibh est, ut malesuada orci. Donec sed ipsum purus, id malesuada metus. Aliquam vel elit sed risus blandit rutrum et ut justo.</span></div></td></tr></table>
Celui à placer dans la feuille CSS est:
- Code:
.infobulle{position: relative;z-index: 0;}
.infobulle:hover{background-color: transparent;z-index: 50;}
.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
.infobulle span img{padding: 5px;}
.infobulle:hover span{
visibility: visible;
top: 12px;
left: 12px;
width: 300px ;
background: #dadada;
width: 380px;
border-top: 2px solid #b5b5b5;
font-size:11px;
color: #8e8e8e;}
.infobulle span h2{
margin:0;
padding:0;
font-size:14px;
color: #8e8e8e;
}
.bouton {
background:url(../images/bouton.png) 0 0 no-repeat;
width:135px;
height:32px;
font-size:11px;
color: #8e8e8e;
padding:5px;
border: 1px solid black;}
Cordialement.
Invité- Invité
Re: Image avec légende
En fait, je voudrais faire un truc comme ça. Comme dans mon tuto.
Re: Image avec légende
Comme ceci, est-ce mieux?
le message:
Cordialement.
le message:
- Code:
<table style="background: url('http://i54.tinypic.com/2ynjuqc.jpg'); width:500px; height:500px;"><tr><td valign="bottom"><div class="infobulle"><div class="bouton">voir la légende</div><span><h2>Titre de l'image</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget diam et ipsum viverra tempor in non lacus. Sed dapibus tempor lacus a tempus. Etiam tellus neque, aliquam in fringilla in, sodales sed nulla. Etiam sit amet erat lectus. Integer tincidunt ipsum felis, ac hendrerit elit. Etiam placerat tristique odio, at ultricies lorem viverra quis. Nam a odio nulla. Suspendisse potenti. In quis sodales leo. Sed eget libero vitae mauris porta fringilla vitae vel mi. Nam faucibus interdum tincidunt. Curabitur luctus feugiat rhoncus. Nam luctus commodo dolor sit amet egestas. Phasellus vel nibh est, ut malesuada orci. Donec sed ipsum purus, id malesuada metus. Aliquam vel elit sed risus blandit rutrum et ut justo.</span></div></td></tr></table>
- Code:
.infobulle{position: relative;z-index: 0;}
.infobulle:hover{background-color: transparent;z-index: 50;}
.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
.infobulle span img{padding: 5px;}
.infobulle:hover span{
visibility: visible;
bottom: 0px;
left: 1px;
width: 300px ;
background: #dadada;
width: 380px;
border-top: 2px solid #b5b5b5;
font-size:11px;
color: #8e8e8e;}
.bouton {
background:url(../images/bouton.png) 0 0 no-repeat;
width:135px;
height:32px;
font-size:11px;
color: #8e8e8e;
padding:5px;
}
.infobulle span h2{
margin:0;
padding:0;
font-size:14px;
color: #8e8e8e;
}
Cordialement.
Invité- Invité
Re: Image avec légende
C'est parfait !
Merci beaucoup !
Merci beaucoup !
Sujets similaires
» Image pour la légende des groupes
» Problème avec le code de transparence d'image. L'image ne s'affiche pas.
» Problème avec la légende du QEEL
» Cacher une image avec une autre image
» Problème sur PA avec image.
» Problème avec le code de transparence d'image. L'image ne s'affiche pas.
» Problème avec la légende du QEEL
» Cacher une image avec une autre image
» Problème sur PA avec image.
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