[javascipt-css] menu cambiare sfondo alla classe dipendenta dall' id

**jabjoint** · 06-07-2008, 16:38

Ciao a tutti ho il seguente codice.
Nel file css ho abbinato l' uso degli ID con quello della Class, pensando di risparmiare un pò di codice non ripetendo il codice dell' id BOX creando 3 classi dipendenti:

file.css

div#box{
background-image:url(img.jpg);
width:100px;
border-left: 2px solid #000000;

}
/*dipendente da box*/
div#box.a{ top:0px; left:0px; }
div#box.b{ top:-80px; left:102px; }
div#box.c{ top:-160px; left:204px; }

file.htm

file.js

function cambia(val)
{
var el = document.getElementById('box');
el.stye.backgroundImage='url(cambiaimg.jpg)';

}

Il file.js mi cambia lo sfondo del mio id-box ma solo del primo corrispondente alla classe a nemmeno di tutti.

Io vorrei poter cambiare lo sfondo di ognuna delle mie classi è possibile???
Grazie in anticipo ciao

**cavicchiandrea** · 06-07-2008, 17:15

Se ho capito, per praticità ho usato i colori ma puoi benissimo usare l'immagini:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript">
function Sfondo(colore){
var DIV = document.getElementsByTagName("div")
for(var i=0; i<DIV.length; i++){
DIV[i].style.backgroundColor=colore
}
}
</script>
<style media="screen" type="text/css">
.box{border:#99FF00 solid 1px; margin:5px;}
</style>
</head>

<body>
<select name="colori" onchange="Sfondo(this.options[this.selectedIndex].value)">
  <option value="#ff0000">Rosso</option>
  <option value="#ffff00">Giallo</option>
  <option value="#00FF00">Verde</option>
  <option value="#0000FF">Blu</option>
</select>
<div id="box" class="box">Inserire qui il contenuto per  id "box"</div>

<div id="box2" class="box">Inserire qui il contenuto per  id "box2"</div>

<div id="box3" class="box">Inserire qui il contenuto per  id "box3"</div>

<div id="box4" class="box">Inserire qui il contenuto per  id "box4"</div>

</body>
</html>

ricontrolla anche le classi non credo si scrivano cosi, ricordati che ID devo essere univoci

**jabjoint** · 06-07-2008, 20:31

E' esettamente quello che mi serviva, ti ringrazio molto mi hai chiarito bene le idee, utilizzavo in modo opposto l' id e la classe.

Discussione: [javascipt-css] menu cambiare sfondo alla classe dipendenta dall' id

Strumenti discussione

Ricerca discussione

Visualizza

[javascipt-css] menu cambiare sfondo alla classe dipendenta dall' id

Permessi di invio