Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

info-bulle

10 réponses
Avatar
Richard Hachel
Bonjour, les enfants.

Je suis nul en informatique (ou à peu près).

J'aimerais savoir si l'on peut mettre une petite photo dans une bulle,
comme ici; et si oui, comment?

Là, c'est un dessin fait avec mspaint. Ce n'est pas du réel.

C'est juste pour savoir si on peut parvenir à ça.

<http://news2.nemoweb.net/jntp/5c8aa5d721af91625a3a006ac742aea0bf2c67d3@news2.nemoweb.net/Data/Media:1>

R.H.

10 réponses

Avatar
Olivier Miakinen
Le 02/11/2014 11:36, Richard Hachel a écrit :

Bonjour, les enfants.



Bonjour papa.

Je suis nul en informatique (ou à peu près).



Pas seulement en informatique, visiblement. En lecture de chartes
aussi : tu es dans le groupe consacré aux ordinateurs de l'époque
où le web n'existait pas, or bien que ce ne soit pas explicite je
suppose que ta question concerne la conception d'une page web.

J'aimerais savoir si l'on peut mettre une petite photo dans une bulle,
comme ici; et si oui, comment?

Là, c'est un dessin fait avec mspaint. Ce n'est pas du réel.

C'est juste pour savoir si on peut parvenir à ça.

<http://news2.nemoweb.net/jntp//Data/Media:1>



Je n'ai pas compris la question, même avec l'image d'exemple. Alors, en
reposant la question dans le groupe fr.comp.infosystemes.www.auteurs
consacré à la conception de pages web, je te conseille d'être un peu
plus explicite.

Cordialement,
--
Olivier Miakinen
Avatar
Richard Hachel
Le 02/11/2014 à 21:02, Olivier Miakinen a écrit :
Le 02/11/2014 11:36, Richard Hachel a écrit :

Bonjour, les enfants.



Bonjour papa.

Je suis nul en informatique (ou à peu près).



Pas seulement en informatique, visiblement. En lecture de chartes
aussi : tu es dans le groupe consacré aux ordinateurs de l'époque
où le web n'existait pas, or bien que ce ne soit pas explicite je
suppose que ta question concerne la conception d'une page web.

J'aimerais savoir si l'on peut mettre une petite photo dans une bulle,
comme ici; et si oui, comment?

Là, c'est un dessin fait avec mspaint. Ce n'est pas du réel.

C'est juste pour savoir si on peut parvenir à ça.


<http://news2.nemoweb.net/jntp//Data/Media:1>



Je n'ai pas compris la question, même avec l'image d'exemple. Alors, en
reposant la question dans le groupe fr.comp.infosystemes.www.auteurs
consacré à la conception de pages web, je te conseille d'être un peu
plus explicite.

Cordialement,



Tu as raison, mon petit ange. Je te remercie.

Je reposte où il faut.

Est-ce que quelqu'un sait comment on peut mettre une petite photo dans la
bulle
info-data comme ici?

R.H.
Avatar
Olivier Miakinen
Le 02/11/2014 21:07, Richard Hachel a écrit :

<http://news2.nemoweb.net/jntp//Data/Media:1>





Tu as raison, mon petit ange. Je te remercie.

Je reposte où il faut.



;-)

Est-ce que quelqu'un sait comment on peut mettre une petite photo dans la
bulle
info-data comme ici?



Je crois que je commence à comprendre. Tu voudrais savoir comment
mettre autre chose que du texte dans une info-bulle du type de ce que
certains navigateurs affichent quand on survole à la souris un élément
qui a un paramètre « title » ?

Je suppose que cela nécessite un script en JavaScript, mais moi en tout
cas je ne sais pas faire.
Avatar
Denis Beauregard
Le Mon, 03 Nov 2014 01:07:00 +0100, Olivier Miakinen
<om+ écrivait dans fr.comp.infosystemes.www.auteurs:

Le 02/11/2014 21:07, Richard Hachel a écrit :

<http://news2.nemoweb.net/jntp//Data/Media:1>





Tu as raison, mon petit ange. Je te remercie.

Je reposte où il faut.



;-)

Est-ce que quelqu'un sait comment on peut mettre une petite photo dans la
bulle
info-data comme ici?



Je crois que je commence à comprendre. Tu voudrais savoir comment
mettre autre chose que du texte dans une info-bulle du type de ce que
certains navigateurs affichent quand on survole à la souris un élément
qui a un paramètre « title » ?

Je suppose que cela nécessite un script en JavaScript, mais moi en tout
cas je ne sais pas faire.



Il suffit de regarder dans le code interne d'une page avec une telle
info-bulle pour voir que c'est assez compliqué à faire...

Ceci dit, c'est tellement répandu qu'il doit y avoir quelques exemples
dans la toile.


Denis
Avatar
Paul Gaborit
À (at) Mon, 03 Nov 2014 01:07:00 +0100,
Olivier Miakinen <om+ écrivait (wrote):

Le 02/11/2014 21:07, Richard Hachel a écrit :

<http://news2.nemoweb.net/jntp//Data/Media:1>





Tu as raison, mon petit ange. Je te remercie.

Je reposte où il faut.



;-)

Est-ce que quelqu'un sait comment on peut mettre une petite photo dans la
bulle
info-data comme ici?



Je crois que je commence à comprendre. Tu voudrais savoir comment
mettre autre chose que du texte dans une info-bulle du type de ce que
certains navigateurs affichent quand on survole à la souris un élément
qui a un paramètre « title » ?
Je suppose que cela nécessite un script en JavaScript, mais moi en tout
cas je ne sais pas faire.



On peut obtenir ce comportement via du pur CSS (sans javascript) grâce à
la pseudo-classe ":hover" pour détecter le survol de la souris et grâce
à la propriété "display" qui permet de choisir si un élément est visible
ou non. Ex:

<http://www.scriptol.fr/css/infobulle.php>

<http://openclassrooms.com/courses/modifier-l-apparence-d-une-infobulle>

(Une recherche Google avec "css infobulle image" donne plein d'autres
résultats.)

--
Paul Gaborit - <http://perso.mines-albi.fr/~gaborit/>
Avatar
docanski
Alors que les eleveurs et agriculteurs empoisonnent toujours la
Bretagne, Richard Hachel ecrit ce qui suit en ce 02/11/2014 21:07 :

J'aimerais savoir si l'on peut mettre une petite photo dans une bulle,
comme ici; et si oui, comment?

Là, c'est un dessin fait avec mspaint. Ce n'est pas du réel.

C'est juste pour savoir si on peut parvenir à ça.







Explication par l'exemple et le code, ici ... même si ça date de plus de
15 ans : http://docanski.free.fr/valastuc/fdsast8a.htm

Cordialement
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
docanski
Alors que les eleveurs et agriculteurs empoisonnent toujours la
Bretagne, docanski ecrit ce qui suit en ce 03/11/2014 10:09 :

Explication par l'exemple et le code, ici ... même si ça date de plus de
15 ans : http://docanski.free.fr/valastuc/fdsast8a.htm



Bizarre, la suite n'est pas passée :-)
La voici : http://docanski.free.fr/valastuc/fds18a.htm ... mais c'est
déjà plus poussé

--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
Richard Hachel
Le 03/11/2014 à 01:07, Olivier Miakinen a écrit :
Le 02/11/2014 21:07, Richard Hachel a écrit :


<http://news2.nemoweb.net/jntp//Data/Media:1>





Tu as raison, mon petit ange. Je te remercie.

Je reposte où il faut.



;-)

Est-ce que quelqu'un sait comment on peut mettre une petite photo dans la
bulle
info-data comme ici?



Je crois que je commence à comprendre. Tu voudrais savoir comment
mettre autre chose que du texte dans une info-bulle du type de ce que
certains navigateurs affichent quand on survole à la souris un élément
qui a un paramètre « title » ?



Oui. Je veux ajouter une petite image au texte de la bulle.

Je suppose que cela nécessite un script en JavaScript, mais moi en tout
cas je ne sais pas faire.



C'est pas grave.

R.H.
Avatar
Olivier Miakinen
Le 03/11/2014 13:46, Richard Hachel m'a répondu :

[...] moi en tout cas je ne sais pas faire.



C'est pas grave.



D'autant que Paul et docanski ont montré comment le faire sans
JavaScript.
Avatar
SAM
Le 03/11/14 15:51, Olivier Miakinen a écrit :
Le 03/11/2014 13:46, Richard Hachel m'a répondu :

[...] moi en tout cas je ne sais pas faire.



C'est pas grave.



D'autant que Paul et docanski ont montré comment le faire sans
JavaScript.



et que c'est assez facile à faire.
(de préférence avec une balise A)(pour être compris des vieux IE)

css:
=== a { position: relative }
a img { position: absolute; display: none; border: none; }
a:hover img { display: block }

html :
==== <a href="#">c'est moi <img src="moi.jpg"></a>



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8