ciao a tutti !
Ho un widget dove dentro ci sono delle info ... Vorrei fare che quando il navigatore passa sopra il widget compaia in semi trasparenza una piccolo freccia, o comunque una immagine a mia scelta ...
Vi allego una immagine esempio che ho fatto con photoshop;
Sapete come posso fare questo effetto automaticamente con l'aiuto dei Css o tramite Js ?
grazie !!
beh, è piuttosto semplice in realtà.
Il widget è un DIV o un link??? Mettiamo che sia un DIV con delle dimensioni (larghezza, altezza) forzate in px. L'aspetto normale lo definisci mettendo la prima delle 2 immagini che hai mostrato, come sfondo del DIV. Poi con la pseudo classe :hover (quindi con qualcosa tipo DIV#widget:hover) sostituisci lo sfondo con la seconda immagine, che hai generato in photoshop.
Detto brutalmente, così funziona... poi ovviamente si può raffinare la tecnica, ma prima è utile che tu capisca come funziona questa, che è la più semplice...
grazie 1000 per la risposta !
Ho dimenticato di dirti che è un div ...
Dentro questo div c'è una immagine più una descrizione, che non ho messo nell'esempio ...
Questo div ha un'altezza e larghezza esatta quindi ho fatto con photoshop una immagine, con uno sfondo opaco bianco e con una freccia, delle stesse dimensioni del div, e fin qui nessun problema.
Ma dato che ho molti div, tutti uguali in altezza e larghezza, ma di contenuto diverso, come posso fare a far sovrapporre ad ogni div questa immagine opaca al passaggio con il mouse ?
Con la soluzione che mi hai dato, dovrei fare una immagine/hover apposito per ogni div, ma occuperei spazio e consumerei banda ...
Sai come posso fare ?!
Sì beh, chiaro che per esigenze così (come del resto ti avevo citato) si possono scegliere anche soluzioni un po' più furbe
Nel tuo caso non sarebbe un problema particolarmente grave, dovresti crearti una versione png dell'immagine con la freccia (tale formato supporta la semi-trasparenza) da sovrapporre quando necessario.
Il problema è che per sovrapporre devi per forza farlo su un altro div interno... Quindi sei costretto a modificare il markup facendo in modo che ogni widget sia composto da due DIV annidati. Quello più esterno avrà come sfondo l'immagine principale, quello più interno (con le stesse dimensioni del primo) nello stato "normale" non avrà sfondo, mentre nello stato "hover" prenderà come sfondo l'immagine della freccia!
ok perfetto ! ho capito come fare ...
Ora ci provo e ti faccio sapere ... Caso mai non riesco mi aiuteresti ?!
Ti aiuto ma non te lo faccio.... eheheheh
Se non riesci, posta un link a una versione semplificata (magari 1 solo widget con le 2 immagini) così vediamo cosa manca!!!
ho fatto tutto, ma non funziona, o meglio l'immagine-hover va sotto l'immagine del container ...
Altra cosa, non sarebbe meglio usare un js ?
Ecco i css:
Ecco Html:codice:#widget { border-color: #e6e6e6; border-width: 3px; border-style: solid; background-image: url(media/img/widget-bg.png); width: 180px; height: 210px; margin-right: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px; } #widget-container:hover { width: 200px; height: 230px; background-image: url(media/img/widget-hover.png); } #widget a { text-decoration: none; color: black; } #widget h1 { text-align: center; margin: 0px 0px 10px 0px; } #widget img { }
codice:<div id="widget"> <div id="widget-container"> <a href="#"> <h1 style="font-size:18px;">Leodorlando.org</h1> [img]media/img/preview/leo.png[/img] </a> </div> </div>
Io ti aiuto però.... tu devi anche leggere ciò che ti scrivo......
Ti ho scritto di postare un "link" in modo che potessi provare in diretta il problema, e invece posti il codice.
Ti ho chiesto nello specifico un link con codice semplificato e mi posti un codice con le regole degli angoli arrotondati, margini laterali, ecc.....
Ok, non è grave, ma costringi chi ti aiuta, non solo a comprendere il problema, ma anche a fare l'ulteriore sforzo di comprendere il problema solo con l'immaginazione leggendo il codice, e in più trascurando mentalmente tutte le righe non necessarie....
In ogni caso ci sono senz'altro errori evidenti... devi impostare le dimensioni del widget e ANCHE quelle del widget-container (trascurando che logicamente il secondo dovrebbe contenere il primo e non viceversa... container significa "contenitore" non "contenuto"...)
Inoltre... il div più interno ha dimensioni maggiori di quello esterno!?!?!? Ovvio che così hai dei problemi, non credi???
Ecco il link: http://andreagerm.altervista.org/new/
Hp modificato il container facendolo 1 pixel più piccolo, ma fa lo stesso errore ...
Quando entri, vai su Portfolio !!!"
Grazie ancora !!
Vabbè senti.... non mi ascolti, io non so più che fare... ho la netta sensazione che leggi ciò che ti scrivo a 300 all'ora, capisci il 10% e di conseguenza non fai ciò che ti chiedo.............
Mi spiace, ho cercato di aiutarti ma se non ascolti dedico tempo ad altri..... RILEGGI ciò che ti ho scritto nei messaggi precedenti e fai TUTTO quello che c'è scritto.... mi spiace, non ho tempo di ripetere cose già scritte.............
P.S.: Dovrebbe essere assolutamente chiaro, ma ovviamente mi aspetto una pagina con SOLO il widget, senza testi di riempimento, banner, sfondi, altri pulsanti, JavaScript, css che non c'entra nulla e altro!!!!
Permessi di invio
Rispondi quotando