Switch img su uno stesso box con effetto a:hover

[Gorgoglius]

Ciao ragazzi.. ne sto uscendo pazzo!
Voglio realizzare una cosa tramite css ed eventualmente js.
Io ho una lista di prodotti e voglio che ad ogni passaggio del mouse sopra ognuno di questi (quindi con effetto hover) appaia l'img relativa in un div fisso (immaginate menu in basso e div con contenuta l'img in alto). Come si fa?
Ho provato a cercare per ore, ma non ho trovato nulla apparte questo http://www.dynamicdrive.com/style/cs...-image-viewer/ che però non è ciò che voglio!

Vi ringrazio già da ora! Ciao..

[fcaldera]

se vuoi farla con i soli css:
nel link con l'immagine aggiungi anche l'immagine di zoom però la nascondi

<div id="contenitore">
...
   <a href="#">
      [img]thumbnail.gif[/img]
      [img]zoom.jpg[/img]
   </a>
...
</div>

il css

#contenitore {
  position: relative;
}

a img.zoom {
  position : absolute;
  top: 0; right: 0; z-index: 2;
  display : none;
}

a:hover {
   direction: rtl;
}

a:hover img.zoom {
  display: block;
}

posiziona opportunamente img.zoom con top/right/bottom/left

[Gorgoglius]

Ottimo! Veramente bello.. grazie infinite!

Ho un problema però! Dovrei scindere la parola che farà da link e il tag img.. come faccio?

Io avrò un elenco di clienti a mo' di menu orizzontale e cliccando sopra ognuno si dovrà visualizzare l'immagine relativa..

Scusate il disturbo, è!!

[Gorgoglius]

Che stupido.. posso farlo benissimo da cosi..
ma secondo voi è un problema fare un lavoro del genere? Non dite che il caricamento di tutte le immagini all'apertura della pagina sia troppo pesante? Suggerite qualche altro modo?

[Gorgoglius]

Annullate pure i due post precedenti.. volevo eliminarli ma non è possibile..

Ho solo due quesiti:

1) come faccio a "memorizzare" nel div l'ultima immagine vista? Senza che scompaia una volta che non ho + il puntatore sopra il link!

2) con IE (io ho il 6) c'è un problema.. una volta che tolgo il mouse dal link l'img non sparisce e si sovrappongono tutte.. come risolvo?

Ciao!

[fcaldera]

Originariamente inviato da Gorgoglius
2) con IE (io ho il 6) c'è un problema.. una volta che tolgo il mouse dal link l'img non sparisce e si sovrappongono tutte.. come risolvo?

a:hover img.zoom {
  display: block;
  z-index : 10;
}

per la domanda 1 avresti bisogno di uno script non intrusivo che si occupa solo di ricordare l'ultima immagine vista e di mantenerla all'onmouseout sul link

ti sposto in javascript

[Gorgoglius]

Gentilissimo!

fcaldera un problema con la soluzione che mi hai postato.. mettiamo che ho img1 e img2.
Se visualizzo le due immagini e poi torno su img1 con firefox nessun problema, con IE invece l'img2 sovrappone l'img1 e quindi non viene visualizzata.. perchè? come risolvo?

Riposto invece al domanda agli esperti di js :

1) come faccio a "memorizzare" nel div l'ultima immagine vista? Senza che scompaia una volta che non ho + il puntatore sopra il link? (script non intrusivo che si occupa solo di ricordare l'ultima immagine vista e di mantenerla all'onmouseout sul link)

Grazie a tutti!

[fcaldera]

Originariamente inviato da Gorgoglius
Gentilissimo!

fcaldera un problema con la soluzione che mi hai postato.. mettiamo che ho img1 e img2.
Se visualizzo le due immagini e poi torno su img1 con firefox nessun problema, con IE invece l'img2 sovrappone l'img1 e quindi non viene visualizzata.. perchè? come risolvo?

hai provato la cosa che ti ho proposto?

[Gorgoglius]

si si ho impostato lo z-index=10!

Praticamente una volta che tolgo il puntatore dal link l'img non scompare!!

[Straystudios]

Quantunque i CSS prospettino soluzioni veramente interessanti, nel tuo caso potremmo restare a JavaScript.
L' esempio che ti posto è elementare, ovviamente bisognerà posizionare gli elementi nella pagina e far assumere delle dimensioni al Tag IMG che fa da visualizzatore; ma su questo mi sembri abbastanza "ferrato".

Avrai certamente le immagini ad un loro indirizzo filename.jpg
questi indirizzi li metti sui comandi tra le parentesi e CON VIRGOLETTE; vengono così passati di volta in volta alla function che una sola, può servire quante immagini vuoi.

Sostituisci onclick con onmouseover:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>IMG viewer Links</title>

<script type="text/javascript">

function change(largeURL){

 document.getElementById("viewer").src = largeURL;
 }

</script>

</head>
<body>

<table>
 <td>
 [img]URL_di_partenza[/img]
 </td>
 <td>
 Link 1 bla bla

 Link 2 olé olé

 Link 3 già già

 </td>
</table>


</body>
</html>