immagine cliccabile - cambio colore
Buongiorno a tutti,
il mio intento è creare un immagine cliccabile e fare in modo che l'immagine al passaggio del mouse cambi tonalità, appunto per evidenziare il fatto che sia cliccabile.
La prima parte mi riesce, la seconda no.
Ho proceduto in questo modo:
ho inserito un nuovo blocco, all'interno del blocco ho inserito un immagine e configurando le proprità di quest'ultima l'ho resa cliccabile con collegamento esterno.
La seconda parte non mi riesce.
Ho letto http://www.graficicreativi.com/web-design/14565-immagine-cliccabile-che-...
e al #10 sembra spiegato molto bene.
Quindi ho proceduto a crearmi l'immagine doppia.
Ho analizzato attraverso il browser il div che in questo caso viene chiamato block-block-1
e ho modificato style.css aggiungendo le regole per block-block-1.
Non funziona, So che c'è qualcosa che non regge ma i miei attuali limiti non mi permettono di capire cosa.
Un saluto a tutti, Andrea.
Risposte
Ciao, hai modificato il file
Ciao, hai modificato il file style.css del tema, giusto? Devi provare a disabilitarlo e poi riabilitarlo (il tema) così carica il foglio di stile modificato (immagino tu abbia già prvato a fare un refresh della pagina, quindi se anche aggiornando con il browser non si vedono le modifiche, prova come di ho suggerito qui sopra).
Fa sapere, ciao ciao.
Grazie Niubbo75, si ho
Grazie Niubbo75,
si ho modificati quello, ho provato a disabilitare il tema e a riabilitarlo ma nulla.
Più dettagliatamento quello che ho fatto:
Creo un immagine doppia, ossia sopra scura e sotto chiara, o viceversa.
inserisco un nuovo blocco e nel nuovo blocco inserisco un'immagine e la rendo cliccabile inserendo l'url di collegamento.
vado a vedere on-line e l'immagine c'è nella sua interezza, ovvero sia il sopra che il sotto.
tasto destro sull'immagine, analilizza elemento e il div dovrebbe essere questo
<div id="block-block-1" class="block block-block">
Quindi vado su style.css
e faccio
#block-block-1 {
background-position:center top;
background-repeat:no-repeat;
cursor: pointer;
height:55px;
width:220px;
}
#block-block-1:hover {
background-position:center bottom;
}
A questo punto, on-line, cambia qualcosa, cambia la posizione dell'immagine (sempre doppia, intera), si abbassa, ma l'effetto che voglio no.
Dove sbaglio?
Ciao, la classe l'hai
Ciao, la classe l'hai definita?
Io generalmente faccio così:
span.roll {
background: url("images/overlay.png") no-repeat scroll center center #000;
height: 94%;
position: absolute;
width: 100%;
z-index: 10;
}
Creo la classe e poi creo l'effetto con i css, bisogna vedere com'è il tuo tema, come è stato pensato e scritto.
Purtroppo non ho capito, la
Purtroppo non ho capito, la classe non è
class="block block-block"
<div id="block-block-1" class="block block-block">
Così come mi stai consigliando, non ho più bisogno di una doppia immagine?
Posso linkare la pagina su cui sto lavorando?
Purtroppo non ho capito, la
Non saprei, non so che tema tu stia utilizzando.
Come vedi io ne utilizzo una che crea un effetto "opacizzante" su tutte le immagini quando sono nella condizione "mouse over", non importa quante immagini "pulite" io debba linkare, l'effetto generato è sempre il medesimo.
Sì puoi linkare quello che vuoi, basta che non sia puro e semplice SPAM o materiale di dubbio gusto (pornografia, pedo pornografia, immagini di politici del PD e relativi siti/blog...) poi per il resto linka pure il sito al quale stai lavorando, così magari si capisce anche meglio.
ecco il
ecco il link
http://www.bestitalianproperty.com/it/chi-siamo
vedi in alto "roma" con l'areoplanino, l'immagine preparata è sdoppiata, in parte prende le indicazioni date perchè si abbassa fino a coprire il blocco sottostante,
ma se io ho indicato a div la metà dell'altezza, dovrebbe apparire per metà.
edit
dimenticavo, io non ho badato a dove inserire in style.css quelle righe sopra elencate.
Per comodità sono piuttosto in cima...
Ciao, se definisci una classe
Ciao, se definisci una classe dedicata (come l'esempio che ti ho postato io) allora non importa dove metti il codice all'interno del foglio di stile, ma se invece vuoi modificare una classe esistente, allora devi identificarla all'interno del foglio di stile ed andare poi ad apportare le modifiche necessarie.
Io preferisco creare una classe ad hoc in modo da poterla utilizzare ovunque mi serva e solo dove mi serve, mi spiego meglio, se modifichi la classe del blocco, poi tutti i blocchi avranno quella classe e, di conseguenza, quella caratteristica; se al contrario definisci una nuova classe e poi la applichi solo a quello che ti occorre (che sia all'interno del corpo di una pagina o di un blocco) rimane più "elastica" la cosa.
Spero di esser stato chiaro :-)
Non per avere la pappa
Non per avere la pappa pronta, purtroppo le mie attuali capacità non mi consentono di capire.
Purtroppo non mi è chiaro come relazionare il blocco che creo in struttura e poi associarlo in style.css, non mi è nemmeno chiaro il concetto classe e l'associazione al mio div.
...
Ci sono riuscito ma so di mio
Ci sono riuscito ma so di mio di aver fatto un giro contorto.
Ricapitolando:
vado in struttura e faccio un nuovo blocco, all'interno del nuovo blocco inserisco un immagine (quella doppia, chiaro, scuto) che collego ad un indirizzo url per il click.
Sia in class che in id metto block-block-1 e in stile metto display: none;
poi in style.css
#block-block-1 {
background-image: url(/images/image.png);
background-position:center top;
background-repeat:no-repeat;
cursor: pointer;
height:55px;
width:220px;
}
#block-block-1:hover {
background-position:center bottom;
}
Penso che ci sia un giro di troppo ma funziona.
Ciao, non hai fatto un
Ciao, non hai fatto un passaggio in più, hai affrontato il problema diversamente rispetto me, ma questo non vuol dire che sia sbagliato, sono solo due modi differenti :-)
Tu vai a creare un'immagine "doppia" e fai cambiare la posizione dell'immagine, mentre io faccio sovrapporre una seconda immagine a quella originale creando un effetto overlay, alla fine ottieni un risultato diverso dal mio, ma che comunque penso sia quello che tu desideravi. Io dalla mia ho la "semplicità" di poter inserire le immagini tali e quali senza "duplicarle" per creare l'effetto. :-)
Grazie Niubbo75 per la
Grazie Niubbo75 per la pazienza.
> Tu vai a creare un'immagine
> Tu vai a creare un'immagine "doppia" e fai cambiare la posizione dell'immagine,
nell'editor Tiny questa funzione è compresa, funzioni avanzate del tastino immagine.
Grazie 56francesco non ho mai
Grazie 56francesco non ho mai provato Tiny. Questo potrebbe essere la scusa per testarlo.
Andrea