Image petite à grosse

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

Résolu Image petite à grosse

Message par Lumélys le Lun 14 Nov 2011 - 1:09

Je ne sais pas comment on appel ce code. Je pense que c'est Infobulle?
Je ne vois pas d'autres sujets, ou du moins j'ai chercher longuement sans voir d'image que je cherchais.
J'aimerai savoir comment en fait ceci sur une pa:


http://starsever.forumgratuit.org/


Vous voyez le coin STAFF en haut à gauche? Quand vous passez le curseur, il y a l'image qui apparaît en gros avec le nom, le profil et pour MP.


Merci! =)

Lumélys
***

Féminin
Messages : 133
Inscrit(e) le : 13/08/2009

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

Résolu Re: Image petite à grosse

Message par Chacha le Lun 14 Nov 2011 - 10:07

Bonjour,

Parmi les sujets déjà traités, par cette Recherche, vous trouverez notamment CELUI-CI qui vous aidera. Wink


Cordialement

Chacha
Modéractif
Modéractif

Masculin
Messages : 50927
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image petite à grosse

Message par Lumélys le Lun 14 Nov 2011 - 13:43

Je veux bien les suivre mais je ne comprends pas vraiment où les placer dans les codes pour que ca fonctionne car bien souvent ceux-ci se forment tout croches ou n'apparaissent pas.

Lumélys
***

Féminin
Messages : 133
Inscrit(e) le : 13/08/2009

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

Résolu Re: Image petite à grosse

Message par Invité le Mar 22 Nov 2011 - 22:29

Bonjour,

Où en-est votre problème ?

Deux solutions :

  • Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône résolu en éditant votre premier message,
  • Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté,


A bientôt sur ForumActif Smile

Invité
Invité


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

Résolu Re: Image petite à grosse

Message par Lumélys le Mer 23 Nov 2011 - 19:39

Bonjour,
personne n'a répondu à mon commentaire donc il est encore bien présent comme question.
Merci ^^

Lumélys
***

Féminin
Messages : 133
Inscrit(e) le : 13/08/2009

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

Résolu Re: Image petite à grosse

Message par shirabi le Mer 23 Nov 2011 - 22:42

Pour faire ce genre d'effet il faut déjà partir avec deux images (une grande et une petite). Après avec du Css on "programme" une infobulle avec la position aspect etc. Et enfin on pose le code html qui contient d'abord la petite image et ensuite dans la partie infobulle la grande ^^, je vais chercher les codes mais je ne promets rien, donc si quelqu'un les connait déjà aider la ^^.

Cordialement.

shirabi
****

Masculin
Messages : 304
Inscrit(e) le : 26/06/2011

http://yob-rpg.kanak.fr/
shirabi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image petite à grosse

Message par Invité le Mer 30 Nov 2011 - 9:40

Bonjour,

Si le problème est toujours d'actualité, faites un essai et montrez nous ce que ça donne Wink .

Une infobulle est constituée d'un code pour la page d'accueil, et d'un code CSS associé.

Le message en page d'accueil:
Code:
<div class="infobulle"><img src="lien image ou apparait l'infobulle">
<span>Contenu de la bulle</span></div>

Le code CSS ( panneau d'amdin' > affichage > couleur > feuille de style 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{
border: 1px;
padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 150px ;
color:#FFFFFF;
border: 1px solid #000;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

La partie à personnaliser est la suivante:
Code:
.infobulle:hover span{
visibility: visible;
top: 70px;/*position par rapport au haut de l'image*/
left: 35px;/*position par rapport au bord gauche de l'image*/
width: 150px ;/*largeur de la bulle*/
color:#FFFFFF;/*couleur du texte*/
border: 1px solid #000;/*épaisseurs style et couleur des contours*/
-moz-border-radius: 12px;/*arrondis*/
-webkit-border-radius: 12px;/*arrondis*/
border-radius: 12px;/*arrondis*/}
Pour aligner plusieurs infobulles, placez-les dans un tableau. Exemple pour un ligne de 3 infobulles:
Code:
<table><tr><td><div class="infobulle"><img src="lien image ou apparait l'infobulle 1">
<span>Contenu de la bulle 1</span></div><div class="infobulle"><img src="lien image ou apparait l'infobulle 2">
<span>Contenu de la bulle 2</span></div></td><td></td><td><div class="infobulle"><img src="lien image ou apparait l'infobulle 3">
<span>Contenu de la bulle 3</span></div></td></tr></table>

Cordialement.

Invité
Invité


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

Résolu Re: Image petite à grosse

Message par Lumélys le Mer 30 Nov 2011 - 17:06

Je vais essayer je vous tiens au courant Wink

Lumélys
***

Féminin
Messages : 133
Inscrit(e) le : 13/08/2009

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

Résolu Re: Image petite à grosse

Message par Invité le Jeu 8 Déc 2011 - 21:04

Bonjour,

Où en-est votre problème ?

Deux solutions :

  • Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône résolu en éditant votre premier message,
  • Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté,


A bientôt sur ForumActif Smile

Invité
Invité


Invité 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