Achetez et vendez votre matériel multimédia d'occasion sur notre service de petites annonces informatiques gratuites

Bouton sur grafisme

Forum informatique > Aide graphisme > Bouton sur grafisme

<<<1>>>

[Page 1 sur 1 - 10 messages]
Informations Messages

mickael

Avatar de mickael
59 messages
Disquette
Disquette

Lien direct Le 06 Octobre 2008 à 16h30

Bonjour a tous,
voila j'ai une petite question.
Je fait mes sites internet tout seul, et pour la nouvelle version qui va venir, je voudrai le rendre un peu plus ' sophistiqué '
Donc voila, ma page principal sera faite d'un graphisme ou il y aura biensûr des bouton, fait sous forme 'rectangulaire' avec une photo à l'interieur.
Le but :
J'aimerai pouvoir realiser quelque chose qui donnerai sa : Les photos sont en noir et blanc, et quand on passe la souris sur le bouton pour aller cliquer dessus, la photo devient en couleurs....

J'aimerai savoir la manip a faire, je pense avec flash ? car je ne sais pas utiliser flash encore....

Merci a tout ceux qui vont me repondre et bonne continuation a tous Clin d'oeil

mickaCool

 

ExTy

Avatar de ExTy
2776 messages
Geek
Geek
AidoGraphiste
AidoGraphiste

Lien direct Le 06 Octobre 2008 à 17h02

Salut a toiClin d'oeil

Por ce que tu veux faire cela nécessite que tu le code en CSS il n'y a pas de flash la dedans

Exemple ==>

Menu

Ça c'est le menu pour mon site par exemple il n'y a aucune image Flash mais 3 image Sourire

Une image déroule ==>


Une image enroule ==>


Et une image normal ==>


Code CSS

Code


#menu
{
float: left;
width: 200px;
}

.navigation {
margin: 0;
padding: 0;
list-style: none;
background: #000;
color: #fff;
width: 200px;
font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
display: block;
padding: 4px 10px;
color: #fff;
text-decoration: none;
background: #000 url(menu-item.png) left bottom no-repeat;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
background-image: url(menu-item-deroule.png);
}
.navigation .open a, .navigation .open span {
background-image: url(menu-item-enroule.png);
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
text-decoration: underline;
}
.navigation .subMenu {
font-size: .8em;
background: #ccc url(subMenu.png) 0 0 repeat-x;
font-size: .9em;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
}
.navigation ul.subMenu a {
background: none;
padding: 3px 20px;
}



le .navigation serre justement a faire un menu déroulant comme celui ci.

Pourquoi suivre une société quand celle-ci ne suit pas l'humanité ?
 

Grinto

Avatar de Grinto
326 messages
Processeur
Processeur

Lien direct Le 06 Octobre 2008 à 19h54

sa ressemble plus a du javascipt non ?

 

ExTy

Avatar de ExTy
2776 messages
Geek
Geek
AidoGraphiste
AidoGraphiste

Lien direct Le 06 Octobre 2008 à 20h21

Ba oui mais je viens quand même de donnez le code CSS je donnez le code entier de mon site aussi :-P

Pourquoi suivre une société quand celle-ci ne suit pas l'humanité ?
 

mickael

Avatar de mickael
59 messages
Disquette
Disquette

Lien direct Le 06 Octobre 2008 à 20h24

EN m'excusant, j'ai pas trop compris la demarche a suivre...

Sachant que ma page de presentation reste ' une image ', je fait donc des selection sur mes parties ou je veux faire des liens,

si je suis ta demarche je suis obliger de decouper mon graphisme ?

 

ExTy

Avatar de ExTy
2776 messages
Geek
Geek
AidoGraphiste
AidoGraphiste

Lien direct Le 06 Octobre 2008 à 20h48

Je ne te suis pas moi aussi Rougis

Pourquoi suivre une société quand celle-ci ne suit pas l'humanité ?
 

mickael

Avatar de mickael
59 messages
Disquette
Disquette

Lien direct Le 07 Octobre 2008 à 16h22

Je vais essayer d'être plus clair LOL !

Voici une creation de la page principal de mon site web, soit, une image compléte :
[img]//quadeur45.free.fr/aido1.JPG[/img]

Pour la suite je transfére donc dans dreamweaver cette image, et pour créer des liens, j'utilise les fonctions suivante ( en rouge ), Et jusqu'a la, rien de bien extraordinaire, juste des simple liens,

[img]//quadeur45.free.fr/aido2.JPG[/img]
Et la chose que j'aimerai, se serais que c'est liens (image) soit en noir et blanc, et une fois que la souris passe dessus, l'image devient en couleurs...

Est ce possible ? Confus
micka Clin d'oeil

 

ExTy

Avatar de ExTy
2776 messages
Geek
Geek
AidoGraphiste
AidoGraphiste

Lien direct Le 07 Octobre 2008 à 16h53

J'ai expliquer en aux :-P

J'ai du mal m'exprimer pardonne moi

Alors

Code CSS

Code

a:hover
{

}



Alors se code signifie "Au passage de la souris" c'est a dire que quelque chose changera au passage de la souris donc, si tu a ton code qui est comme ça ==>

Code CSS

Code


a
{

}



Sa devrait être comme ça normalement Rougis
Tu a dans le code la l'image avec le lien.

Tu n'a qu'a rajouter le

Code CSS

Code

a:hover
{

}



Avec le lien et l'image en noir et blanc

(Je fait tout pour que tu comprenne)
Alors la je tes donne tout le code

Code

a
{

/*Ton image*/

}

a:hover
{
*/Et l'image en noir et blanc
}





Normalement c'est ça Rougis J'espère que je m'exprime bien Rougis

Pourquoi suivre une société quand celle-ci ne suit pas l'humanité ?
 

mickael

Avatar de mickael
59 messages
Disquette
Disquette

Lien direct Le 07 Octobre 2008 à 19h36

Rougis
Je suis vraiment desoler mais la, je panne rien Rougis Ah l'informatique quand tu nous tient... Clin d'oeil

voici le code de ma page avec juste l'image insérer :

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#000000">
<div align="center">
<p><img src="fond2.png" width="960" height="560"></p>
</div>
</body>
</html>



Et voici le nouveau code quand je sourligne une image avec un "carré vert" pour faire un lien...

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#000000">
<div align="center">
<p><img src="fond2.png" width="960" height="560" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="644,175,768,298" href="#">
</map>
</p>
</div>
</body>
</html>



( C'est les deux même photos poster precedement Clin d'oeil )

 

ExTy

Avatar de ExTy
2776 messages
Geek
Geek
AidoGraphiste
AidoGraphiste

Lien direct Le 07 Octobre 2008 à 20h24

Arff tu code le CSS directement dans le xHTML
Je comprend pourquoi tu comprend pas

Désoler mais je ne comprend pas trop le le CSS quand il est dans le xHTML


Un modo peut déplacer dans dans le section Aide créa et gestion de site

Pourquoi suivre une société quand celle-ci ne suit pas l'humanité ?
 

<<<1>>>

[Page 1 sur 1 - 10 messages]

Forum informatique > Aide graphisme > Bouton sur grafisme