HTML / CSS

Donc voila dans le but de rechercher a apprendre de nouvelles choses en html et css je voulais avoir votre avis et de l'aide pour accomplir ce que j'étais en train de faire :p

Code html:

Code:

[url=http://serious-art.aforumfree.com/page2.html][/url]

Code CSS:

a
{
background-image: url("boutonCPNB1.png")
}
a:hover
{
background-image: url("boutonCPNB2.png")
}

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

Donc le but rechercher est de faire une mini animation pour agréer un site static fait en html. Ce que je voulais faire c'était que lorsque l'on passe sont curseur sur le bouton "BoutonCPNB1.png" le bouton "BoutonCPNB2.png" prenne sa place mais seulement voila lorsque je regarde le résultat rien n'est afficher alors je me suis dit faisons autrement et j'ai mis ca:

Code html:

Code:

[url=http://serious-art.aforumfree.com/page2.html]azzefzfzfzefzfzef[/url]

car je pensais que vu qu'il n'y avait rien d'écrit ca ne pouvait rien afficher, mais alors j'ai "azazrafafazfazfazfazff" qui s'affiche par dessus ( logique ^^ )
Aperçu:


J'espère que mes explications on été clair et merci de me repondre.

Yop, pour ce genre de manip, tu n'as pas besoin de css, juste du html pure .

Voici le code :

Code:

<a href="http://serious-art.aforumfree.com/page2.html" onmouseover="document.getElementById('photo1').src = ''boutonCPNB2.png" onmouseout="document.getElementById('photo1').src ='boutonCPNB1.png';"><img id="photo1" src="boutonCPNB1.png"border=0 /></a>

onmouseover : Quand la souris est sur le bouton .
onmouseout : Quand la souris n'est pas sur le bouton.

Si tu veux mettre plusieur code de mouseover sur ta page il faudra que tu mettes au lieu de ('photo1') tu mettes ('photo2') au code d'apres ('photo3') .

le border=0 c'est pour ne pas avoir de bordure autour de l'image comme cette derniere est un lien, mais je ne pense pas que ça soit valide w3c . Au pire tu le fous dans la div de tes mouseover dans le css.

Je t'aide si tu vote pour le battle xD (j fais du chantage moi ?)

Nan sérieusement, un bon site pour apprendre les bases html css si tu veux, c est
http://www.siteduzero.com/

Merci Tal, mais j'ai tout appris de la ^^ mais je n'ai pas trouver comment faire. Mais merci quand meme.

Et pour en revenir a Pixel Art merci bcp

donc ca donnerai ca ?

[code]

Mais sinon y a un autre truc, j'avais essayer une fois.
Tu fais un bouton avec photoshop, et en fait apres avec imageready je crois tu fais un genre d'animation (en fait tu duplique ton bouton avec des opacité différente par exemple et tu met 1 image par 0.2s on va dire, et donc ca défile comme ca et on a l'impression que le bouton s'enfonce, et enfin avec NVU (la aussi je suis plus tres sur), tu fait un ptit code et hop, ca te fait un effet rolling over (ca je suis sur ).

oui, ça pourrait être pas mal mais je ne sais pas du tout comment on fait ce genre d'animation ^^

Je retrouve pas celui que je cherchais, je vais intensifier les recherches :p
Sinon y'a une autre méthode, mais l'effet est moins pofiné on va dire
lien tuto (il faut imageready par contre) : http://www.crystalxp.net/forum/fr/tuto-graphiques/Tuto-ImageReady/sujet_9798_1.htm

LeFrancai5 a écrit:

Merci Tal, mais j'ai tout appris de la ^^ mais je n'ai pas trouver comment faire. Mais merci quand meme.

Et pour en revenir a Pixel Art merci bcp

donc ca donnerai ca ?

Code:

[url=http://serious-art.aforumfree.com/page2.html][img]boutonCPNB1.png[/img][/url]

mais je vois pas a quoi sert ceci:

Code:

[url=http://serious-art.aforumfree.com/page2.html][img]boutonCPNB1.png[/img][/url]

ces une bête question mais je préfère comprendre tout mtn que de devoir y revenir plutard

PS: mes question est entourer des balise de couleur; je ne pouvais pas la mettre en couleur ^^

hein ? je t'ai donné le code, tu as juste à l'insérer dans le code via notpad++ ou un autre.

désoler mais je n'arrivai pas a l'afficher en gros je voulais savoir si je devait mettre ceci: "document.getElementById('photo1') en fait il n'y a même pas la moitier de ce que je voulais afficher qui s'affiche >.< et je m'énerve tout seul car je fait plusieurs chose en meme temps

EDIT: si je te dis, ca ne fonctionne pas tu voudrais bien vérifier ? :'(

Ouaip, pas de soucis .

merci beaucoup et si d'autres personnes on des idées n'hésiter pas !

J'AI TROUVER!

code HTML:

Code:

<<a class="image" title="le type qui a fait ca c un bogoss" href="page2.html"></a>>

code CSS:

Code:

.image
{
display: block;
width: 130px;
height: 30px;
background-image: url("boutonCPNB1.png");
background-repeat: no-repeat;
}
   
.image:hover
{
background-image: url(boutonCPNB2.png);
}

LeFrancai5 a écrit:

J'AI TROUVER!

code HTML:

Code:

<le type qui a fait ca c un bogoss>

+1 xD, bien joué

A la place de document.get......src
On peut mettre this.src, this = l'objet courant.

L'attribut border sur une image est deprecated, (déprécie), il ne faut plus l'utiliser. Préférer son équivalent en CSS.

Sinon ton dernier code est bien.

Si on veut afficher un background sur un lien, il faut absolument changer le display du lien en block, sinon on ne peut pas specifier de hauteur/largeur.

Petit plus, la directive background peut s'ecrire sur une seule ligne.
background: url("boutonCPNB1.png") no-repeat;

Merci pour ces explications ^^.
Seconde étape: le server apache...

haha, bonne chance :p

La chance n'as rien a voir la dedans.
Surtout en apache c'est clair net et precis.

J'oserais presque dire que la configuration est simple . Mais bon ca depend quel option et le niveau que l'on a :p.

Ben j'essaye de l'installer sous vista et je lutte pour trouver une version qui fonctione. Enfin j'ai plus l'impression que c'est un programme qui a comme "service" le server apache et donc j'ai un peu de mal a trouver.

luuna a écrit:

La chance n'as rien a voir la dedans.

C'est pas au sens premier, c'est plus l'expression d'encouragement .

Oula, je viens de penser a un truc...
J'ai le code pour changer d'image quand je passe mon curseur sur le bouton, mais quand je click dessus comment fait on pour changer l'image a ce moment la ?

Meme code avec onclick, il doit y avoir aussi onmousedown

Pour un listing complet le SEUL site vraiment valable et parfaitement utilisable une fois que l'on a bien compris comment chercher dedans.

http://www.w3schools.com/htmldom/dom_obj_event.asp
Voici la liste des events utilisables.

En cliquant sur un event :
http://www.w3schools.com/htmldom/event_onmousedown.asp
Tu peux voir sur quelle balise tu peux placer cet event.

Pour installer apache, le plus simple est d'installer WAMP pour window, LAMP linux et MAMP Mac.
C'est un Pack comprenant Apache, MySQL et PHP. C'est tres fonctionnel, tout integre et tres facil d'emploi.
Ce n'est rien de plus qu'un pack avec les 3 applications, mais en plus simple a installer. Pour VISTA ne n'ai pas d'info sur des difficultes d'utilisations ou installations. Eventuellement je pourrais appeler un ami qui tourne sous vista qui serait suceptible de tester. Ou d'avoir la reponse.

Merci beaucoup Luuna ton site ma montrer une partie de ma recherche mais j'essaye de bien différencier le HTML du CSS et de ne pas les mélanger pour bien m'y retrouver et j'ai trouver:

code CSS:

Code:

.image:active
{
background-image: url(boutonCPNB3.png);
}

et ca fonctionne

Oublie pas bien verifie que ca marche sur IE et Firefox en meme temps. Car meme si maintenant c'est plutot pas mal, il y a des choses que supporte FF et pas IE.

Sinon les evenements onmouseover etc.. c'est du javascript, entre les " " on execute du code javacript. Tu peux d'ailleurs placer plusieur commande a suivre separer par des ';'.