Image avec légende

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

Résolu Image avec légende

Message par Kimi Kozuma Mar 17 Mai 2011 - 17:40

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


Dernière édition par Kimi Kozuma le Mar 17 Mai 2011 - 20:20, édité 1 fois
avatar

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

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

Résolu Re: Image avec légende

Message par Kimi Kozuma Mar 17 Mai 2011 - 17:42

[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:
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;
}
J'espère que quelqu'un pourra m'apporter de l'aide

Merci d'avance
avatar

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

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

Résolu Re: Image avec légende

Message par Invité Mar 17 Mai 2011 - 18:00

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 :editer: la prochaine fois!

Où souhaitez vous mettre cette image? Quels tutoriels avez-vous suivi pour réaliser ce code?

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec légende

Message par Kimi Kozuma Mar 17 Mai 2011 - 18:12

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.
avatar

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

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

Résolu Re: Image avec légende

Message par Invité Mar 17 Mai 2011 - 18:55

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:
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;}
Est-ce proche du résultat désiré?

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec légende

Message par Kimi Kozuma Mar 17 Mai 2011 - 19:07

En fait, je voudrais faire un truc comme ça. Comme dans mon tuto.

Image avec légende 2qj92x3
avatar

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

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

Résolu Re: Image avec légende

Message par Invité Mar 17 Mai 2011 - 20:06

Comme ceci, est-ce mieux?
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>
Le CSS:
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.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec légende

Message par Kimi Kozuma Mar 17 Mai 2011 - 20:19

C'est parfait !

Merci beaucoup !
avatar

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma 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