InfoBulle PNG (Code Html&Css!)

[boulledogue]

Bonjour tout le monde,
Je vais vous apprendre comment faire une infobulle limitée pour 130 caractères!

Résultat final:

http://desopilo.olympe-network.com/infobulle/

Notre infobulle!

Compatibilités:

IE7, IE8, FireFox 2, Safari & Opera

Incompatibilité:

FireFox 3

L'infobulle

http://desopilo.o-n.fr/infobulle/bulleinfo.png

Code HTML

Code: Tout sélectionner

<a href="http://monsitegratuit.com" class="info">MonSiteGratuit.com
<span>130 caractères pour dire que MonSiteGratuit est formidable!</span></a>

Code CSS

Code: Tout sélectionner

a.info {
    position:relative;
    background:none;
    z-index:10;
}

a.info:hover {
    z-index:20;
}

a.info span {
    display:none;
}

a.info:hover>span {
background-image:url(images/bgInfo.png);
}

a.info:hover span {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://desopilo.o-n.fr/infobulle/bulleinfo.png",
sizingMethod="crop");
}

a.info:hover span {
    display:block;
    position:absolute;
    top:18px;
    left:10px;
    padding-left:25px;
    padding-top:24px;
    padding-bottom:5px;
    padding-right:8px;
    width:205px;
    height:45px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-style:italic;
    font-size:10px;
    color:#999999;
    text-decoration:none;
    text-align:justify;
}



Résultat final:

http://desopilo.olympe-network.com/infobulle/

J'espère vous avoir aidé!
A bientot
Boulledogue

[Black]

C'est bien mais il faudrait que ce soit compatible avec FF3

[jeromecold]

Pas mal pas mal du tout!!!
Dommage qu'il ne soit pas compatible avec le rouquin en version 3 ^^

[ced52]

Ton infobulle reste basique, mais originale.
Il est vrai que d'autres infobulles, quand elles sont admirablement bien faites, deviennent des chefs d'oeuvre de l'informatique =D

[boulledogue]

Salut,
Plus c'est basique, mieux c'est... Tu peux faire une infobulle super évoluée, mais ca ne sera pas le top je pense. Une infobulle d'une couleur et d'une petite taille comme la mienne, c'est bien non?

[Olitax]

Bonjour,

Super cette infobulle C'est l'une des toutes premières application que j'avais mis en place sur mon ancien site

Et elle est très utile !!

Olitax-
++

[Gaara]

Incompatible avec la dernière version d'Opera (9.5) .
C'est dommage que ça ne fonctionne ni sur FF3 et Opera 9.5 qui font quand même partie des navigateurs les plus utilisés .

Peut-être faudrait-il revoir le code ?

[jeromecold]

Incompatible avec la dernière version d'Opera (9.5) .
C'est dommage que ça ne fonctionne ni sur FF3 et Opera 9.5 qui font quand même partie des navigateurs les plus utilisés .

Peut-être faudrait-il revoir le code ?

Gaara, ta lucidité et ton sens pratique m'épateront toujours!

[boulledogue]

Salut!
Je verrai comment modifier le code, je vous dis quoi après!
Je suis sur mon eee pc la et je suis trop content sisi je vous assure!
Merci Gaara
Boulledogue

[Gaara]

Cool boulledogue

Gaara, ta lucidité et ton sens pratique m'épateront toujours!

Merci Mais je ne fais que répondre

[dragon647]

Un vrai eeepc? (linux dessus?)

[boulledogue]

Un vrai eee pc avec XP moi je dis!

[zardoz]

Ton infobulle reste basique, mais originale.
Il est vrai que d'autres infobulles, quand elles sont admirablement bien faites, deviennent des chefs d'oeuvre de l'informatique =D

Je ne suis pas en désaccord avec toi . . . C'est super cool.
Ton regard porte à l'externe à ce que je vois. Tourner vers le talent.
C'est un regard propre.

[Kwik]

Comme l'on souligné la plupart des posteurs sur ce topic.
Il manque juste l'incompatibilité avec FF3 & OP9.5.
Sinon niveau esthétique y'a rien à dire.

[Valbuena72]

ça marche po dommage