Appel fonction javascript dans propriétés css [Résolu/Fermé]

Signaler
-
 Ludo -
Bonjour bonjour,

Après de longues minutes de recherches sur google et les forums... je n'ai pas trouver comment faire changer la couleur de fond d'une certaine div avec "onmouseover"...

Donc globalement j'ai trouvé un javascript qui me permet d'obtenir une couleur aléatoire. Il est réglé pour changer le fond de la page (body>bgcolor) ce qui ne m'intéresse pas. Il faudrait juste que je réoriente cette fonction vers ma div en question plutôt que le bgcolor, cependant je n'ai aucune idée de la syntaxe à utiliser.

Tout d'abord, le code java que j'ai maintenant:

<script language="javascript">

function getrandom() {
var a1;
var b1;
var c1 ;
var d1 ;
var e1 ;
var f1 ;

var a = Math.round(Math.random()*16);
if (a==0) { a1="0";}
if (a==1) { a1="1";}
if (a==2) { a1="2";}
if (a==3) { a1="3";}
if (a==4) { a1="4";}
if (a==5) { a1="5";}
if (a==6) { a1="6";}
if (a==7) { a1="7";}
if (a==8) { a1="8";}
if (a==9) { a1="9";}
if (a==10) { a1="A";}
if (a==11) { a1="B";}
if (a==12) { a1="C";}
if (a==13) { a1="D";}
if (a==14) { a1="E";}
if (a==15) { a1="F";}


var b = Math.round(Math.random()*16);
if (b==0) { b1="0";}
if (b==1) { b1="1";}
if (b==2) { b1="2";}
if (b==3) { b1="3";}
if (b==4) { b1="4";}
if (b==5) { b1="5";}
if (b==6) { b1="6";}
if (b==7) { b1="7";}
if (b==8) { b1="8";}
if (b==9) { b1="9";}
if (b==10) { b1="A";}
if (b==11) { b1="B";}
if (b==12) { b1="C";}
if (b==13) { b1="D";}
if (b==14) { b1="E";}
if (b==15) { b1="F";}

var c = Math.round(Math.random()*16);
if (c==0) { c1="0";}
if (c==1) { c1="1";}
if (c==2) { c1="2";}
if (c==3) { c1="3";}
if (c==4) { c1="4";}
if (c==5) { c1="5";}
if (c==6) { c1="6";}
if (c==7) { c1="7";}
if (c==8) { c1="8";}
if (c==9) { c1="9";}
if (c==10) { c1="A";}
if (c==11) { c1="B";}
if (c==12) { c1="C";}
if (c==13) { c1="D";}
if (c==14) { c1="E";}
if (c==15) { c1="F";}

var d = Math.round(Math.random()*16);
if (d==0) { d1="0";}
if (d==1) { d1="1";}
if (d==2) { d1="2";}
if (d==3) { d1="3";}
if (d==4) { d1="4";}
if (d==5) { d1="5";}
if (d==6) { d1="6";}
if (d==7) { d1="7";}
if (d==8) { d1="8";}
if (d==9) { d1="9";}
if (d==10) { d1="A";}
if (d==11) { d1="B";}
if (d==12) { d1="C";}
if (d==13) { d1="D";}
if (d==14) { d1="E";}
if (d==15) { d1="F";}

var e = Math.round(Math.random()*16);
if (e==0) { e1="0";}
if (e==1) { e1="1";}
if (e==2) { e1="2";}
if (e==3) { e1="3";}
if (e==4) { e1="4";}
if (e==5) { e1="5";}
if (e==6) { e1="6";}
if (e==7) { e1="7";}
if (e==8) { e1="8";}
if (e==9) { e1="9";}
if (e==10) { e1="A";}
if (e==11) { e1="B";}
if (e==12) { e1="C";}
if (e==13) { e1="D";}
if (e==14) { e1="E";}
if (e==15) { e1="F";}
   
var f = Math.round(Math.random()*16);
if (f==0) { f1="0";}
if (f==1) { f1="1";}
if (f==2) { f1="2";}
if (f==3) { f1="3";}
if (f==4) { f1="4";}
if (f==5) { f1="5";}
if (f==6) { f1="6";}
if (f==7) { f1="7";}
if (f==8) { f1="8";}
if (f==9) { f1="9";}
if (f==10) { f1="A";}
if (f==11) { f1="B";}
if (f==12) { f1="C";}
if (f==13) { f1="D";}
if (f==14) { f1="E";}
if (f==15) { f1="F";}


document.bgColor=(a1+b1+c1+d1+e1+f1) 
 }
document.onmouseover=getrandom;
</SCRIPT>


Ensuite voici la structure et l'id de la div:

<body style="font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Sans-serif; font-size:12;">

<div id="menu">
<div id="menu_box">
  <div id="menu_title">L'objet qui suit&nbsp;</div>
  <br><div id="menu_carre" style="background:{emplacement de la couleur à insérer}"></div><a href="javascript:void(0);">Haut Gauche</a>
  <br><a href="javascript:void(0);">Haut Droite</a>
  <br><a href="javascript:void(0);">Bas Gauche</a>
  <br><a href="javascript:void(0);">Bas Droite</a>
</div>
</div>


Voilà, j'espère que les connaisseurs ont toutes les infos à disposition pour m'indiquer aisément une astuce... :/

Merci beaucoup ;)
Ludo

2 réponses


document.bgColor=(a1+b1+c1+d1+e1+f1) a cet endroit tu change les codes ( les a1 .. b1 .. etc.. ).

Je crois que c'est ça, mais je suis plus spécialisé en html et xml.
Salut Tom-Z, merci pour la réponse.

Cependant je me suis peut être pas exprimé correctement, mon problème n'est pas dans la définition de la couleur, mais dans l'appel de cette couleur depuis la propriété background de ma div. (id="menu_carre" en l'occurence)

Qu'en dis tu?

C'est quoi ton soft ?
La je code avec notepad++... je n'utilise pas de soft spécial. J'ai juste commencé une page, après je l'adapterais à un thème wp avec le php, séparerais le css dans une feuille et tout... Tiens je te met tout mon code, ya peut être une coquille quelque part ailleurs, mais j'ai essayé de ne pas en faire :p...

<html><head>

<style type="text/css"> 
.imageflottante 
{ 
 float:right; margin: 20 0 20 20;
}	
.imageflottante2
{ 
 float:left; margin: 20 20 20 0;
}	
.imageflottante3
{ 
 float:left; margin: 5 5 0 0;
}
p {
margin:0 0 20 0; text-align:justify;
}
h2 {
font-size:24; font-weight:bold; margin: 0 0 30 0;
}
.carre {
float:left; background:#FF9900; width:17; height:17; margin: 6 5 0 0;
}
#menu_box {
/*  position : absolute; /* IMPERATIF */
  left : 0px;
  top : 160px;
  color : #000000;
  font-size : 13px;
  font-family : Verdana;
  text-align : left;
  padding: 0 0;
  background-color : #fff;
  height : 150px;
  width  : 130px;
  z-index : 1000;
}
#menu_box a {
text-decoration:none; color:#000; padding: 0 5;
}
#menu_box a:hover {
font-weight:bold;
}
#menu_carre {
float:left; width:10; height:10; margin: 3 5 0 0;
}
#menu_title {
  background : #fff;
  color : #000;
  font-size : 13px;
  font-family : Verdana;
  font-weight: bold;
  text-align : left;
}
#content {
left:100; top:100; width:600; height:800; padding:150 0 0 200;
}
</style> 

<script type="text/javascript" src="gf_scroll_div.js"></script>
<script type="text/javascript">
////////////////////////
// fonction pour Test //
////////////////////////
var MAX_Y = 10000;
var MAX_X = 10000;
//---------------------------
function Deplace_Doc( x_, y_){
  window.scrollTo( x_, y_);
  return(true);
}
</script>

<script language="javascript">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

function getrandom() {

var a1;
var b1;
var c1 ;
var d1 ;
var e1 ;
var f1 ;

var a = Math.round(Math.random()*16);
if (a==0) { a1="0";}
if (a==1) { a1="1";}
if (a==2) { a1="2";}
if (a==3) { a1="3";}
if (a==4) { a1="4";}
if (a==5) { a1="5";}
if (a==6) { a1="6";}
if (a==7) { a1="7";}
if (a==8) { a1="8";}
if (a==9) { a1="9";}
if (a==10) { a1="A";}
if (a==11) { a1="B";}
if (a==12) { a1="C";}
if (a==13) { a1="D";}
if (a==14) { a1="E";}
if (a==15) { a1="F";}


var b = Math.round(Math.random()*16);
if (b==0) { b1="0";}
if (b==1) { b1="1";}
if (b==2) { b1="2";}
if (b==3) { b1="3";}
if (b==4) { b1="4";}
if (b==5) { b1="5";}
if (b==6) { b1="6";}
if (b==7) { b1="7";}
if (b==8) { b1="8";}
if (b==9) { b1="9";}
if (b==10) { b1="A";}
if (b==11) { b1="B";}
if (b==12) { b1="C";}
if (b==13) { b1="D";}
if (b==14) { b1="E";}
if (b==15) { b1="F";}

var c = Math.round(Math.random()*16);
if (c==0) { c1="0";}
if (c==1) { c1="1";}
if (c==2) { c1="2";}
if (c==3) { c1="3";}
if (c==4) { c1="4";}
if (c==5) { c1="5";}
if (c==6) { c1="6";}
if (c==7) { c1="7";}
if (c==8) { c1="8";}
if (c==9) { c1="9";}
if (c==10) { c1="A";}
if (c==11) { c1="B";}
if (c==12) { c1="C";}
if (c==13) { c1="D";}
if (c==14) { c1="E";}
if (c==15) { c1="F";}

var d = Math.round(Math.random()*16);
if (d==0) { d1="0";}
if (d==1) { d1="1";}
if (d==2) { d1="2";}
if (d==3) { d1="3";}
if (d==4) { d1="4";}
if (d==5) { d1="5";}
if (d==6) { d1="6";}
if (d==7) { d1="7";}
if (d==8) { d1="8";}
if (d==9) { d1="9";}
if (d==10) { d1="A";}
if (d==11) { d1="B";}
if (d==12) { d1="C";}
if (d==13) { d1="D";}
if (d==14) { d1="E";}
if (d==15) { d1="F";}

var e = Math.round(Math.random()*16);
if (e==0) { e1="0";}
if (e==1) { e1="1";}
if (e==2) { e1="2";}
if (e==3) { e1="3";}
if (e==4) { e1="4";}
if (e==5) { e1="5";}
if (e==6) { e1="6";}
if (e==7) { e1="7";}
if (e==8) { e1="8";}
if (e==9) { e1="9";}
if (e==10) { e1="A";}
if (e==11) { e1="B";}
if (e==12) { e1="C";}
if (e==13) { e1="D";}
if (e==14) { e1="E";}
if (e==15) { e1="F";}
   
var f = Math.round(Math.random()*16);
if (f==0) { f1="0";}
if (f==1) { f1="1";}
if (f==2) { f1="2";}
if (f==3) { f1="3";}
if (f==4) { f1="4";}
if (f==5) { f1="5";}
if (f==6) { f1="6";}
if (f==7) { f1="7";}
if (f==8) { f1="8";}
if (f==9) { f1="9";}
if (f==10) { f1="A";}
if (f==11) { f1="B";}
if (f==12) { f1="C";}
if (f==13) { f1="D";}
if (f==14) { f1="E";}
if (f==15) { f1="F";}



color=(a1+b1+c1+d1+e1+f1);
print:color;
 }
document.onmouseover=getrandom;
print:color;
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->


</head>
<body style="font-family: Trebuchet MS, Lucida Grande, Arial, Helvetica, Sans-serif; font-size:12;">

<div id="menu">
<div id="menu_box">
  <div id="menu_title">L'objet qui suit&nbsp;</div>
  <br><div id="menu_carre" style="background:getrandom();"></div><a href="javascript:void(0);" onclick="Deplace_Doc( 0, 0);">Haut Gauche</a>
  <br><a href="javascript:void(0);" onclick="Deplace_Doc( MAX_X, 0);">Haut Droite</a>
  <br><a href="javascript:void(0);" onclick="Deplace_Doc( 0, MAX_Y);">Bas Gauche</a>
  <br><a href="javascript:void(0);" onclick="Deplace_Doc( MAX_X, MAX_Y);">Bas Droite</a>
</div>
</div>

<div id="content">
<div class="carre"></div><h2>Lorem ipsum n'est pas un texte aléatoire...</h2>
<p><img src="l.jpg" class="imageflottante3" alt="Image flottante" />orem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum, dolor luctus pretium imperdiet, quam lorem facilisis massa, eu eleifend arcu lectus non sapien. Curabitur non eros magna, ullamcorper convallis magna. Mauris posuere, tellus vitae imperdiet auctor, nisi odio sodales nibh, cursus fringilla tellus lorem in nunc. Sed nunc ante, vestibulum non pellentesque a, lacinia nec diam. Phasellus suscipit pretium pellentesque. Mauris metus ante, tincidunt non dictum ac, dapibus eget elit. Etiam risus tortor, condimentum et lobortis vitae, rutrum non nibh. Mauris eleifend, leo ut consequat varius, nulla velit blandit nisl, sit amet viverra urna tortor id mi. Proin ornare porta dolor eget hendrerit. Pellentesque sed metus non turpis pellentesque tristique vel ut leo. Nullam laoreet tincidunt accumsan. Morbi ultrices viverra odio eget aliquet. Donec scelerisque euismod mi, in consequat lorem pharetra a. Morbi tempus malesuada ultricies. Sed in pulvinar massa. Pellentesque turpis turpis, hendrerit eu sodales a, facilisis nec lacus. Praesent sapien ipsum, tincidunt non varius sed, aliquam et odio. Cras tincidunt aliquet rutrum. Curabitur elementum scelerisque ipsum, eget iaculis nisl elementum vitae.</p>
<p>Integer vel nulla eget massa luctus vulputate. Etiam faucibus leo a odio ullamcorper non accumsan nisi dapibus. Ut semper scelerisque augue id fermentum. Proin leo arcu, feugiat vel varius posuere, rutrum a felis. Vestibulum rhoncus ligula at nulla faucibus tristique. Maecenas euismod varius pulvinar. Mauris pellentesque tortor vel elit rhoncus quis tempus neque sagittis. Mauris sed aliquet tellus. Aliquam bibendum erat id purus varius tincidunt. <img src="latin.jpg" class="imageflottante" alt="Image flottante" />Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam in ligula eros, non pulvinar neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque at libero sapien. Sed convallis turpis eget metus euismod pulvinar. Donec facilisis sollicitudin bibendum.</p>

<p>Morbi vel lorem id nunc vulputate feugiat eu at nisl. Donec ligula neque, egestas id rhoncus ut, sagittis eu sem. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non diam eu diam dapibus egestas et et urna. <img src="latin.jpg" class="imageflottante2" alt="Image flottante" />Duis ullamcorper mi nec nibh vehicula id pretium diam hendrerit. Maecenas laoreet, nulla sed interdum rutrum, nunc nisi placerat quam, vitae semper felis turpis vel lectus. Sed sit amet porttitor mi. Integer eget euismod purus.</p>
<p>Curabitur eget neque nec dui pulvinar eleifend. In a felis ut mauris egestas suscipit. Sed sit amet imperdiet felis. Pellentesque id nunc eu odio eleifend ornare. Quisque sit amet lacus id velit iaculis pharetra non in erat. Suspendisse viverra tellus eget metus gravida et ultricies velit venenatis. Vestibulum cursus aliquet orci non gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque facilisis interdum urna, sed pulvinar est lacinia in. Fusce scelerisque pharetra porttitor. Aliquam felis ipsum, rhoncus a dapibus ac, pulvinar non dui. Mauris risus justo, fermentum vel pharetra at, malesuada cursus neque. Nam ipsum mi, tempor ut bibendum sit amet, ultrices in dolor. Praesent non ligula non mi varius ultrices. Aliquam enim diam, dictum non imperdiet non, commodo vel est.</p>
</div>

</body>
Hey j'ai trouvé qqch à cette adresse,tout est un problème de référenceur: http://www.journaldunet.com/...

Cela fonctionne, reste plus qu'à bien cibler le onmouseover pour ne pas que ce soit sur tout le document...

Merci je pense que je devrai y arriver à tatons maintenant.

Merci pour ton aide,
Ludo