div cliccabili e cambio classe

[markogeek]

Buongiorno a tutti, sto cercando di creare una griglia trasparente da sovrapporre ad un'immagine, per consentire di selezionare alcune celle della griglia
ed inviare tramite post ad una pagina che ne registrasse i dati su un db MySql.

Infine recuperare i dati inseriti per ricomporre la medesima griglia rendendo visibili i bordi delle celle a video.

Per la creazione della griglia avevo pensato a dei div

che si nidificano all'interno di un div contenitore

il tutto contenuto in un modulo con un pulsante di invio

1 problema mentre riesco con i css a rendere visibile la cella al passaggio del mouse
no riesco a rendere evidente il click sullo stesso, devo far cambiare la classe al div immagino con javascript ma non lo conosco

2 problemaCliccato il div devo trasferire il valoreal campo nascosto presente nel modulo per consentirmi di inviarlo al database

<div id="contenitore">
<div class="cella" id="a1"></div>
<div class="cella" id="a2"></div>
<div class="cella" id="a3"></div>
<div class="cella" id="a4"></div>
</div>

[mirkoagrati]

Ciao,
per cambiare la classeCSS di un componente con JavaScript fai così:

document.getElementById("IdComponente").style.clas s = "NUOVA_CLASSE_CSS".

Per valorizzare un campo di testo con il valore della cella,
invece, fai così:
<td onclick="setValue(this)">cccccc</td>

function setValue(elem){
document.getElementById("IdCampoTesto").value = elem.innerHTML;
}

Fammi sapere
Ciao

[markogeek]

Se ho capito bene...
<style type="text/css">
.cella {
height: 98px;
width: 98px;
border: 1px solid #330099;
}
.cellaact {
height: 98px;
width: 98px;
border: 1px solid #FF0000;
}

</style>
<script>
document.getElementById("IdComponente").style.clas s = "attiva".

function setValue(elem){
document.getElementById("IdCampoTesto").value = elem.innerHTML;
}

</script>

<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="1" class="cella" onclick="setValue(this)">cccccc</td>
<td id="2" class="cella" onclick="setValue(this)">cccccc</td>
</tr>
<tr>
<td id="3" class="cella" onclick="setValue(this)">cccccc</td>
<td id="4" class="cella" onclick="setValue(this)">cccccc</td>
</tr>
</table>



Ho fatto ma non mi funziona, ovvero non mi cambia il css

In ogni caso è possibile anzi che usare le tabelle usare i div ?

ho provato
<div class="cella" id="1" onclick="setValue(this)">cccccc</div>

non mi funziona

dove sbaglio?

[Xinod]

document.getElementById("IdComponente").className = "attiva"

[markogeek]

partendo dal presupposto che no so nulla di javascript ho riprovato così


<style type="text/css">
.cella {
height: 98px;
width: 98px;
border: 1px solid #330099;
}
.attiva {
height: 98px;
width: 98px;
border: 1px solid #FF0000;
}

</style>
<script>

document.getElementById("IdComponente").className = "attiva"

function setValue(elem){
document.getElementById("IdCampoTesto").value = elem.innerHTML;
}

</script>

<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="1" class="cella" onclick="setValue(this)">cccccc</td>
<td id="2" class="cella" onclick="setValue(this)">cccccc</td>
</tr>
<tr>
<td id="3" class="cella" onclick="setValue(this)">cccccc</td>
<td id="4" class="cella" onclick="setValue(this)">cccccc</td>
</tr>
</table>


il problema è che non mi clicca nulla non funziona

Dove sbaglio?

[lake86]

Da quello che vedo Idcampotesto e idcomponente non esistono indi per cui devi sostituirli con valori reali

[markogeek]

Idcampotesto e idcomponente non esistono indi per cui devi sostituirli con valori reali...

mi potresti esemplificare?
perchè non capisco come fare per sostituirli...
ovvero
IdComponente è l'id della td?

e
IdCampoTesto è il contenuto della cella ovvero cccccc?

Dovrei quindi mettere
document.getElementById("1").className = "attiva"

function setValue(elem){
document.getElementById("cccccc").value = elem.innerHTML;
}

?


<style type="text/css">
.cella {
height: 98px;
width: 98px;
border: 1px solid #330099;
}
.attiva {
height: 98px;
width: 98px;
border: 1px solid #FF0000;
}

</style>
<script>

document.getElementById("IdComponente").className = "attiva"

function setValue(elem){
document.getElementById("IdCampoTesto").value = elem.innerHTML;
}

</script>

<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="1" class="cella" onclick="setValue(this)">cccccc</td>
<td id="2" class="cella" onclick="setValue(this)">cccccc</td>
</tr>
<tr>
<td id="3" class="cella" onclick="setValue(this)">cccccc</td>
<td id="4" class="cella" onclick="setValue(this)">cccccc</td>
</tr>
</table>

[Xinod]

Originariamente inviato da markogeek
IdComponente è l'id della td?

si'
ma non puoi scrivere
<script>
document.getElementById("IdComponente").className = "attiva"
</script>

prima che l' elemento in questione sia definito nell' xhtml,
quindi o
<table>...blablabla tra cui <td id="IdComponente">...
</table>
<script>
document.getElementById("IdComponente").className = "attiva"
</script>

oppure
<script>
window.onload=function(){document.getElementById(" IdComponente").className = "attiva"}
</script>

che equivale a
<body onload='document.getElementById("IdComponente").cl assName = "attiva"'>

l' istruzione cosi' viene eseguita al termine del caricamento e javascript sa di cosa stai parlando

P.s. "1" non e' un id valido, non possono essere solo numerici o iniziare per numero

IdCampoTesto è il contenuto della cella ovvero cccccc?

una cella non ha value, un campo testo di un form ne avrebbe
se ti serve rilevare l' html contenuto in un td usa innerHTML anche in lettura

document.getElementById("cccccc").innerHTML = elem.innerHTML;