al passaggio del mouse, l'immagine diventa a colori

[Zambelletti]

Scusa ma allora il codice è sbagliato?
Credevo che fosse giusto.
Mi aspettavo che non funzionava, se distribuivo l'oggetto html su tutta la riga, perchè credevo che l'arcano del corretto funzionamento fosse la disposizione dell'oggetto html.
Da quello che dici, mi pare di capire che il codice è sbagliato, e che deve funzionare comunwque a prescindere dalla disposizione.


Allora, cortesemente..........mi aiuti a capire dov'è sbagliato e come lo posso correggere?


Grazie!

[essedi]

Scusa ma allora il codice è sbagliato?
Credevo che fosse giusto.
Mi aspettavo che non funzionava, se distribuivo l'oggetto html su tutta la riga, perchè credevo che l'arcano del corretto funzionamento fosse la disposizione dell'oggetto html.
Da quello che dici, mi pare di capire che il codice è sbagliato, e che deve funzionare comunwque a prescindere dalla disposizione.


Allora, cortesemente..........mi aiuti a capire dov'è sbagliato e come lo posso correggere?


Grazie!

Non ho capito che cosa dovrei  aggiungere a quanto spiegato qui, anche perché non saprei fare di meglio.

 https://www.unofficialwsx5.com/index.php?topic=1072.msg7942#msg7942

C'è scritto (credo in modo abbastanza chiaro, ma non vorrei peccare di  immodestia)

 
Nella pagina inserisci due oggetti HTML, uno sull'altro, a cui assegni queste caratteristiche:
 

• Margine Esterno ed Interno uguale a zero
• Altezza 80 (la stessa delle immagini)

Che cosa suggerisci tu, affermando che funziona?

un unico html, alto 308 :

[essedi]

Per chi fosse interessato al problema, ho aggiornato l'esempio del sito

     http://www.essedi.altervista.org/_rollover/index.html

dove, oltre al sistema dl rollover immagini tramite CSS, è riportato anche il metodo tramite mappatura immagine.

[Zambelletti]

@Esse Di,
ciao ho guardato il link al tuo tutorial, ovviamente ti faccio le congratulazioni per la chiarezza e per la disponibilità che ti contraddistingue.


Allora ho letto i codici, e sono del tutto uguali a quelli che mi avevi precedentemente dato :

 
Ipotesi di di base

 

• le 4 immagini normali si chiamano img1.jpg, img2.jpg, img3.jpg, img4.jpg
• le 4 immagini colorate si chiamano img1-h.jpg, img2-h.jpg, img3-h.jpg, img4-h.jpg (h sta per hover)
• tutte le immagini hanno dimensioni 120 x 80 pixel

Operazioni da effettuare

In Proprietà della Pagina, Scheda Esperto, Prima del tag </HEAD> inserisci queste righe
<style type="text/css">
.sdImg {float: left; width: 120px; height: 80px;}
#sdImg1 {background: url("files/img1.jpg")}
#sdImg1:hover {background: url("files/img1-h.jpg")}
#sdImg2 {background: url("files/img2.jpg")}
#sdImg2:hover {background: url("files/img2-h.jpg")}
#sdImg3 {background: url("files/img3.jpg")}
#sdImg3:hover {background: url("files/img3-h.jpg")}
#sdImg4 {background: url("files/img4.jpg")}
#sdImg4:hover {background: url("files/img4-h.jpg")}
</style>


Nella pagina inserisci due oggetti HTML, uno sull'altro, a cui assegni queste caratteristiche:
 

• Margine Esterno ed Interno uguale a zero
• Altezza 80 (la stessa delle immagini)

Nel primo oggetto HTML inserisci questo codice:
<a class = "sdImg" id="sdImg1" href="link1"> </a>
<a class = "sdImg" id="sdImg2" href="link2"> </a>
 
Nel secondo oggetto HTML inserisci questo codice:
<a class = "sdImg" id="sdImg3" href="link3"> </a>
<a class = "sdImg" id="sdImg4" href="link4"> </a>
 
link1, link2, link3, link4 sono gli indirizzi delle pagine a cui vuoi trasferire il controllo al click sulle singole immagini (questo hai detto che lo sai fare).

 Tutte le immagini vanno caricate nella cartella files tramite il comando "Aggiungi" della Scheda Esperto di un oggetto HTML.
 
Questo  sistema funziona, ma non è il migliore per ottener il tuo obiettivo. Meglio andrebbe il sistema di mappatura delle immagini tramite CSS, descritto qui


Un esempio dell'applicazione del sistema descritto può essere visto a questo indirizzo
http://www.essedi.altervista.org/_rollover/index.html

avevo eseguito e funzionava :


www.pdagrafica.com/Personale/test/pda/pagina-10.html


Successivamente hai fatto delle correzioni :

mi sembra chiarissimo, dopo mi metto con calma e vedo.
Poi ti dico, intanto, grazie mille........vedo che hai fatto un codice per l'occasione.

 

In parte è vero, e forse ho commesso un errore.

Il codice presente sul mio sito è valido per ogni singola immagine. L'unica aggiunta necessaria per il tuo caso era la proprietà "float: left" per tenere unite due immagini in orizzontale all'interno dello stesso oggetto HTML. Può tranquillamente essere aggiunta alle altre proprietà di ogni singolo ID ed il tutto funziona ugualmente.

In considerazione del fatto che le 4 immagini avevano in comune le dimensioni, mi sono lasciato prendere la mano e le ho inserite in una classe, insieme alla suddetta proprietà float.

Con il senno del poi, ritengo che sia stato un errore, avendo generato l'impressione della necessità di un codice diverso da quello esemplificato nel mio sito (il che non è).

Per rendersene conto è sufficiente:

• eliminare la classe sdImg
• inserire il contenuto della classe eliminata negli ID delle singole immagini, per esempio "#sdImg1 {float: left; width: 120px; height: 80px; background: url("files/img1.jpg")}"
• eliminare il riferimento alla classe sdImg nel codice degli oggetto HTML, ad esempio <a id="sdImg1" href="link1"> </a>

Ribadisco che personalmente utilizzerei il sistema della mappatura delle immagini.

Che ho provato a mettere in atto :


www.pdagrafica.com/Personale/test/pda/pagina-12.html


Rispetto ai tuoi suggerimenti.......ho solo modificato l'altezza del html, perchè le immagini erano più grandi e con proporzione diversa.


Ad ogni modo, Grazie infinitamente per tutto!
Ti debbo una pizza.

[essedi]

 

Mi rendo conto che non sempre riesco a farmi capire come vorrei (e non ci sono riuscito neanche questa volta).

Tu affermi:

"Successivamente hai fatto delle correzioni":

Non erano delle correzioni. Il sistema più corretto era il primo, avendo eliminato delle ridondanze.

Infatti spiegavo

"............................... Con il senno del poi, ritengo che sia stato un errore, avendo generato l'impressione della necessità di un codice diverso da quello esemplificato nel mio sito (il che non è).

Per rendersene conto è sufficiente: ............."

L'errore consiste nell'avere generato l'impressione che il codice fosse diverso da quello esemplificato nel mio sito (il che non è).

I due codici sono sostanzialmente uguali, a parte la peoprietà float. "Per rendersene conto " effettuare la prova suggerita. Ma solo per "rendersi conto dell'equivalenza".

Tra i due preferisco di gran lunga quello che raggruppa le caratteristiche comuni alle quattro immagini in una classe piuttosto che ripeterle nell'ID di ognuno di esse.

 

Ma fin qui poco male.

Quello che non sono riuscito a farti capire neanche con l'ultimo mio post è la differenza sostanziale tra il mio sistema e la tua variazione.

Eppure qui mi sembrava di essere stato chiaro

Nella pagina inserisci due oggetti HTML, uno sull'altro, a cui assegni queste caratteristiche:

    Margine Esterno ed Interno uguale a zero

    Altezza 80 (la stessa delle immagini)

Che cosa suggerisci tu, affermando che funziona?

un unico html, alto 308 :

Ora tu rispondi

Rispetto ai tuoi suggerimenti.......ho solo modificato l'altezza del html, perché le immagini erano più grandi e con proporzione diversa.

La differenza non sta nelle dimensioni: quelle bisogna adattarle (ci mancherebbe altro).

La differenza sta tra "due oggetti HTML, uno sull'altro" e "un unico oggetto HTML" .

Spero di essere stato un po' più chiaro.

Però credo che a questo punto convenga chiuderla qui.

Per quanto riguarda la pizza: una pizza da Michele a Forcella o da Cafasso vale più di una cena.

Ciao

[Zambelletti]

ok, chiarissimo tutto!


Non ho parole per ringraziarti e spero di contare sempre su di te.


Ma sei di Napoli?


EDIT : non è che non sei ciìhiaro tu, sono io che faccio fatica a starti dietro.


Ancora grazie!

[essedi]

Ma sei di Napoli?

No, non sono di Napoli, ma, essendoci stato per un po' di tempo, conosco ed apprezzo la vera pizza napoletana.

[Zambelletti]

Ciao essedi, pensavo di aggiungere una variante, non al tuo esempio online, ma all'esempio che hai fatto apposta per me.


Vorrei che l'immagine in hover, comparisse con una transizione : tendina orizzontale o verticale.


Ho provato ad inserire questo codice :


<script type="text/javascript">'effect': 'horizontalSlide'}</script>


ma non funziona, probabilmente è sbagliato il codice oppure dove l'ho posizionato.


potresti aiutarmi a realizzare questo effetto?
Grazie!

[essedi]

Ciao essedi, pensavo di aggiungere una variante, non al tuo esempio online, ma all'esempio che hai fatto apposta per me.


Vorrei che l'immagine in hover, comparisse con una transizione : tendina orizzontale o verticale.


Ho provato ad inserire questo codice :


<script type="text/javascript">'effect': 'horizontalSlide'}</script>


ma non funziona, probabilmente è sbagliato il codice oppure dove l'ho posizionato.


potresti aiutarmi a realizzare questo effetto?
Grazie!

No, non posso aiutarti. Come puoi facilmente verificare, in nessuno dei miei esempi sono presenti effetti di transizione. Sono contrario alle varie animazioni, in quanto, secondo me, distolgono l'attenzione dai contenuti del sito.

Ma, anche volendo, il codice che hai postato

<script type="text/javascript">'effect': 'horizontalSlide'}</script>

è completamente incomprensibile (almeno per me).

Ho letto che Lemonsong ti ha "prestato" dei libri. Vedo che non hai ancora trovato il tempo di leggerli. Anche io, come altri, ti consiglerei di farlo.

[Zambelletti]

grazie comunque.

[Zambelletti]

Sono riuscito a trovare un esempio on line che ho implementato in wsx5, e funzionava.
Poi ovviamente  ho avuto bisogno di personalizzarlo, togliendo quello che non mi interessava e inserendo l'immagine in hover, solo che mi fa difetto.


Almeno qualcuno potrebbe aiutarmi a capire dov'è l'errore e come correggere?


LINK

Grazie a chiunque voglia aiutarmi.

[lemonsong]

Se ho capito bene, è sempre il "solito" errore di percorsi.

In questo CSS (cartella css):

http://www.pdagrafica.com/Personale/test/pda/css/style5.css

... il percorso dell'immagine in bianco e nero deve/può essere modificato così:

.view-fifth .mask {
   background: url(../images/1-h.jpg);

bla bla bla
}

Se ho capitio bene...

[Zambelletti]

FUNZIONA! GRAZIE!

LINK

Ti ringrazio tanto. Provo ad adattarlo ulteriormente alle mie esigenze, che consiste nell'avere nella stessa pagina "n" box del genere.
Speriamo che funzioni.
Grazie ancora.


accumuliamo altri 2/3 aiutini così e il pranzo è pagato!

[milux]

continuando di questo passo tra poco dovrai prenotare un ristorante completo..

[lemonsong]

Speriamo che non sia cibo di plastica... come i fiori  (scherzo eh)