Resize immagini con evento mouse

**Giuyoka** · 06-09-2007, 16:50

Salve a tutti, avrei bisogno di un chiarimento che di seguito illustro;
devo integrare in un sito la modalità che mi permette di fare in modo che avendo delle immagini di 100*50 px all'evento del passaggio del mouse queste devono cambiare dimensione, la posizione naturalmente deve essere accanto alla img originaria.

Qualcuno è in grado di aiutarmi con qualche script da dove prendere spunto?

Grazie tante

**Mich_** · 06-09-2007, 17:11

Mi sfugge qualcosa nella tua descrizione ...
Non e` che vuoi una galleria di immagini, per caso?
Ci sono varie gallerie, nelle raccolte: ne puoi trovare a partire dai "link utili" (forse nella sezione menu o in quella layout). Oppure fai una ricerca nel forum o in rete (sempre con la parola "galleria" / "galleria di immagini" / "gallery" / "image gallery")

**Giuyoka** · 06-09-2007, 17:16

No, non voglio una galleria, mi serve sapere e visionare possibilmente un semplice script per attivare l'evento di cambio immagine in modo che la stessa con il mouseover mi cambi di dimensioni e resti nella posizione della immagine originaria.

Grazie

**Mich_** · 06-09-2007, 17:43

Parli di script, ma qui siamo nel forum CSS. La cosa che chiedi si puo` realizzare senza l'uso di JS.

Dovresti dire se il cambio di dimensioni presuppone un caricamento di una nuova immagine (necessario per ingrandire sensibilmente) o ti basta un cambiamento delle dimensioni.
Inoltre e` necessario conoscere come devono comportarsi gli altri elementi (devono rimanere fermi e "sotto" l'immagine che si ingrandisce, o devono spostarsi).
Un link alla pagina e/o uno schema grafico di come e` e come deve diventare puo` aiutare a capire meglio.

**Giuyoka** · 06-09-2007, 17:53

Ti invio uno schema dal quale puoi capire di cosa ho bisogno.

Grazie ancora

**Mich_** · 06-09-2007, 18:14

OK, ora e` piu` chiaro.

Se la pagina e` essenzialmente di immagini ti conviene usare i posizionamenti (relativi o assoluti): nel tuo caso e` piu` semplice e puoi anche sovrapporre l'immagine al resto tramite l'uso corretto dello z-index.

Non hai detto se l'immagine grande deve essere un nuovo file, e in caso affermativo come vuoi pre-caricare tale file.

Consiglio: se e` (quasi) sicuro che l'utente vorra` vedere l'immagine ingrandita, ti conviene caricarla una volta sola e visualizzare la stessa immagine una volta ridotta ed una volta a grandezza naturale. esempio:
<div class="scatola">,a href="#">[img]fileimmagine.jpg[/img][img]fileimmagine.jpg[/img]</a></div>

CSS:

codice:

.scatola {
  position: relative;
  top: ...; left: ...;
  width: 100px;
  height: 100px;
  z-index: 10;
}
.scatola a {
  display: block;
}
.ridotta {
  display: block;
  width: 80px; height: 80px;
  margin: 10px;
  z-index: 11;
  border: 0;
}
.scatola a:link estesa {
  display: none;
}
.scatola a:hover estesa {
  display: block;
  position: relative;
  top: 30px; left: 30px;
  z-index: 20;
  border: 0;
}

Nota che l'immagine e` inviata al client grande: questo ti evita probelmi di precaricamento.

**Giuyoka** · 06-09-2007, 18:22

Adesso provo lo script, grazie mille

**Giuyoka** · 06-09-2007, 18:59

Ho provato lo script ma non funziona, adesso ti invio il tutto e verifichi tu.

Grazie

<head>
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="ridotta"><a href="img.jpg" target="_self"
onmouseover="scatola a:hover estesa('img.jpg')" onmouseout="hidetrail()"></div>
[img]img.jpg[/img]</a></div>

**Mich_** · 07-09-2007, 09:25

Cosa stai facendo? Non si puo` lavorare e dare consigli a chi non li vuole capire e scompiglia tutto.

Hai postato nel forum CSS, e ti ho dato una soluzione CSS (senza l'uso di JS o altri tipi di script).
Tu rebalti tutto, inserisci la chiamata ad uno script (con gravi errori di sintassi e senza inserire lo script stesso) e ti lamenti che non funziona. Per forza.

Se volevi uno script (che tra l'altro non e` accessibile e potrebbe non funzionare in certi browser), dovevi dirlo subito e ti spostavo in altro forum.

**djciko** · 07-09-2007, 14:23

Originariamente inviato da Mich_
Cosa stai facendo? Non si puo` lavorare e dare consigli a chi non li vuole capire e scompiglia tutto.

Hai postato nel forum CSS, e ti ho dato una soluzione CSS (senza l'uso di JS o altri tipi di script).
Tu rebalti tutto, inserisci la chiamata ad uno script (con gravi errori di sintassi e senza inserire lo script stesso) e ti lamenti che non funziona. Per forza.

Se volevi uno script (che tra l'altro non e` accessibile e potrebbe non funzionare in certi browser), dovevi dirlo subito e ti spostavo in altro forum.

Forse non conosce bene i CSS e la loro natura.

@Giuyoka, i CSS sono regole, non script.
Ti consiglio la lettura di qualche tutorial su questo stesso sito se vuoi usare i CSS per il tuo problema, oppure di cambiare soluzione/sezione e postare in Javascript...

Discussione: Resize immagini con evento mouse

Strumenti discussione

Ricerca discussione

Visualizza