rollover verticale

**Maz3us** · 25-08-2006, 09:37

ciao
ho creato un rollover con delle semplici gif,ma vorrei sapere come fare per trasformarlo da orizzontale in verticale(ho provato a mettere le dimensioni larghezza a 100 ma il risultato si vede solo in IE,non capisco per che)
qualcuno me aiuta???

**pierofix** · 25-08-2006, 09:39

Così non si capisce di cosa tu stia parlando. O cerchi di essere più esaustivo a parole oppure - cosa forse migliore - ci dai un link ad un documento di esempio.

**Maz3us** · 25-08-2006, 09:49

il link non te lo posso dare,ma provo a descrivertelo meglio:
ho creato un rollover dove passi col mouse cambia immagine,il mio problema è che mi è venuto orizzontale,e io dovrei trsformarlo in verticale,e per fare ciò ho provato a impostare la larghezza(con <table.....)a 100,e su IE mi viene perfettamente,mentre su FF mi rimane orizzontale.
Spero di essermi fatto capire

**pierofix** · 25-08-2006, 09:55

Originariamente inviato da Maz3us
ho creato un rollover dove passi col mouse cambia immagine,il mio problema è che mi è venuto orizzontale,e io dovrei trsformarlo in verticale

La confusione deriva dai termini 'orizzontale' e 'verticale', associati a 'rollover'.

Se non puoi darci un link (non puoi nemmeno fare una paginetta di esempio?) allora dovrai postarci il codice (solo quello inerente il problema, quindi niente codice di 'rumore') che hai utilizzato.

Ti raccomando: ordinato, ben indentato e leggibile.

**Maz3us** · 25-08-2006, 11:14

<SCRIPT LANGUAGE="JavaScript">

image1 = new Image();
image1.src = "img/menu/mc1roll.gif";

image2 = new Image();
image2.src = "img/menu/mc2roll.gif";

image3 = new Image();
image3.src = "img/menu/mc3roll.gif";

image4 = new Image();
image4.src = "img/menu/mc4roll.gif";

image5 = new Image();
image5.src = "img/menu/mc5roll.gif";

image6 = new Image();
image6.src = "img/menu/mc6roll.gif";

image7 = new Image();
image7.src = "img/menu/mc7roll.gif";

image8 = new Image();
image8.src = "img/menu/mc8roll.gif";

</script>
</HEAD>

<BODY>

<a href="home.html" onmouseover="image1.src='img/menu/mc1roll.gif';"
onmouseout="image1.src='img/menu/mc1.gif';">
[img]img/menu/mc1.gif[/img]</a>

<a href="scheda.html" onmouseover="image2.src='img/menu/mc2roll.gif';"
onmouseout="image2.src='img/menu/mc2.gif';">
[img]img/menu/mc2.gif[/img]</a>

<a href="bio.html" onmouseover="image3.src='img/menu/mc3roll.gif';"
onmouseout="image3.src='img/menu/mc3.gif';">
[img]img/menu/mc3.gif[/img]</a>

<a href="news.html" onmouseover="image4.src='img/menu/mc4roll.gif';"
onmouseout="image4.src='img/menu/mc4.gif';">
[img]img/menu/mc4.gif[/img]</a>

<a href="foto.html" onmouseover="image5.src='img/menu/mc5roll.gif';"
onmouseout="image5.src='img/menu/mc5.gif';">
[img]img/menu/mc5.gif[/img]</a>

<a href="video.html" onmouseover="image6.src='img/menu/mc6roll.gif';"
onmouseout="image6.src='img/menu/mc6.gif';">
[img]img/menu/mc6.gif[/img]</a>

<a href="links.html" onmouseover="image7.src='img/menu/mc7roll.gif';"
onmouseout="image7.src='img/menu/mc7.gif';">
[img]img/menu/mc7.gif[/img]</a>

<a href="contatti.html" onmouseover="image8.src='img/menu/mc8roll.gif';"
onmouseout="image8.src='img/menu/mc8.gif';">
[img]img/menu/mc8.gif[/img]</a>

**pierofix** · 25-08-2006, 11:29

Riducendo il tutto ai minimi termini, abbiamo:

dei link,
al cui interno di ognuno vi è un'immagine;
ad ogni passaggio del mouse sul link (e quindi sull'immagine),
l'immagine cambia,
per poi tornare a quella originaria una volta che il mouse ha abbandonato l'area cliccabile.

In tutto questo non riesco ancora a comprendere cosa c'entrino i termini 'orizzontale' e 'verticale'.

Oltretutto, cosa a cui fare attenzione prima di ogni altra, quello che vedo è un menu di navigazione principale (a giudicare dalle pagine di riferimento). Il markup che hai utilizzato, però, non è appropriato al caso, e l'utilizzo di javascript è superfluo, in quanto esistono apposta i CSS per gestire queste situazioni di carattere grafico.

Quindi, come al solito, occorre procedere con metodo e ordine: prima si scrive bene la struttura (X)HTML in modo da avere una base solida di parteza, e poi si passa alla parte riguardante gli stili.

**Maz3us** · 25-08-2006, 13:25

orizzontale e verticale si riferiscono alla estensione del menu,ovvero se in modo verticale(come il menù di ogni sezione di html.it)oppure orizzontale(come il menù principale(html.it,siti,servizi...)
capito ora?

**nuky** · 25-08-2006, 13:50

Originariamente inviato da Maz3us
orizzontale e verticale si riferiscono alla estensione del menu,ovvero se in modo verticale(come il menù di ogni sezione di html.it)oppure orizzontale(come il menù principale(html.it,siti,servizi...)
capito ora?

Ammazza, ti sei spiegato veramente bene...

Tramite CSS devi impostare i tag a in modo che siano di tipo block:

codice:

<head>
  <style type="text/css">
    a {display:block;}
  </style>
</head>

**pierofix** · 25-08-2006, 13:57

Iniziamo dalla struttura XHTML appropriata per un menu:

codice:

<ul id="menu">[*]Home[*]Scheda[*]Biografia[*]Notizie[*]Foto[*]Video[*]Links[*]Contatti[/list]

Il markup serve infatti a descrivere le informazioni. In questo caso specifico, un menu in forma testuale è la miglior soluzione, soprattutto ai fini dell'accessibilità.

Poi, nel CSS:

codice:

#menu,
#menu *
{
   margin:0; padding:0;
}
   #menu li
   {
      float:left;
      list-style-type:none;
   }
      #menu li a
      {
         display:block;
         width:100px; height:50px; /* Qui metti le dimensioni effettive delle immagini */
         background-repeat:none;
         text-indent:-100em; text-decoration:none;
      }
         #home
         {
            background-image:url('img/menu/mc1.gif');
         }
         #home:hover
         {
            background-image:url('img/menu/mc1roll.gif');
         }
         #scheda
         {
            background-image:url('img/menu/mc2.gif');
         }
         #scheda:hover
         {
            background-image:url('img/menu/mc2roll.gif');
         }
         /* E via dicendo... */

Pulito, logico e accessibile.

Se lo vuoi in verticale basta togliere la proprietà float:left dall'istruzione che ha per selettore #menu li.

**nuky** · 25-08-2006, 14:00

Originariamente inviato da pierofix
...
Pulito, logico e accessibile.
...

In effetti io me ne sono lavato le mani un po' troppo infretta...

Discussione: rollover verticale

Strumenti discussione

Ricerca discussione

Visualizza

rollover verticale

Permessi di invio