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

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

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

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

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.

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

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/

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 ??

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

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

merci beaucoup dreamer

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

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

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 !!

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

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

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.

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/

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...

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 !!

Ça vaut mieux pour toi!

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.

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

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

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

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

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

Une 'tite lecture...

http://maboite.qc.ca/site_web-style.php

elle a écrit :

Une 'tite lecture...

http://maboite.qc.ca/site_web-style.php

Excellente présentation de ce qu'il faut savoir , le reste n'est que de la pratique .....Je simplifie là aussi !!

merci à vous de m'aider c'est très gentil. Bon ben j'ai beaucoup de lecture à avoir d'un coup. Je vous tiens au courant et encore emrci.

Dreamer excuse moi je ne peux encore te montrer mon travail car je galère je ne comprends plus rien alors je suis complètement perdue à savoir si je dois faire un css bref j'avoue que je patauge dans la semoule.

Pour essayer de faire simple... une feuille de style (CSS=cascading style sheet) n'est rien d'autre qu'un fichier texte qui va conditionner en tout ou partie l'aspect d'une page codée en (X)HTML.
Ultra-simple ou ultra-complexe, tu en trouveras quelques utilisations ici : http://css.mammouthland.net/.
Dans le cas qui t'intéresse (effet de rollover), jette un oeil là : http://css.mammouthland.net/rollover-pseudo-classe-css-hover.php.