[JS] visualizzare un'immagine quando si passa col mouse sopra un'altra

**iacchi** · 04-10-2005, 22:25

È la prima volta che mi addentro dentro la programmazione js, perciò vi chiedo di essere clementi

Vi spiego quello che dovrei fare: io ho nella pagina un'immagine che per qualche motivo è ridimensionata e non si vedere per bene. Io vorrei che quando vado sopra questa immagine comparisse a schermo la stessa immagine però a dimensioni naturali.
Ora, da grande newbie, avevo individuato due metodi:
1. fare una funzione da richiamare con onmouseover per cui quando si passa sopra l'immagine viene scritto il codice della seconda e quindi visualizzato
2. scrivere subito i codici di tutte e due però tenere nascosta la seconda immagine, facendola visualizzare, sempre tramite javascript richiamato da onmouseover, quando si passa sopra la prima.

Ora: per il primo caso ho provato questo:

codice:

<script type="text/javascript">
function zoom(){
 document.write("<img src=\"abstract.png\" class=\"zoom\" alt=\"Screenshot\">")
}
</script>

e però appena mi sposto solo l'immagine scompare tutta la pagina e tenta di caricare non so cosa all'infinito. Per il secondo caso invece non ho la più pallida idea di come procedere; so solo che non posso usare GetElementById perché tutte le immagini in questione hanno l'attributo class e non id.
Un'ultima cosa: l'esempio che ho portato sopra presuppone una sola immagine per pagina. Dato che, però, le immagini da far passare sotto zoom sono più di una, sarebbe utile poter passare l'immagine come parametro nella funzione.

**Andrea1979** · 05-10-2005, 10:09

posta il codice di una delle immagini. L'immagine rimpicciolita ha lo stesso nome (src) di quella a grandezza reale?

Qualcosa del genere?

codice:

[img]tua_immagine.jpg[/img]

**iacchi** · 05-10-2005, 18:39

allora, questo è il codice del'immagine:

codice:

[img]abstract.png[/img]

e questo il css relativo:

codice:

.piccola {
 max-width: 100%;
 display: block;
 margin: auto;
}

in modo che quando la grandezza dell'immagine supera la dimensione del contenitore, questa viene ridimensionata.

Ora: io vorrei che passandoci sopra l'immagine rimpicciolita rimanesse dov'è, e però mi facesse apparire l'immagine stessa a grandezza naturale in un determinato pundo dello schermo, da definire con la proprietà css position:fixed. Per far questo ho provato il codice scritto sopra, ma potrebbe andare bene anche scrivere il codice dell'immagine a dimensione naturale direttamente nella pagina e mettere visibility:none così che non venga mostrata nella pagina e scrivere una funzione che quando passo il mouse sopra l'immagine rimpicciolita mi modifichi la proprietà css dell'altra da none a quello che serve per farla vedere (ora mi dovrei ricordare cos'è, ma non è un grosso problema)

**iacchi** · 06-10-2005, 17:50

up

**Andrea1979** · 06-10-2005, 18:45

metti un div con id, ad esempio "imgfulls" per l'immagine a dimensione normale dove vorresti che apparisse l'immagine, poi nell'immagine a dimensione ridotta metti

onMouseOver="document.getElementById('imgfulls').i nnerHTML='<img src=\"'+this.src+'\">'";

**iacchi** · 06-10-2005, 19:06

ci stiamo avvicinando molto a quello che cerco. Ho inserito il tuo codice nella pagina ma questo è quello che mi dice la console javascript:

**Andrea1979** · 07-10-2005, 02:55

togli gli apici: questo va.

codice:

<html>
<body>
<div id="zoom" style="width:600px; height:600px;">
[img]goofy.jpg[/img]';" />
</body>
</html>

**iacchi** · 07-10-2005, 16:28

ok, ora va

il metodo per farla andare via quando esco col mouse l'ho trovato e anche lì non ci sono problemi.
Ora però ho un'ultimo problema, e ho paura che non sia di così facile soluzione: se l'immagine che apre il js si sovrappone a quella rimpicciolita, come muovo il mouse si vede uno sfarfallio assurdo, e un continuo visualizzarsi/chiudersi dell'immagine che apre il js.
C'è una soluzione a tutto ciò? Vuoi un esempio pratico (una pagina da vedere)?

**iacchi** · 10-10-2005, 01:47

ri-uppettino

**Andrea1979** · 10-10-2005, 09:43

non puoi strutturare la pagina di modo che non sia possibile che il div in cui visualizzi l'immagine a grandezza normale non posso mai e poi mai sovrapporsi alla immagine rimpicciolita? Non ho giocato con z-index e proprietà simili... in caso, comincio a pensare che il problema adesso non sia più di javascript bensì di CSS/(X)HTML

Discussione: [JS] visualizzare un'immagine quando si passa col mouse sopra un'altra

Strumenti discussione

Ricerca discussione

Visualizza

[JS] visualizzare un'immagine quando si passa col mouse sopra un'altra

Permessi di invio