È 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.