Cambio immagine al passare del mouse

[mondosims]

Ciao a tutti,
ho una richiesta, io sto creando alcune pagine in HTML e vorrei sapere come posso far in modo che quando passo il mouse su di un immagine, (con un link verso un altra pagina), questo cambia immagine?

Grazie 10000!!

[dreadnaut]

Un link non dovrebbe mai essere solo un immagine, ma avere anche del testo - altrimenti i motori di ricerca non vedono molto, e se qualcuno non vede le immagini, non vede il link.

Si usa quindi di solito un link normale, e via foglio di stile css si "sostituisce" con una immagine. Usando :hover puoi specificare lo stile applicato al link quando il mouse si trova sopra di esso, e quindi ottenere l'effetto del "cambio".

Dai un'occhiata a questo esempio di pulsanti ed al suo sorgente.

[mondosims]

Va benissimo grazie, però sorge un problema non indifferente...
Nel CSS c'è questo codice

 DIV {
    float: left;
    margin: 2em;
  }

Il problema è che mi fa modificare tutti i div della pagina!

Ciao a tutti,
ho una richiesta, io sto creando alcune pagine in HTML e vorrei sapere come posso far in modo che quando passo il mouse su di un immagine, (con un link verso un altra pagina), questo cambia immagine?

Grazie 10000!!

Fossi in te userei delle Javascripts ne puoi trovare molte in rete con licenze open-source. Io ne ho iserita una nel mio sito per i link ancorati all'interno della pagina, se vuoi posso passartela e spiegarti come usarla (anche se è davvero molto semplice).

Fossi in te userei delle Javascripts ne puoi trovare molte in rete con licenze open-source. Io ne ho iserita una nel mio sito per i link ancorati all'interno della pagina, se vuoi posso passartela e spiegarti come usarla (anche se è davvero molto semplice).

Io sconsiglio vivamente l'utilizzo degli Javascripts, appesantiscono il sorgente per niente quando si possono usare i CSS per fare un rollover accettato da tutti i browser, personi i datati IE 5 e IE 6.

Qui è stato spiegato da me, come poter fare l'evento richiesto: http://forum.it.altervista.org/basi-...del-mouse.html

Poi se proprio con CSS è IMPOSSIBILE, e non dico difficile, ma IMPOSSIBILE, lo Javascript è l'unica soluzione.

Se entri nel mio sito (nel profilo, non in firma), vedrai che il menù ha un rollover di immagini, ed è fatto tutto usando CSS, e si adatta anche alla lunghezza della, e il tutto facendo il preload dell'immagine in :hover, così se ci passi sopra non devi aspettare che l'immagine si carichi

[dreadnaut]

javascript non è necessario per un semplice cambio di immagini, e come tale non va usato. Punto

@biccheddu: javascript è inutile anche nel caso del tuo menu. Invece di fare tante immagini per i vari elementi, ed essere costretti ad un preload, basta che tu ne usi una sola e la tagli di misura. Leggiti questo articolo sugli sprites.

@mondosims: quel pezzo di css serviva nell'esempio per allineare i bottoni, ma tu puoi farne a meno. Ti basta il codice riferito all'elemento #primo - a cui puoi ovviamente cambiare nome, o farlo diventare una classe se ti serve:

/* setta l'immagine normale per il bottone, e ne fissa le dimensioni */
  #primo A {
    background: url(HOME.jpg);
    display: block;
    height: 114px;
    width: 114px;
  }
  
/* setta l'immagine per quando il mouse passa sul link */
  #primo A:hover {
    background: url(HOME_H.jpg);
  }
  
/* OPZIONALE: nasconde il testo del link, così da lasciare solo l'immagine */
  #primo A SPAN {
    display: none;
  }

Io infatti non utilizzo Javascript, ma utilizzo due immagini, per fare tutto quello:

bacgkround_left e background_right.

E hanno sia l'immagine in hover che non, e utilizzando questo codice ottengo quello che voglio:

.menu li a{
	float:left;
	display:block;
	color:#717171;
	text-decoration:none;
	font-weight:bold;
	padding:0 0 0 12px;
	height:52px;
	cursor:pointer;
	background:url(../img/menu_left.gif) no-repeat;
	background-position: 0 0;
}
.menu li a b{
	float:left;
	display:block;
	height:52px;
	padding:0 24px 0 12px;
	background:url(../img/menu_right.gif) no-repeat;
	background-position: 100% -52px;
}
.menu li a:hover{
	color:#fff;
	background:url(../img/menu_left.gif) no-repeat;
	background-position: 0 100%;
	line-height: 34px;
}
.menu li a:hover b{
	color:#fff;
	background:url(../img/menu_right.gif) no-repeat;
	background-position: 100% 0px;
	height:52px;
}

Con questo codice ho l'effetto che dovrebbe volere l'utente.

Uso il preload senza javascript e il caricamento è immediato.

Poi non so se ho capito male

[dreadnaut]

allora non usi il preload cosa intendi per preload? se è il fatto che tu abbia richiamato i nomi delle immagini nel css, quello non è preload, e le immagini verranno caricate quando vengono visualizzate la prima volta. Ovvio che se son piccine, la cosa è quasi istantanea.

Forse ho utilizzato male il termine, gergalmente diciamo

Per preload intendo che l'immagine una volta visualizzata in :link per esempio, e poi in :hover non sia un'altra.

Cioè, supponiamo di avere un link con sfondo bg_link.gif. Ora se ci passo sopra e voglio cambiare lo sfondo di solito si mette nel css .classe:hover con un background diverso, che in questo caso è bg_link_hover.gif.

Ora, il browser deve caricare una seconda immagine per l'effetto.

Invece come ho fatto io mi carica solo bg_link che ha lo sfondo sia di :link che di :hover e in hover: si sposta dando l'effetto che avrebbe caricando una seconda immmagine.


Forse è un po contorto come esempio

[dreadnaut]

ok, quello è usare la stessa immagine due volte. Preload, da pre-, in anticipo, e load, caricare, vuol dire usare javascript o qualche altro rigiro per caricare più immagini di quelle al momento utilizzate nella pagina, in modo che queste siano immediatamente disponibili quando (o se) un qualche effetto css o javascript le fa apparire.

Ahn ok, grazie della delucidazione dreadnaut

In ogni caso, non credi sia meglio farlo senza javascript (come faccio io) che con js (come vorrebbe mondosims) ?

[dreadnaut]

io ho già detto che js in questo caso è inutile, mondosims non ha mai detto che vuole farli in js, e tu non fai preload, che è un discorso ortogonale. Se mondosims non ha altri problemi, la discussione si conclude qua

Ho bagliato, mi riferivo ad arachnia, che ha detto di farlo in js

[mondosims]

javascript non è necessario per un semplice cambio di immagini, e come tale non va usato. Punto

@biccheddu: javascript è inutile anche nel caso del tuo menu. Invece di fare tante immagini per i vari elementi, ed essere costretti ad un preload, basta che tu ne usi una sola e la tagli di misura. Leggiti questo articolo sugli sprites.

@mondosims: quel pezzo di css serviva nell'esempio per allineare i bottoni, ma tu puoi farne a meno. Ti basta il codice riferito all'elemento #primo - a cui puoi ovviamente cambiare nome, o farlo diventare una classe se ti serve:

/* setta l'immagine normale per il bottone, e ne fissa le dimensioni */
  #primo A {
    background: url(HOME.jpg);
    display: block;
    height: 114px;
    width: 114px;
  }
  
/* setta l'immagine per quando il mouse passa sul link */
  #primo A:hover {
    background: url(HOME_H.jpg);
  }
  
/* OPZIONALE: nasconde il testo del link, così da lasciare solo l'immagine */
  #primo A SPAN {
    display: none;
  }

A me serve poterli allineare tutti su di un unica riga!
Come faccio?

[dreadnaut]

prendi ispirazione dal sito di Biccheddu, che usa una lista di link, e poi assegna float: left ai tag <li> del menu

dai un'occhiata ad altri post indietro negli archivi, a proposito di menu, navigazione, etc.

E aggiungo che non vengono mostrati i "punti" della lista dando a menu ul { l'attributo list-type: none;, ma sono le basi del CSS, ci sono tante guide in merito

Grazie per le puntualizzazioni varie, provo sempre un sottile senso di soddisfazione quando scopro di avere ancora tanto da imparare.

[dreadnaut]

coincidenza, sono inciampato in un altro articolo sugli sprites, ancora più recente. Saggia lettura