Info bulles : Texte ou JPG

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Info bulles : Texte ou JPG

Pirlouis

Bonjour à tous,

Je vous remercie pour les réponses rapide à ma dernière question.

J'ai un autre problème que je souhaiterais vous soumetre.

Sur une page HTML j'insère un link qui point vers un e-mail
Ex: <a href="mailto:toto@hotmail.com">Toto</a>

je peux facilement mettre un info-bulle avec un texte.

Ma question, comment faudrait-il faire pour faire apparaitre une photo plustôt qu'un texte.

Quelqu'un aurait-il une idée ?

Merci d'avance

Publicité

boulax

Inserer phrase hype en anglais

Faire apparaitre un div qui contient l'image, au niveau de ton curseur.

Message cité 1 fois

---------------
Posté depuis des chiottes, sales. Me gusta.

Pirlouis

boulax a écrit :

Faire apparaitre un div qui contient l'image, au niveau de ton curseur.

Aurais-tu un exemple de code, car je ne comprend pas bien.

Merci d'avance

anapajari

s/travail/glanding on hfr/gs;

pas très débrouillard

Bon ce qui est vraiment dommage c'est que c'est presque faisable en pur css:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<style type="text/css">
a span.bubble{
display:none;
position: relative;
top: -40px;
}
a:hover span.bubble{
display: block;
}
</style>
</head>
<body>
<br/><br/>Balblalblalgvl a lvlal<br/>
<a href="tapage.html">le texte qui va bien<span class="bubble"><img src="uneimage.jpg" alt="pouet"du texte<img src="uneimage.jpg" alt="pouet"/></span></a>
</body>

Malheureusement ça marche pas sous IE

Avec un peu de js c'est sans être très compliqué:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<script type="text/javascript">
var infobulle = {};
infobulle.init = function(){
var aNodes = document.getElementsByTagName('a');
for(var i=0; i<aNodes.length; i++){
if ( aNodes[i].nextSibling.className == 'bulle'){
aNodes[i].onmouseover = function(e){ infobulle.affBulle(this);}
aNodes[i].onmouseout = function(e){ infobulle.cacheBulle(this);}
aNodes[i].nextSibling.style.display = 'none';
}
}
}
infobulle.affBulle = function (node) {
node.nextSibling.style.display = 'block';
}
infobulle.cacheBulle = function (node) {
node.nextSibling.style.display = 'none';
}
window.onload = infobulle.init;
</script>
</head>
<body>
<br/><br/>Balblalblalgvl a lvlal<br/>
<a href="tapage.html">le texte qui va bien</a><div class="bulle"><img src="arbre/plus.png"/>du texte<img src="arbre/plus.png"/></div>
</body>
</html>

Par contre j'ai fait à la va-vite je garantis pas 100% bug-proof.

Message édité par anapajari le 06-09-2006 à 14:21:32

boulax

Inserer phrase hype en anglais

Ou alors il cherche rollover dans google

Message cité 1 fois

---------------
Posté depuis des chiottes, sales. Me gusta.

anapajari

s/travail/glanding on hfr/gs;

boulax a écrit :

Ou alors il cherche rollover dans google

t'as pas fondamentalement tort en fait [:grinking]

Message cité 1 fois

Pirlouis

anapajari a écrit :

t'as pas fondamentalement tort en fait [:grinking]

Merci à tous pour votre aide, mais j'ai encore un détail qui me taraude.

Je n'arive pas à implémenté sur un lien <a href="mailto:toto@hotmail.com>toto</a>

Le but c'est que lorsque je vien sur le link en question, j'ai la photo de mon correspondant qui apparait.
Lorsque je déplace le curseur de ma souris hors du lien la photo disparait

La solution que vous m'avez donner est géniale avec tout les autre type de link.

Merci encore pour votre aide même cette partie de code fonctionne bien.

anapajari

s/travail/glanding on hfr/gs;

nan nan c'est censé marcher aussi avec les mailto en href

Tu peux nous montrer un exemple "qui marche pas".

Message cité 1 fois

Pirlouis

anapajari a écrit :

nan nan c'est censé marcher aussi avec les mailto en href

Tu peux nous montrer un exemple "qui marche pas".

Bonjour à tous,

Je tiens à vous remercier pour votre aide, j'ai appris énormément avec vos exemple de code.
Par ailleurs, je n'arrive pas à obtenir le résultat que je souhais.

Voici mon problème.
1. Je créé un organigramme avec Vio 2003 Pro. Je sauvegade en HTML (Visio fait cela très bien)
2. Lorsque je parcours les différents blocs représentant les personnes, j'ai une info-bulle qui apparait avec les renseignements de la personne en question.

Ma question.
Je souhaiterais avoir la photo de la personne qui apparait au lieu de l'info-bulle.

J'ai trouvé un site qui présente un peut l'idée du résultat que je souhaiterais (Exemple : http://www.teuco.fr/pr_main_lin.asp?linea=23)
A l'endroit ou vous avez les 3 colonnes Hydrosonic - Top - Easy, dès que vous positionnez le curseur sur un link une photo apparait en info-bulle.
J'ai essayé de regarder le souce derrière, j'avoue que je n'ai pas compris grand chose.

Si vous avez des idées de code ou l'utilisation d'un outil particulier .....

Je vous remercie d'avance.

FORUM HardWare.fr

Programmation

HTML/CSS

Info bulles : Texte ou JPG

Sujets relatifs
texte dynamique	Texte défilant dans Outlook
Comment faire apparaitre un texte entre 2 lignes ?	SELECT trop lent dans un fichier texte
tri fichier texte - VBS	Une regex pour tester une fin de ligne de texte
VBA EXCEL : détecter mise en forme texte (gras, italique)	scroll barre avec texte et image
Trouver la balise d'un texte que l'on cherche.	[RESOLU]Aligner Verticalement un texte en milieu de Cellule
Plus de sujets relatifs à : Info bulles : Texte ou JPG

Page générée en 0.069 secondes