> Tous les forums > Forum des Webmasters
 Inserer une image au survol d'un texte
Ajouter un message à la discussion
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]
niagara
  Posté le 28/03/2010 @ 13:20 
Aller en bas de la page 
Petit astucien

bonjour
je suis en train de faire un site proposant mes tutos de graphisme psp.J'aimerai qu'une image apparaisse au survol d'un lien.C'est à dire que je voudrais mettre le titre de mon tuto par exemple Printemps et lorsque l'on passe la souris sur le mot printemps l'image de mon tuto apparait. Mais n'étant pas trop calée de ce côté là pouvez vous me dire comment je dois faire?
Merci

Publicité
niagara
 Posté le 28/03/2010 à 13:20 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

j'ai oublier de vous préciser que je travaille avec dreamweaverCS3

Dreamer
 Posté le 28/03/2010 à 13:53 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

Avec du css tout simplement ....Bon avec une class sur un lien , exemple:

.image a {text-decoration:none;color:#123456;}

.image a:hover {background: transparent url("image.jpg") no repeat;}

Et l'image s'affichera au passage sur le lien de ta souris

niagara
 Posté le 28/03/2010 à 15:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

euh merci dreamer mais là je suis comme une poule devant un oeuf hihi excuse moi je ne comprend pas tout le language .

Je ne connais pas le css suis complètement débutante je sais juste faire simple avec dreamweaver

Alors si je comprends je met le code que tu m'as donné à l'endroit ou je vais mettre mon texte???

merci

Cedders
 Posté le 28/03/2010 à 17:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour,

Le CSS c'est un language qui te permet de mettre en forme ton site (feuille de style). On peux dire, pour faire simple, que c'est comme sous Word : tu crées des styles (titre 1, titre 1.1, ...) et tu les appliques à un mot/paragraphe/...

Concernant l'exemple de Dreamer je ne crois pas que c'est ce que tu souhaites car ça méthode va afficher une image en arrière plan de ton lien mais uniquement où il y a du texte.

Voilà un site qui t'explique une méthode simple mais peut-être pas la meilleure : http://peutetreunereponse.over-blog.com/article-6614978.html

Comme je suis pressé je ne peux te mettre d'exemple mais si tu ne trouve pas to bonheur dans le lien ci-dessus n'hésite pas à demander.

niagara
 Posté le 28/03/2010 à 18:32 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

merci Cedders pour ta réponse j'ai été voir ton lien et cela me semble compliqué car je ne possède pas tellement le language html alors je vais lire bien tranquillement en fait voici le lien de mon site ou je propose des tutos.

http://pagesperso-orange.fr/creaniaga/tutoriels.html

Je voudrais seulement mettre le nom du tuto et sur ce nom lorsque la souris passera dessus il y aura une image qui apparaitra comme sur ce site

http://www.creationsylvie.net/psp/traduction/mes_traductions_tutoriels_sarah.html

j'ai beaucoup à apprendre, merci

Cedders
 Posté le 28/03/2010 à 18:40 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Concernant le site dont tu t'inspires il utilise du JavaScript et j'ai peur que de te taper un code exemple pour réaliser ceci soit incompréhensible pour toi.

Donc si je peux me permettre de te donner un conseil, ce serait de partir sur une idée plus basique et facile le temps que tu apprennes les bases puis de te lancer dans quelque chose de plus relevé.

Mon idée serait donc que tu affiches le résultat de ton tuto en plus petit ou juste une partie et que tu places cette image en préfix du lien comme ici par exemple :

http://www.pixel2life.com/tutorials/adobe_photoshop/



Modifié par Cedders le 28/03/2010 18:41
Dreamer
 Posté le 28/03/2010 à 18:43 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

niagara a écrit :

merci Cedders pour ta réponse j'ai été voir ton lien et cela me semble compliqué car je ne possède pas tellement le language html alors je vais lire bien tranquillement en fait voici le lien de mon site ou je propose des tutos.

http://pagesperso-orange.fr/creaniaga/tutoriels.html

Je voudrais seulement mettre le nom du tuto et sur ce nom lorsque la souris passera dessus il y aura une image qui apparaitra comme sur ce site

http://www.creationsylvie.net/psp/traduction/mes_traductions_tutoriels_sarah.html

j'ai beaucoup à apprendre, merci

Donc tu veux que sur le nom ( Nostalgie par exemple ) on ait l'affichage de la photo du dessus ??

niagara
 Posté le 28/03/2010 à 18:54 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

oui dreamer c'est tout à fait afin d'alleger le site.

Publicité
Dreamer
 Posté le 28/03/2010 à 19:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Bon, je regarde ........

niagara
 Posté le 28/03/2010 à 19:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

merci beaucoup dreamer

elle
 Posté le 28/03/2010 à 19:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

En adaptant ce que j'ai mis ici , ça devrait pouvoir se faire...

http://www.capdagde-location.com/

Dreamer
 Posté le 28/03/2010 à 20:04 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

En adaptant ce que j'ai mis ici , ça devrait pouvoir se faire...

http://www.capdagde-location.com/

L'infobulle en css n'est pas mal non plus !!

elle
 Posté le 28/03/2010 à 20:09 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Ben c'est pas mal de ça qu'il s'agit, mais avec une image et une légende...

niagara
 Posté le 28/03/2010 à 20:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

ha c'est très jolie cette présentation aussi Elle mais alors là faut savoir manier css et là ça dépasse mes compétences car ça doit être compliqué à faire ouh lalalla

Cedders
 Posté le 28/03/2010 à 20:30 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Une chose est certaine c'est que tu ne pourras pas le faire sans CSS ou Javascript.

Le CSS est bien plus facile a prendre en main aussi je te suggère un tuto du siteduzero qui sera certainement mieux adapté à tes connaissances :

http://www.siteduzero.com/tutoriel-3-34410-modifier-l-apparence-d-une-infobulle.html

N'hésite pas à nous demander s'il y a quelque chose que tu ne comprends pas dans le tuto ou si cela coince à la réalisation.

Dreamer
 Posté le 28/03/2010 à 20:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Bon, j'ai fait mumuse 5 mn et avant de montrer quoi que ce soit , je vais te donner quelques conseils gratuits

- les images ne doivent pas comporter de majuscules, d'accents, d'espaces ... Exemple dans ton site : sous l'ocean.jpg ou Nora.jpg pas bô !!!

- Tes images sont trop lourdes et mettent du temps à se charger ( automne = 170ko )...

- Tu donnes des adresses à rallonges à tes photos . C'est le risque de se perdre : http://pagesperso-orange.fr/creaniaga/images/psp/tutoriel/Au%20loin.jpg alors que http://pagesperso-orange.fr/creaniaga/images/loin.jpg suffit largement ..

- Idem pour tes liens : http://pagesperso-orange.fr/creaniaga/images/psp/tutoriel/nostalgie/tuto%20nostalgie.html alors que http://pagesperso-orange.fr/creaniaga/tutoriel/nostalgie.html suffit largement!!

- Le css doit plutôt être mis sur une feuille externe et être appelée avec <link rel="stylesheet" href="/style.css" type="text/css" media="screen" /> car si tu l'utilises souvent tu vas alléger tes pages .

Bon, c'est un essai avec tes images et tes tableaux !! http://www.pashmina-le-site.com/creation/

Publicité
elle
 Posté le 28/03/2010 à 20:45 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Faut croire que je n'étais pas bien réveillée : j'avais compris qu'elle voulait une image et un titre au survol, de là ma suggestion...

Dreamer
 Posté le 28/03/2010 à 20:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

elle a écrit :

Faut croire que je n'étais pas bien réveillée : j'avais compris qu'elle voulait une image et un titre au survol, de là ma suggestion...

Tu remarqueras que je n'ai rien dit ni écrit !!

elle
 Posté le 28/03/2010 à 20:52 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Ça vaut mieux pour toi!

niagara
 Posté le 28/03/2010 à 20:54 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

waouaaaaa merci dreamer c'est exactement ce que je voulais comment as tu fait???

Bon alors d'après tes conseils j'ai beaucoup de boulot à faire pour alléger mon site donc il va falloir que je recommence tout hihihihi

euh je crois que j'ai peut être été plus vite que la musique en créeant ce site sans avoir de bonnes connaissances en html et si je comprends vos explications il faut utiliser en priorité le language css. Ouh lalala faut d'abord que j'aprennne exactement à quoi ça sert et comment faire .Merci cedders pour ton lien je vais potasser ça.

elle
 Posté le 28/03/2010 à 20:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Va faire un tour sur http://www.alsacreations.com/tutoriels/ aussi...

niagara
 Posté le 28/03/2010 à 20:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

merci Elle je garde le lien précieusement .Moi qui pensait savoir faire un site ouh lala la honte je retourne dans mon terrier hihihihi

Dreamer
 Posté le 28/03/2010 à 21:25 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

niagara a écrit :

waouaaaaa merci dreamer c'est exactement ce que je voulais comment as tu fait???

Bon alors d'après tes conseils j'ai beaucoup de boulot à faire pour alléger mon site donc il va falloir que je recommence tout hihihihi

euh je crois que j'ai peut être été plus vite que la musique en créeant ce site sans avoir de bonnes connaissances en html et si je comprends vos explications il faut utiliser en priorité le language css. Ouh lalala faut d'abord que j'aprennne exactement à quoi ça sert et comment faire .Merci cedders pour ton lien je vais potasser ça.

Voici la solution :

Le css que tu mets avec le reste.

a.info {
position: relative;
text-decoration: none;
color: white;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 100;
}
a.info:hover span {
display: inline;
position: absolute;
top: 2em;
left: -5em;
text-align: center;
color: white;
padding: 2px;
}

Pour le html , tu mets ceci :

<table width="838" border="3" align="center" bordercolor="#4C5870">
<tr>
<td width="33%" align="center" class="Style11"><a class="info" href="http://pagesperso-orange.fr/creaniaga/images/psp/tutoriel/nostalgie/tuto%20nostalgie.html">Nostalgie<span><img src="images/nostalgie.jpg" width="300" height="273" border="0" /></span></a></td>
<td width="33%" align="center" class="Style11"><a class="info" href="http://pagesperso-orange.fr/creaniaga/images/psp/tutoriel/Au%20loin.html">Au loin<span><img src="images/loin.jpg" width="300" height="273" border="0" /></span></td>
<td width="33%" align="center" class="Style11"><a class="info" href="http://pagesperso-orange.fr/creaniaga/images/psp/tutoriel/tuto%20rouille%20d%27automne.html">Rouille d'Autome<span><img src="images/automne.jpg" width="300" height="273" border="0" /></span></td>
</tr>
<tr>
<td align="center" class="Style11"><a class="info" href="http://pagesperso-orange.fr/creaniaga/images/psp/tutoriel/tuto%20le%20cheval%20et%20le%20loup.html">Le cheval et le loup<span><img src="images/blend.jpg" width="300" height="273" border="0" /></span></a></td>
<td align="center" class="Style11"><a class="info" href="http://pagesperso-orange.fr/creaniaga/images/psp/tutoriel/joyeux%20noel/tuto%20joyeux%20noel.html">Joyeux Noel<span><img src="images/noel.jpg" width="300" height="273" border="0" /></span></td>
<td align="center" class="Style11"><a class="info" href="http://pagesperso-orange.fr/creaniaga/images/psp/tutoriel/happy%20valentine/tuto%20happy%20valentine.html">Happy Valentine<span><img src="images/valentine.jpg" width="300" height="273" border="0" /></span></td>
</tr>
<tr>
<td align="center" class="Style11"><a class="info" href="#">Ancestral<span><img src="images/ancestral.jpg" width="300" height="273" border="0" /></span></a></td>
<td align="center" class="Style11"><a class="info" href="#">Spring<span><img src="images/spring.jpg" width="300" height="273" border="0" /></span></a></td>
<td>&nbsp;</td>
</tr>
</table>

Tu feras attention j'ai changé (et simplifié ) le nom des images . pour les 2 derniers liens tu remplaceras # par le lien html

niagara
 Posté le 28/03/2010 à 21:34 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

merci dreamer je vais faire ça demain et te tiens au courant.

Ne connaissant pas encore le CSS je peux utiliser seulement le html???

elle
 Posté le 28/03/2010 à 21:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Publicité
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]

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

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
82,19 €Kit de 16 Go (2x8Go) de mémoire DDR4 Crucial Ballistix 3200 MHz RGB à 82,19 € livré
Valable jusqu'au 24 Septembre

Amazon Allemagne fait une promotion sur le kit de 16 Go (2x8 Go) de mémoire DDR4 Crucial Ballistix 3200 MT/s CL16 à 77,54 €. Comptez 4,65 € pour la livraison en France soit un total de 82,19 € livré alors qu'on le trouve ailleurs à partir de 97 €. Vous pourrez personnaliser la palette de couleurs de votre ordinateur avec 16 LED RGB dans 8 zones sur chaque module.

Vous pouvez utiliser votre compte Amazon FR sur Amazon DE et il n'y a pas de douane.


> Voir l'offre
24,99 €Souris filaire Logitech G203 LightSync à 24,99 €
Valable jusqu'au 25 Septembre

Fnac fait une promotion sur la souris filaire Logitech G203 LightSync qui passe à 24,99 € au lieu de 39 €. Elle possède un capteur 8000 dpi, 6 boutons programmables et un éclairage LightSync RGB personnalisable.


> Voir l'offre
123,99 €SSD externe NVMe Crucial X8 1 To à 123,99 €
Valable jusqu'au 24 Septembre

Amazon fait une promotion sur le SSD externe NVMe Crucial X8 1 To qui passe à 123,99 € alors qu'on le trouve ailleurs à partir de 150 €. Il offre des vitesses de lecture jusqu'à 1050 Mo/s et résiste aux chutes jusqu'à 2 mètres, aux chocs et aux températures extrêmes. Il est fourni avec des connecteurs USB C-3.2 et USB-A (USB classique).


> Voir l'offre

Sujets relatifs
insérer du texte dans une image avec frontpage
survol d'une image par un texte.
survol texte =image
Listes - Espace entre la puce (image) et le texte
Insérer une bannière image dans header de piwigo ?
comment insérer une image d'une capture écran
inserer texte arabe
Insérer une icône et un texte dans la barre adress
Aide pour insérer texte sur une adresse internet
popup image dans un texte
Plus de sujets relatifs à Inserer une image au survol d''un texte
 > Tous les forums > Forum Forum des Webmasters