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.
quello che tu hai scritto, l'ho interpretato in questo modo :
<style type="text/css">
</style>
#sdImg1 {float: left; width: 230px; height: 154px; background: url("files/img1.jpg")}
</style>
#sdImg2 {float: left; width: 230px; height: 154px; background: url("files/img2.jpg")}
</style>
#sdImg3 {float: left; width: 230px; height: 154px; background: url("files/img3.jpg")}
</style>
#sdImg4 {float: left; width: 230px; height: 154px; background: url("files/img4.jpg")}
</style>
<a id="sdImg1" href="http://www.pdagrafica.com/Personale/test/pda/pagina-6.html"> </a>
<a id="sdImg2" href="http://www.pdagrafica.com/Personale/test/pda/pagina-6.html"> </a>
<a id="sdImg3" href="http://www.pdagrafica.com/Personale/test/pda/pagina-6.html"> </a>
<a id="sdImg4" href="http://www.pdagrafica.com/Personale/test/pda/pagina-6.html"> </a>
ma non esce niente
Elimina tutte le righe con </style> eccetto l'ultima: non capisco dove le hai viste nei miei messaggi.
@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 (http://www.essedi.altervista.org/_sito/con-css.html)
Un esempio dell'applicazione del sistema descritto può essere visto a questo indirizzo
http://www.essedi.altervista.org/_rollover/index.html (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.
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
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.