al passaggio del mouse, l'immagine diventa a colori

[essedi]

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.

[Zambelletti]

non ho ancora provato le correzioni che dici, però in linea di massima va bene.


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


provo le correzioni e ti dico

[Zambelletti]

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.

 

• 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>

Ciao, scusami ma no mi è chiaro questo passaggio...
ci provo

[Zambelletti]

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

[essedi]

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.

[Zambelletti]

Ecco :



<style type="text/css">


#sdImg1 {float: left; width: 230px; height: 154px; background: url("files/img1.jpg")}


#sdImg2 {float: left; width: 230px; height: 154px; background: url("files/img2.jpg")}


#sdImg3 {float: left; width: 230px; height: 154px; background: url("files/img3.jpg")}


#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>


Ho fatto un unico html, alto 308.


Però non si vedono le immagini a colori, forse perchè non le h inserite nel codice, provo ad inserirle.

[Zambelletti]

Allora Funziona :


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


Anche per gli altri utenti, ho utilizzato questi codici :


nella sezione head della pagina :



<style type="text/css">


#sdImg1 {float: left; width: 230px; height: 154px; background: url("files/img1.jpg")}
#sdImg1:hover {float: left; width: 230px; height: 154px;background: url("files/img1-h.jpg")}
#sdImg2 {float: left; width: 230px; height: 154px;background: url("files/img2.jpg")}
#sdImg2:hover {float: left; width: 230px; height: 154px;background: url("files/img2-h.jpg")}
#sdImg3 {float: left; width: 230px; height: 154px;background: url("files/img3.jpg")}
#sdImg3:hover {float: left; width: 230px; height: 154px;background: url("files/img3-h.jpg")}
#sdImg4 {float: left; width: 230px; height: 154px;background: url("files/img4.jpg")}
#sdImg4:hover {float: left; width: 230px; height: 154px;background: url("files/img4-h.jpg")}
</style>


un unico html, alto 308 :



<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-5.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-5.html"> </a>

[Zambelletti]

@esse Di, ma anche gli altri che stanno partecipando, oltre a ringraziarvi........colgo l'occasione per chiedervi la ragione per la quale si preferisce mappare le immagini, piuttosto che questo metodo.


Inoltre, se il layout fosse diverso, con più immagini e di dimensioni diverse.......
è comunque consigliabile latro metodo?
Se volessi proseguire con questo, il segreto sta nel disporre correttamente le finestre html?


Vedi allegato


Grazie!

[essedi]

Allora Funziona :


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


Anche per gli altri utenti, ho utilizzato questi codici :


nella sezione head della pagina :



<style type="text/css">


#sdImg1 {float: left; width: 230px; height: 154px; background: url("files/img1.jpg")}
#sdImg1:hover {float: left; width: 230px; height: 154px;background: url("files/img1-h.jpg")}
#sdImg2 {float: left; width: 230px; height: 154px;background: url("files/img2.jpg")}
#sdImg2:hover {float: left; width: 230px; height: 154px;background: url("files/img2-h.jpg")}
#sdImg3 {float: left; width: 230px; height: 154px;background: url("files/img3.jpg")}
#sdImg3:hover {float: left; width: 230px; height: 154px;background: url("files/img3-h.jpg")}
#sdImg4 {float: left; width: 230px; height: 154px;background: url("files/img4.jpg")}
#sdImg4:hover {float: left; width: 230px; height: 154px;background: url("files/img4-h.jpg")}
</style>


un unico html, alto 308 :



<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-5.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-5.html"> </a>

Prova a distribuire l'oggetto HTML sull'intera riga e vedrai che il tuo metodo non funziona.

[Zambelletti]

ma dici che non funziona relativamente all'immagine allegata?
Perchèin quel caso, suppongo che debbo fare più html

[essedi]

ma dici che non funziona relativamente all'immagine allegata?
Perchèin quel caso, suppongo che debbo fare più html

Ma hai effettuato la prova che ti ho suggerito?

[Zambelletti]

Eccomi, ho allargato html portandolo a tutta larghezza e infatti non funziona.

[essedi]

Eccomi, ho allargato html portandolo a tutta larghezza e infatti non funziona.

CVD (Come Volevasi Dimostrare)

[Zambelletti]

Infatti me lo aspettavo anche io, perchè credo di aver capito che per ottenere questa disposizione, bisogna accostare "n" finestre html, fissandone l'altezza.
Giusto?
Così riesco  realizzare un immagine tipo quella allegata?

[essedi]

Infatti me lo aspettavo anche io, ...............

Non ho capito perché, se ti aspettavi un risultato negativo, hai interpretato a modo tuo il codice suggerito, consigliandolo "anche per gli altri utenti".