Rollover immagini su mappe

[.allienato]

Hola gente

La mia situazione è questa: per un progetto avevo in mente di comporre una homepage fatta di piccole immagini "cliccabili" (ogni immagine corrisponde ad un link, alla fine sono loghi). Pensate per esempio alla cartina dell'italia suddivisa nelle regioni cliccabili.. Ho pensato subito alle mappe html come facile soluzione, però questo non risolve l'altro mio problema, ovvero il fatto di volere un rollover delle immagini (quindi quando "passo" sopra l'immagine col mouse cambi..). In sostanza con la mappa html ottengo si delle "zone cliccabili" che corrispondono alle immagini ma non so come ottenere anche un rollover aggiuntivo. Ho pensato allora alle tabelle (prendere l'intera immagine contenente i vari loghi e sezionarla per poi inserire il tutto in una tabella) ma è difficile perchè i loghi sono a livelli sfalsati..

Spiego meglio con esempio

1. In photoshop creo un'immagine da 800 x 500 pixel, sfondo nero
2. All'interno inserisco a livelli sfalsati piccoli loghi (immaginette) in modo da riempire tutta l'immagine
3. Ogni logo ha un'opacità bassa in stato normale e avrà opacità maggiore in stato "hover", questo andrà a finire nel codice html

Spero di essermi chiartio ma se servirà posterò immagine esemplicativa

soluzione?

si lo so son pazzo :berto:

[elysaweb]

io per questo uso javascript, ma forse esiste qualche soluzione in css.. prova a postare la tua richiesta lì

[.allienato]

In javascript è facile come procedimento? più che altro il javascript non lo conosco molto bene

[.allienato]

Forse ho trovato una soluzione in css, usando l'opacità ke è proprio quello ke voglio ottenere (l'immagine normale è per esempio opaca al 60% e quando ci si passa sopra diventa un 100%) solo che con la mappa ho qualche problema (ho trovato dei codici qua http://www.mandarindesign.com/opacity.html ma sono applicati a semplici immagini e non a immagini di mappe, ho provato ad applicare i div transOFF e transON ai tag <area> ma non ho risolto)

Per informazioni devo scrivere un nuovo post nella sezione dei css o me lo spostate?

[hcka]

Credo che con l'immagine mappata ci fai poco...

Prova a spezzettare l'immagine ottenendo per ogni logo sia la versione con opacità .60 sia con opacità 1. Quindi componi l'immagine totale con html e css. In fine con js o css gestisci il rollover.

Spero di essere stato chiaro...

[.allienato]

Si il problema però è che i loghi non sono su righe precise ma a livelli sfalsati, risulta piuttosto difficile spezzettarli in modo che ogni pezzetto corrisponda al singolo logo. Tuttavia mi è appena venuto in mente che se ci riuscissi posso piazzare ogni singolo logo usando i position dei css anche se credo sia dispendioso in termini di codice (essendo una ventina di loghi), potrei però far a meno di usare javascript per il rollover e far tutto in css..
proverò a verificare se questa soluzione funziona

[Bladem84]

in caso di riuscita puoi spiegare bene il procedimento e mostrare i risultati magari? devo realizzare anch'io una cosa del genere con una mappa

un altro metodo non potrebbe essere usare imageready sia per spezzettare le immagini che per il rollover e far generare il codice a lui?

[.allienato]

La soluzione con l'imageready l'ho notata anch'io cercando in giro però sinceramente non l'ho provata, magari funziona appena riesco provo

[hcka]

Originariamente inviato da .allienato
Tuttavia mi è appena venuto in mente che se ci riuscissi posso piazzare ogni singolo logo usando i position dei css anche se credo sia dispendioso in termini di codice (essendo una ventina di loghi), potrei però far a meno di usare javascript per il rollover e far tutto in css.

E io che ho detto? :master:

Per quanto riguarda i software che fanno il lavoro del programmatore: a vostra scelta. Personalmente cerco di evitare... Sennò che gusto c'è a scrivere, testare, correggere, ... ?