immagini linkate che si ingrandiscono

13-04-2006, 19.21.51

Salve a tutti sto preparando il mio sito e mi manca ancora una cosa:
per tutti i link sto usando l'effetto suggerito da W L, cioè quello in cui passando il mouse sopra il collegamento le scritte si ridimensionano crescendo.
La mia domanda è: si può fare la stessa cosa ma anzichè il collegamento sulla scritta è su una immagine?
grazie a mille
buonaserata

13-04-2006, 19.37.31

Mmm non ne sono sicuro ma mi sa che devi usare un'altra immagine più grande da far cambiare al passaggio del mouse..

OnMouseOver, giusto?

14-04-2006, 08.17.56

Originalmente inviato da metaphor

Mmm non ne sono sicuro ma mi sa che devi usare un'altra immagine più grande da far cambiare al passaggio del mouse..

OnMouseOver, giusto?

Si può anche senza un'immagine più grande , semplicemente così :

Tra <head> & </head>

Codice HTML:

<script language="JavaScript">
<!-- 
function cambia(nomeimmagine, width, height)
{
  nomeimmagine.width = width;
  nomeimmagine.height = height;
}
// -->
</script>

E nell'immagine metti :

Codice HTML:

<img src="tuaimmagine.ext" width="100" height="200" name="immagine1" onMouseOver="cambia(immagine1,600,250)" onMouseOut="cambia(immagine1,500,73)">

Devi impostare in onMouseOver="cambia(immagine1,600,250)" :
1- nel primo campo metti il nome dell'immagine
2- nel secondo la larghezza
3- nel terzo l'altezza desiderata
Devi impostare in onMouseOut="cambia(immagine1,600,250)" :
1- stesso tipo come sopra , solo metti altezza e larghezza originali ^_^

P.S.: ricordati di mettere un nome all'immagine con :
name="nomeimmagine"

Ciaoooo !!

14-04-2006, 08.24.39

buongiorno e grazie
ok funziona, ora però bisognerebbe fare un collegamento esterno .js e richiamarlo in htm.
ciaooooooo

14-04-2006, 09.49.20

Originalmente inviato da archidaniele

buongiorno e grazie
ok funziona, ora però bisognerebbe fare un collegamento esterno .js e richiamarlo in htm.
ciaooooooo

Uhm ... intendi forse :

img.js

Codice HTML:

function cambia(nomeimmagine, width, height)
{
  nomeimmagine.width = width;
  nomeimmagine.height = height;
}

tra il tag <head> e </head> di pagina.html

Codice HTML:

<script language="javascript1.1" type="text/javascript" src="img.js"></script>

14-04-2006, 10.14.26

si ma così non va, provo a modificarlo

14-04-2006, 10.15.20

O.o hai messo nel tag <img> i parametri onmouseover eccetera ?

14-04-2006, 10.20.02

scusami, potresti ripostarmi il codice completo per favore? grazie mille

14-04-2006, 10.25.48

nell'immagine :

Codice HTML:

<img src="tuaimmagine.ext" width="100" height="200" name="immagine1" onMouseOver="cambia(immagine1,600,250)" onMouseOut="cambia(immagine1,500,73)">

tra il tag <head> e </head>

Codice HTML:

<script language="javascript1.1" type="text/javascript" src="img.js"></script>

Il file img.js

Codice HTML:

function cambia(nomeimmagine, width, height)
{
  nomeimmagine.width = width;
  nomeimmagine.height = height;
}

14-04-2006, 10.33.48

PERFETTO!!! grazie mille comunitàvirtuali!
vista la tua home, votata e metterò il tuo indirizzo nella mia futura

ultimissima cosa, se io volessi dare questa caratteristica a più di una immagine, posso richiamare da un unico .js?

buonproseguimento

14-04-2006, 10.53.52

sì sì ^_^
E' fatto apposta , per ogni immagine cambi il nome , poi , se vuoi che passando su una cambino due uguali magari metti a tutte e due il nome uguale ^_^
Puoi fare tantissime cose con questo :-P

14-04-2006, 11.02.14

Originalmente inviato da comunitavirtuali

sì sì ^_^
E' fatto apposta , per ogni immagine cambi il nome , poi , se vuoi che passando su una cambino due uguali magari metti a tutte e due il nome uguale ^_^
Puoi fare tantissime cose con questo :-P

cioè? mica ho capito sai...

**funcool** · 14-04-2006, 11.10.49

Originalmente inviato da archidaniele

cioè? mica ho capito sai...

Il file *.js resta sempre uguale e devi aggiungere solo le nuove immagini con i parametri che vuoi.

Codice HTML:

<img src="tuaimmagine.ext" width="100" height="200" name="immagine1" onMouseOver="cambia(immagine1,600,250)" onMouseOut="cambia(immagine1,500,73)">
<img src="tuaimmagine2.ext" width="100" height="200" name="immagine2" onMouseOver="cambia(immagine2,600,250)" onMouseOut="cambia(immagine2,500,73)">

14-04-2006, 11.15.04

Originalmente inviato da archidaniele

cioè? mica ho capito sai...

Ad esempio così :

Codice HTML:

<img src="immagine.ext" width="100" height="200" name="immagine1" OnMouseOver="cambia(immagine2,600,250)" onMouseOut="cambia(immagine2,500,73)">  <br><br><br><br> 
<img src="immagine2.ext" width="100" height="200" name="immagine2" onMouseOver="cambia(immagine1,600,250)" onMouseOut="cambia(immagine1,500,73)">

14-04-2006, 11.15.47

sì questo l'ho capito ma il file .js rimane così oppure devo integrarlo con dei copia/incolla

[html]function cambia(immagine1, width, height)
{
nomeimmagine.width = width;
nomeimmagine.height = height;
}
function cambia(immagine2, width, height)
{
nomeimmagine.width = width;
nomeimmagine.height = height;
}[html]

cambiando nella prima riga il nome dell'immagine?

te lo chiedo perchè ho pravato e per ora son riuscito a farlo solo nel modo sopradetto.

14-04-2006, 11.17.47

No , non devi cambiarlo , ti basta includerlo o metterlo una sola volta , devi cambiare il nome dell'immagine nel tag <img name"nomeimmagine"> per ogni immagine :

Codice HTML:

<img src="immagine.ext" width="100" height="200" name="immagine1" OnMouseOver="cambia(immagine2,600,250)" onMouseOut="cambia(immagine2,500,73)">  
<img src="immagine2.ext" width="100" height="200" name="immagine2" onMouseOver="cambia(immagine1,600,250)" onMouseOut="cambia(immagine1,500,73)">
<img src="immagine3.ext" width="100" height="200" name="immagine3" OnMouseOver="cambia(immagine3,600,250)" onMouseOut="cambia(immagine3,500,73)">  
<img src="immagine4.ext" width="100" height="200" name="immagine4" onMouseOver="cambia(immagine4,600,250)" onMouseOut="cambia(immagine4,500,73)">

e così via ................

Edit :
:-P stiamo rispondendo in contemporanera io e Funcool :-P

**funcool** · 14-04-2006, 11.18.44

Il file *.js dovrebbe rimanere sempre lo stesso. Se non funziona dove metti le immagini sostituisci name con id e il codice del *.js scrivilo così:

Codice:

function cambia(nomeimmagine, width, height) {
  document.getElementById(nomeimmagine).width = width;
  document.getElementById(nomeimmagine).height = height;
}

14-04-2006, 11.31.30

perfetto funziona e pure benissimo!
grazie
buonlavoro

**funcool** · 14-04-2006, 11.34.44

Visto che risolto, chiudo.

Discussione: immagini linkate che si ingrandiscono

LinkBack

Strumenti discussione

Display

immagini linkate che si ingrandiscono

Regole di scrittura