Mouse-hover

**EPDESIGN** · 28-03-2013, 12:57

Salve a tutti, volevo porvi un quesito, nel mio sito www.epdesign.it ho adottato il mouse hover sul mio sito, la sua funzionalità è perfetta, ma trovo qualche intoppo appena caricata la pagina, ovvero, passando per la prima volta il mouse sopra l'immagine che dovrà cambiare questa diventa prima del colore di sfondo e poi dell'immagine impostata dal mouse hover, come se non la caricasse subito, ripassando il mouse una seconda volta invece questo difetto non si presenta.

Inizialmente ho pensato che fosse per motivo di peso dell'immagine, ma ottimizzandole per il web e settandole con 1kb "peso ridicolo" il problema persiste.

Consigli? vi metto sotto il codice html e css

HTML
CSS

codice:

home {background-image:url(images/.... .jpg);
            height:56px;
	    width:52px;
	    float:left;}

#home:hover {background-image:url(images/... .jpg);

**Vincent.Zeno** · 28-03-2013, 14:23

ho riscontrato quello che hai detto solo con safari.
aggiungi le immagini in cache con un preload, dovresti risolvere

**EPDESIGN** · 28-03-2013, 14:27

Grazie Zeno!

**EPDESIGN** · 28-03-2013, 17:49

rieccomi, ho inserito questo codice, ma il problema persiste, intendevi questo vero?

nell'head

<script language="JavaScript" type="text/javascript">

</script>

nell'html

<body onLoad="preload('xxx.jpg', 'xxx.jpg', 'xxx.jpg', 'ceb_button_epdesign.jpg', ......)">

**Vincent.Zeno** · 28-03-2013, 17:56

avevo letto in fretta quindi no avevo fatto caso a questo

Originariamente inviato da EPDESIGN
CSS

codice:

home {background-image:url(images/.... .jpg);
            height:56px;
	    width:52px;
	    float:left;}

#home:hover {background-image:url(images/... .jpg);

prova così

codice:

a#home {background-image:url(images/.... .jpg);
            height:56px;
	    width:52px;
	    float:left;}

a#home:hover {background-image:url(images/... .jpg);

edit:
se non basta aggiungi l'evento onmouseout

**EPDESIGN** · 28-03-2013, 18:19

Rieccomi, allora il difetto credo sia al 95% svanito, i pulsandi del menu sembrano non aver problema, invece i pulsante dei social flippano ancora ma minimamente.

Se posso rubarti ancora del tempo, cosa farebbe onmouseout? e come lo inserisco?

Sono del tutto ignorante di java.

**Vincent.Zeno** · 28-03-2013, 18:24

Originariamente inviato da EPDESIGN
cosa farebbe onmouseout? e come lo inserisco?

"l'opposto" di onmouseover
http://www.w3schools.com/jsref/event_onmouseout.asp

Sono del tutto ignorante di java.

anch'io. ma tanto non c'entra nulla con quello che stai facendo quindi siamo a posto.
java non è javascript

**EPDESIGN** · 28-03-2013, 18:34

si perdonami intendevo dire javascript, ok per l'html, e proprio nel javascript che mi intoppo, lo inserisco tipo nello script che ho usato prima per il preload?

codice:

<script type="text/javascript">
<!--  
function preload() {
  if (!document.images) return;
  var imgs = new Array();
  var arguments = preload.arguments;
  for (var i = 0; i < arguments.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = arguments[i];
  }
}
// -->
</script>

dove

codice:

object.onmouseout=function(){SomeJavaScriptCode};

**Vincent.Zeno** · 28-03-2013, 18:40

ricorda che sei tenuto, come tutti, ad utilizzare il tag [CODE][/CODE] per postare codice sul forum, grazie

guarda bene la demo.
l'esempio è completo di funzione

Discussione: Mouse-hover

Strumenti discussione

Ricerca discussione

Visualizza

Mouse-hover

Re: Mouse-hover

Permessi di invio