Discussion :

[jerome44600]

Bonjour @ tous !

Je suis tout nouveau sur ce forum et tout nouveau sur le langage HTML ! Je ne connais rien-du-tout.

Je me lance dans la création d'un site web, et j'aurai besoin d'informations sur le HTLM pour m'aider et pour apprendre !

----------------------------------------------------------------------------

Je souhaiterai créer une image qui m'envoie vers un lien lorsqu'on clic dessus.

Quand la sourie n'est pas placée sur le bouton, l'image est noir.


Quand la sourie est placée sur le bouton, l'image est rouge.


Merci de m'aider, j'adorerai apprendre les codes HTMP :p

A bientôt, Jérôme.

[thelvin]

C'est surtout un trick CSS, en fait. Ça peut aussi se faire avec du JavaScript.

Voici une présentation de la technique :
http://inspectelement.com/tutorials/...g-css-sprites/

[jerome44600]

Bonjour !

Merci beaucoup, c'est super !

Le code qui est donné sur le site, c'est du HTLM ou du CSS ?

[thelvin]

CSS. Pour voir le code HTML sur lequel le CSS s'applique pour faire un bouton, yapluka regarder le code source de la page.

[jerome44600]

Ok.

Je ne comprend pas très bien les explications que tu m'a fournis, peux tu m'expliquer si tu as le temps ?

Merci cbp

[thelvin]

Non, la page que je t'ai donnée est assez claire.

Si tu veux apprendre une technologie, je ne peux pas te "l'expliquer". 'Faut prendre des cours, ou lire des bouquins ou des tutoriels, p'tit gars.

[jerome44600]

Tu n'a vraiment pas compris... JE NE CONNAIS RIEN

je ne sais même pas ce que cela signifie :

a.button {
background: url(../images/button.png) no-repeat 0 0;
width: 186px;
height: 52px;
display: block;
text-indent: -9999px;
}

Voila pourquoi je te demande de l'aide !!

[jerome44600]

Finalement j'ai trouvé : allez ici http://www.net-pratique.fr/outils/generoll.html

générateur gratuit avec lien super

[{F-I}]

On ne pouvait pas utiliser a:hover pour afficher l'image rouge lors du survol de la souris ?

Cela simplifie pas mal non ?

[thelvin]

C'est en ça que consiste la technique dont j'ai donné le lien.
Elle ajoute aussi le fait que l'image de passage au-dessus est chargée en même temps que l'image normale, puisque c'est en fait un seul fichier image.

Je ne pense pas que ce soit plus simple que le truc autogénéré en JavaScript, parce que la technique CSS doit forcément être décomposée dans deux sections de code distinctes : le code CSS et le code HTML qui place le bouton lui-même.
Alors que la technique JavaScript permet un seul bout de code HTML avec une balise script dedans, qui dispense de réfléchir.