code html pour info-bulle

code html pour info-bulle Sujet résolu

hs1949

Posté le 13/05/2015 @ 12:53

Bonjour, sur mon site internet, j'ai mis une info-bulle, qui apparaît sur la page concernée, en tant que texte. je souhaiterai remplacer le texte par une image du genre point d'interrogation. Je ne sais pas comment faire cette modification, c'est pourquoi je sollicite de l'aide. Je ne suis pas un spécialiste du code html.

Voici le lien vers la page du site : http://www.webconnexion.ch/lavigneafarinet.html

Voici le code html concerné:

<html>

<head>

<title>Infobulle en CSS</title>

<style>

/* Règle de base pour le lien */

color:#4c0ed8;

}

a:hover,a:focus{

color:#000;

}

/* Position et couleur bulle */

aspan{

position:absolute;

margin-top:25px;

margin-left:-25px;

color:#fff;

background:rgba(0,0,0,0.5);

padding:25px;

border-radius:3px;

/* Faire disparaire infobulle par défaut */

/* On determine l'origine de la rotation */

transform:scale(0)rotate(-180deg);

/* Faire durer l'effet */

transition:all.25s;

/* Effet sur la transparence */

opacity:0;

}

/* Apparition de la bulle avec le scale à 1 */

a:hoverspan,a:focusspan{

transform:scale(1)rotate(0);

/* Effet sur la transparence */

opacity:1;

}

</style>

</head>

<body>

<p>

<ahref="#"> Passez la souris sur ce lien !

<span>Pour voir les vidéos en plein écran, cliquez sur le logo YouTube ;)</span>

</a>

</p>

</body>

</html>

Voilà, il s'agirait de remplacer le texte "passez la souris sur ce lien", par l'image précitée.

Un grand merci d'avance à celle ou celui qui aura la gentillesse de m'aider-

entre temps de vos nouvelles, recevez mes plus cordiales salutations.

hs1949

Dreamer

Posté le 13/05/2015 à 19:07

Message original par hs1949

Bonjour, sur mon site internet, j'ai mis une info-bulle, qui apparaît sur la page concernée, en tant que texte. je souhaiterai remplacer le texte par une image du genre point d'interrogation. Je ne sais pas comment faire cette modification, c'est pourquoi je sollicite de l'aide. Je ne suis pas un spécialiste du code html.

Voici le lien vers la page du site : http://www.webconnexion.ch/lavigneafarinet.html

Voici le code html concerné:

<html>

<head>

<title>Infobulle en CSS</title>

<style>

/* Règle de base pour le lien */

a{

color:#4c0ed8;

}

a:hover,a:focus{

color:#000;

}

/* Position et couleur bulle */

aspan{

position:absolute;

margin-top:25px;

margin-left:-25px;

color:#fff;

background:rgba(0,0,0,0.5);

padding:25px;

border-radius:3px;

/* Faire disparaire infobulle par défaut */

/* On determine l'origine de la rotation */

transform:scale(0)rotate(-180deg);

/* Faire durer l'effet */

transition:all.25s;

/* Effet sur la transparence */

opacity:0;

}

/* Apparition de la bulle avec le scale à 1 */

a:hoverspan,a:focusspan{

transform:scale(1)rotate(0);

/* Effet sur la transparence */

opacity:1;

}

</style>

</head>

<body>

<p>

<ahref="#"> Passez la souris sur ce lien ! 

<span>Pour voir les vidéos en plein écran, cliquez sur le logo YouTube ;)</span>

</a>

</p>

</body>

</html>

Voilà, il s'agirait de remplacer le texte "passez la souris sur ce lien", par l'image précitée.

Un grand merci d'avance à celle ou celui qui aura la gentillesse de m'aider-

entre temps de vos nouvelles, recevez mes plus cordiales salutations.

hs1949

Pour mettre une image, c'est simple tu remplaces ton texte par <img src="dossier/image.jpg" alt="texte de remplacement" width="xpx" height="xpx" />

- width : largeur de ton image en px (pixel)

- height : hauteur de ton image en px (pixel)

hs1949

Posté le 13/05/2015 à 20:07

Merci pour ta réponse rapide. Je vais tenter de m'en sortir durant ce long WE qui sera avec un temps mauvais. Je te tiens au courant de la suite. Je ne suis pas expert en ce domaine. aussi, sans vouloir abuser, le cas échéant, je me permettrai de revenir sur le forum.

Encore merci, et bon WE

hs1949

elle

Posté le 13/05/2015 à 20:14

Grande Maîtresse astucienne

Sinon, pour le point d'interrogation, y a toujours le bon vieux curseur help...

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

hs1949

Posté le 16/05/2015 à 10:44

Bonjour Dreamer. Pas terrible le temps, 12 cm de neige à 1500 mètres. Reste plus qu'à s'occuper d'informatique.

Alors, voilà, j'ai essayé de suivre tes indications, mais sans succès. Je ne suis pas un pro de l'HTML. Il me semble que j'ai un problème avec l'adresse de l'image à insérer, et peut être encore autres choses. Aussi, sans abuser de ta disponibilité, Est-ce que ce serait possible que tu m'écrives un exemple de code HTML, pour faire ce que je souhaite.

D'avance je t'en remercie.

Meilleures salutations.

hs1949

Posté le 16/05/2015 à 11:50

Re-bonjour Dreamer,

Voilà, ça marche.

Je te remercie beaucoup, pour ton aide. C'est mon début avec HTML, c'est plutôt intéressant.

Bonne journée

hs1949

zoulouman

Posté le 12/06/2015 à 08:54

elle a écrit :

Sinon, pour le point d'interrogation, y a toujours le bon vieux curseur help...

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

Très très bien ce "petit" site w3schools.

Je me le place en favori, il me servira.

elle

Posté le 12/06/2015 à 20:29

Grande Maîtresse astucienne

Tu n'es jamais tombé sur ce site en faisant une recherche?

zoulouman

Posté le 13/06/2015 à 07:46

j'ai du passer à côté. A cause de l'anglais, peut-être ?

elle

Posté le 13/06/2015 à 07:54

Grande Maîtresse astucienne

J'imagine. Je fais mes recherches en "bilingue"...

Dreamer

Posté le 13/06/2015 à 08:18

elle a écrit :

J'imagine. Je fais mes recherches en "bilingue"...

Français --> Joual

Joual --> Français !!

zoulouman

Posté le 13/06/2015 à 11:17

Les canadiens ont un vrai avantage.

Ils parent français et anglais.

Tabarnak ! C'te crisse de chance qu'ils ont !

elle

Posté le 13/06/2015 à 20:34

Grande Maîtresse astucienne

zoulouman a écrit :

Tabarnak !

Enfin, un qui l'écrit comme il faut. Pour ce qui est de le prononcer... no comment.

(En passant, plus de 80% des Canadiens et Canadiennes sont unilingues, majoritairement anglophones. Le bilinguisme officiel ne concerne que les institutions gouvernementales et législatives fédérales.)

Malcolm

Posté le 16/06/2015 à 17:34

Calisse, il y a toujours moyen de prendre des cours ... http://www.je-parle-quebecois.com/

elle

Posté le 16/06/2015 à 19:50

Grande Maîtresse astucienne

: on dit pas calisse, mais câlisse!

hs1949

Posté le 16/06/2015 à 20:23

Bonsoir,

je suis hs1949, j'ai posé une question, j'ai reçu une réponse.

Ce sujet est résolu.

Celles et ceux qui pensent qu'ils se trouvent sur un site de bavardages stériles et inutiles, se trompent de plateforme.

C'est vraiment agaçant de voir des personnes ne pas respecter la philosophie et le sens de ce site.

Merci à vous toutes et tous, de bien vouloir aller tchater ailleurs.

hs1949

ps, le sujet est marqué résolu depuis le 16.05.2015, à 11h50

elle

Posté le 17/06/2015 à 05:05

Grande Maîtresse astucienne

Tu ne dois jamais marcher sur la pelouse, toi!

zoulouman

Posté le 17/06/2015 à 12:38

EDIT

Oups ! J'ai floodé !

On a le droit de ne pas respecter les panneaux "ne marchez pas sur la pelouse" ici ?

Modifié par zoulouman le 17/06/2015 12:41

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !

Les bons plans du moment PC Astuces

Tous les Bons Plans

Mini PC Geekom A5 (Ryzen 5 7430U, 16 Go RAM DDR4, SSD NVMe 512 Go, WiFi 6, Windows 11 Pro)
331,55 € 399 € -17%
@Amazon

SSD Silicon Power A55 256 Go
18,79 € 25 € -25%
@Amazon

Lot de 3 lampes solaires d'extérieur Peasur LED avec détecteur de mouvement
16,93 € 21,99 € -23%
@Amazon

Mini PC Geekom IT13 (Intel Core i9-13900H, 32 Go RAM DDR4, SSD NVMe PCIe 4.0 1 To, WiFi 6E, Windows 11 Pro)
629 € 749 € -16%
@Geekbuying

SSD MSI Spatium M450 1 To (NVMe, PCIe 4.0, 3400 Mo/s)
55,13 € 70 € -21%
@Amazon Espagne

Portable 15.6 pouces Acemagic LX15 Pro (Ryzen 7 5700U, 16 Go, 512 Go SSD, Vega 8, Windows 11)
375,99 € 499,99 € -25%
@Amazon