Cambiare il colore di un blocco

[AyeyeBrazorv]

Ragazzi ho in un css 4 blocchi con 4 immagini (fanno da puzzle in pratica).
Questi blocchi hanno 2 bottoni ognuno.
C'è modo per farsì che se clicco sul bottone rosso, si colora di rosso lo sfondo (senza però coprire l'immagine sotto ma solo colorarla un po'. Tipo un'altra immagine sovrapposta ma opaca), se clicco sul bottone blu si colora di blu lo sfondo? Devo creare una funzione javascript o si può fare da css?

[cavicchiandrea]

Se le immagini non sono sullo sfondo ma dentro un div e hanno la trasparenza potresti risolvere solo con i css con hover, se non è cosi si complica un po dovrai usare più div con posizioni assolute e giocare sullo zIndex per spostare la profondità degli oggetti.

[AyeyeBrazorv]

Originariamente inviato da cavicchiandrea
Se le immagini non sono sullo sfondo ma dentro un div e hanno la trasparenza potresti risolvere solo con i css con hover, se non è cosi si complica un po dovrai usare più div con posizioni assolute e giocare sullo zIndex per spostare la profondità degli oggetti.

Io stavo pensando di costruirmi altri 8 blocchi 4 rossi (trasparenti però) e 4 blu...
E di mettere le immagini relative nel div...
Solo che non so come fare a fa in modo che se ho cliccato un bottone mi si visualizza il blocco giusto e gli altri mi si rendono invisibili

[cavicchiandrea]

onclick="document.getElementById('tuo-id').style.display='none';"

[AyeyeBrazorv]

Originariamente inviato da cavicchiandrea
onclick="document.getElementById('tuo-id').style.display='none';"

Questo automaticamente disabilita anche gli altri?

[cavicchiandrea]

No vale un id (blocco) più id più document... davo per scontato che un minimo (nozioni basilari) di js le conoscessi

[AyeyeBrazorv]

Originariamente inviato da cavicchiandrea
No vale un id (blocco) più id più document... davo per scontato che un minimo (nozioni basilari) di js le conoscessi

Non me la cavo benissimo con il javascript... Però un minimo l'ho imparato... Solo che il metodo display non ho mai ben capito come usarlo. display='none' disabilita un blocco? Io però volevo metterli di default tutti invisibili e attivare il blocco che clicco

[cavicchiandrea]

Originariamente inviato da AyeyeBrazorv
Non me la cavo benissimo con il javascript... Però un minimo l'ho imparato... Solo che il metodo display non ho mai ben capito come usarlo. display='none' disabilita un blocco? Io però volevo metterli di default tutti invisibili e attivare il blocco che clicco

Be... mi sembra tu abbia molto confusione, forse è il caso che ripassi.


P.S. Io ho capito cosa vuoi fare, e t'ho dato le indicazione per farlo, mettici un po di buona volontà.

[dimoshake]

non farebbe prima ad usare l'ajax cambiando direttamente il colore dello sfondo?
function cambiacolore(){
var e = document.getElementById("nomeblocco")
if(e.style.background ="blu"){
e.style.background ="red";
}else{
e.style.background ="blu";
}
}
questa funzione verra poi richiamata dal bottone

[cavicchiandrea]

Originariamente inviato da dimoshake
non farebbe prima ad usare l'ajax cambiando direttamente il colore dello sfondo?
...

A) Nel tuo codice non vedo nessuna chiamata ajax ma una semplice funzione.
B) Uno che non conosce che display nasconde un elemento dubito possa implementare chiamate ajax

Ma forse unendo le forse risolvete il problema.