Description d'une image

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

Résolu Description d'une image

Message par Algeriyad le Mer 18 Juil 2012 - 14:07

Bonjour,

J'ai moi-même supprimé le message qui était à l'intérieur. En fait, sur le message d'accueil (en haut), je voudrais mettre une image pour dire que je suis le fondateur. Mais, en passant la souris dessus, je voudrais qu'une petit page apparaisse avec quelques descriptions sur moi.
J'espère avoir été clair, merci de m'aider Smile



Algeriyad
**

Messages : 67
Inscrit(e) le : 13/02/2011

http://leforumonepiece.forumgratuit.org/
Algeriyad a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Description d'une image

Message par tupac le Mer 18 Juil 2012 - 21:44

Bonsoir

Il s"agit d'une infobulle.

Placer ce code dans votre page d'accueil.
Code:
<span class="infobulle">
<!-- image ou l'on passe le curseur -->
    <img src="http://i45.servimg.com/u/f45/15/55/14/56/zzzzzw27.jpg" />
<span>
<!-- bulle qui apparait -->
<center><i>Mickey</i><br><img src="http://i45.servimg.com/u/f45/15/55/14/56/zzzzvf11.jpg" width="160" height="90"/><br><a href=" URL ICI ">Profil</a></span>
Puis celui-ci dans votre feuille de style css.
Code:
.infobulle{
    position: relative;
    z-index: 0;
    margin: 10px;      /* marge entre chaque infobul */
}

.infobulle:hover{ z-index: 50;}
.infobulle span{  position: absolute; visibility: hidden; }

/* image dans la bulle */

.infobulle span img{
    border: 4px outset #FFFF00;      /* cadre de l'image ou l'on passe le curseur */
    background-color: #884DA7;      /* fond image ou l'on passe le curseur */
    padding: 4px;
}

/* cadre et fond bulle  */

.infobulle:hover span{
    visibility: visible;
    top: 0px;            /* marge haut bulle par rapport a l image */
    left: -50px;            /* marge droite et gauche bulle par rapport a l image */
    width: auto;              /* largeur bulle automatique */
    color:#FFFFFF;     
    font-size: 13px;        /* taille texte */
    font-family: Palatino, time new roman, serif;      /* police */
    background-color: #000;        /* fond bulle */
    border: 10px outset #fff;        /* cadre bulle */
    -moz-border-radius: 12px;      /* arrondi pour les navigateurs */
    -webkit-border-radius: 12px;
    border-radius: 12px;
    padding: 5px;
}
.infobulle a{ color:#FFFFFF; }        /* lien profil */
.infobulle a:hover{ color:#FFFF00; }      /* lien profil au survol */

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Description d'une image

Message par Algeriyad le Mer 25 Juil 2012 - 6:49

Merci, c'est vraiment sympa !

J'aimerai rajouter un effet. Quand je passe ma souris, j'aimerai que l'infobulle s'agrandisse petit à petit. Est-ce possible ?

Algeriyad
**

Messages : 67
Inscrit(e) le : 13/02/2011

http://leforumonepiece.forumgratuit.org/
Algeriyad a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Description d'une image

Message par tupac le Mer 25 Juil 2012 - 13:06

Bonjour

Bien sur, c'est un effet de transition, toujours en css.

Le html.
Code:
  <div class="infobulle-trans">
        <span class="img_bulle">
<img src="http://i45.servimg.com/u/f45/15/55/14/56/zzzz711.png" style="width: 50px; height: 50px; " />

<span class="infos">Texte  Texte Texte Texte Texte Texte Texte Texte  Texte Texte Texte Texte Texte Texte Texte  Texte Texte Texte Texte Texte Texte Texte  Texte Texte Texte Texte Texte Texte Texte  Texte Texte Texte Texte Texte Texte <br />
<center><a href="url-profil" target="_blank">Profil</a></center>
</span></span>

Le css a placer dans votre feuille de style.
Code:
    /* image */
.img_bulle img{
    -moz-border-radius:5px;        /* arrondi image */
    -webkit-border-radius:5px;
    border-radius:5px;

    -moz-opacity:.3;
    -webkit-opacity:.3;
    -khtml-opacity:.3;
    opacity:.3;
    -ms-filter:alpha(opacity=30);
    filter:alpha(opacity=30);
    border: 2px solid #000;    /* cadre image */
}

      /* transition */
.img_bulle img:hover{
    -moz-transition:opacity .3s ease-in;
    -webkit-transition:opacity .3s ease-in;
    -htm-transition:opacity .3s ease-in;
    -o-transition:opacity .3s ease-in;
    transition:opacity .3s ease-in;

    -moz-opacity:1;
    -webkit-opacity:1;
    -khtml-opacity:1;
    opacity:1;
    -ms-filter:alpha(opacity=100);
    filter:alpha(opacity=100);
}

      /* bulle qui apparait */
.infobulle-trans span.infos{
    -moz-border-radius:3px;        /* arrondi bulle */
    -webkit-border-radius:3px;
    border-radius:3px;

    color:#cecece;    /* couleur texte bulle */
    text-align:center;
    border: 4px solid #000;    /* cadre bulle */
    background:#4E3D28;
    width:130px;        /* largeur bulle */
    padding:4px;
}

/* fond */
.infobulle-trans .img_bulle span.infos{
    -moz-opacity:.0;
    -webkit-opacity:.0;
    -khtml-opacity:.0;
    opacity:.0;
    -ms-filter:alpha(opacity=0);
    filter:alpha(opacity=0);

    -moz-transition:all .25s;
    -webkit-transition:all .25s;
    -ms-transition:all .25s;
    -o-transition:all .25s;
    transition:all .25s;
    -moz-transform:scale(0) rotate(-12deg);
    -webkit-transform:scale(0) rotate(-12deg);
    -o-transform:scale(0) rotate(-12deg);
    transform:scale(0) rotate(-12deg);

    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin-left:-50px;
    margin-top:42px;
    position:absolute;
}

.infobulle-trans .img_bulle:focus span.infos,.infobulle-trans .img_bulle:hover span.infos{
    -moz-opacity:1;
    -webkit-opacity:1;
    -khtml-opacity:1;
    -o-opacity:1;
    opacity:1;
    filter:alpha(opacity=100);
    -ms-filter:alpha(opacity=100);

    -moz-transform:scale(1) rotate(0);
    -webkit-transform:scale(1) rotate(0);
    -khtml-transform:scale(1) rotate(0);
    -o-transform:scale(1) rotate(0);
    transform:scale(1) rotate(0);
}

.infos a{ color:#fff; }
.infos a:hover{ color:#ffff00; }

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Description d'une image

Message par Algeriyad le Mer 25 Juil 2012 - 13:52

Merci beaucoup !

Je viens de créer un codecss:
Code:
#hdebut1
{
    text-shadow: 2px 2px 4px maroon;
}

Ensuite j'ai mis à la place de TEXTE: <hdebut1>Fondateur</hdebut1>
Mais le problème, c'est que l'écriture ne veut pas changer. Help me please Smile

Algeriyad
**

Messages : 67
Inscrit(e) le : 13/02/2011

http://leforumonepiece.forumgratuit.org/
Algeriyad a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Description d'une image

Message par Xibition le Mer 25 Juil 2012 - 15:22

Bonjour, essayez plutot ceci :

Code:
<span class="hdebut1">Fondateur</span>

Et dans le css :

Code:
.hdebut1{
  text-shadow: 2px 2px 4px maroon;
}

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

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

Résolu Re: Description d'une image

Message par Algeriyad le Mer 25 Juil 2012 - 15:51

Merci pour votre aide à tous, je vais maintenant pouvoir faire ça sans problème !

Algeriyad
**

Messages : 67
Inscrit(e) le : 13/02/2011

http://leforumonepiece.forumgratuit.org/
Algeriyad 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