× Aidez la recherche contre le COVID-19 avec votre ordi ! Rejoignez l'équipe PC Astuces Folding@home
 > Tous les forums > Forum des Webmasters
 code html pour info-bulleSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
hs1949
  Posté le 13/05/2015 @ 12:53 
Aller en bas de la page 
Petit astucien

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

Publicité
Dreamer
 Posté le 13/05/2015 à 19:07 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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 ! <!-- Il y a un espace entre a et href <a href="#"> -->

<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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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

hs1949
 Posté le 16/05/2015 à 11:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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

zoulouman
 Posté le 13/06/2015 à 07:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

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

Publicité
elle
 Posté le 13/06/2015 à 07:54 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

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

Dreamer
 Posté le 13/06/2015 à 08:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

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

elle
 Posté le 16/06/2015 à 19:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

: on dit pas calisse, mais câlisse!

hs1949
 Posté le 16/06/2015 à 20:23 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

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 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Tu ne dois jamais marcher sur la pelouse, toi!

Publicité
zoulouman
 Posté le 17/06/2015 à 12:38 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

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
Page : [1] 
Page 1 sur 1

Vous devez être connecté pour poster des messages. 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
14,90 €Windows 10 Pro 32/64 bits OEM à 14,90 €
Valable jusqu'au 22 Juillet

Le vendeur sérieux DIGITAL FR propose sur Amazon  la clé d'activation pour Windows 10 professionnel en français 32 bits / 64 bits à 14,90 €. Cette clé livrée par email fonctionne avec l'outil d'installation et de création de support de Microsoft que vous pouvez télécharger ici ou directement avec l'ISO de Windows 10 Pro. De quoi installer légalement Windows 10 Pro sur un PC. Pour en savoir plus sur l'achat et l'installation d'une clé OEM de Windows 10, suivez les indications de notre dossier pratique.


> Voir l'offre
29,99 €Répéteur WiFi TP-Link RE305 AC1200 Dual-band à 29,99 €
Valable jusqu'au 17 Juillet

Amazon fait une offre éclair sur le répéteur WiFi TP-Link RE30 AC1200 Dual-band qui passe à 29,99 € et livré gratuitement. Ce répéteur qu'on trouve ailleurs autour de 45 € va vous permettre d'augmenter grandement la portée de votre WiFi 802.11 b/g/n et ac jusqu'à 1200 Mbit/s. Avec son port Ethernet, ce répéteur peut également faire office de point d'accès sans fil et de pont WiFi. 


> Voir l'offre
19,79 €Clé USB 3.1 SanDisk Extreme Go 64 Go (200 Mo/s) à 19,79 €
Valable jusqu'au 17 Juillet

Amazon fait une promotion sur la clé USB 3.1 Sandisk Extreme Go 64 Go qui passe à 19,79 €.  On la trouve ailleurs à partir de 35 €. Cette clé USB 3.1 (compatible usb 3.0) est rapide puisqu'elle offre des débits jusqu'à 200 Mo/s en lecture et 150 Mo/s en écriture. Pratique, son connecteur rétractable vous évitera d'avoir à manipuler (et perdre ?) un bouchon.


> Voir l'offre

Sujets relatifs
myspace: code html pour ajouter une webcam
Code HTML pour positionner un fond de page web
besoin d'aide pour code html
Code HTML pour Outlook
Limite de caractères pour une info-bulle? [résolu]
aide pour corriger mon code html
insertion code html
Aller à la ligne dans une info bulle
Code html
mot de passe pour accéder une page html
Plus de sujets relatifs à code html pour info-bulle
 > Tous les forums > Forum Forum des Webmasters