menu a comparsa / scomparsa

[InternetMania]

ciao a tutti ...

ho visto in rete parecchi menu a comparsa ... pero io ne cerco uno un po particolare
devo creare una cosa come in foto, che quando si passa col mouse sopra all'immagine, in automatico si apre quel mini menu in UNA CLASSE SEPARATA (chi usa il css sa di cosa si tratta, se no semplicemente in UNA CELLA DIVERSA) ...

grazie a tutti ..

[artorius]

il tuo problema riguarda completamente CSS ed HTML.

Tu devi creare tutte le voci del menù nel modo in cui vuoi che vengano visualizzate. Poi, a tutte quelle che dovranno essere invisibili aggiungi la class="InvisibleItem" (che non ha altro che display: none

A quel punto su tutte le immagini che devono attivare l'effetto aggiungi:

onMouseOver = "displayItem(0)" onMouseOut = "hideItem(0)"
onMouseOver = "displayItem(1)" onMouseOut = "hideItem(1)"
etc, con l'indice corrispondente alla voce.

A questo punto, crei le funzioni:

var arrayOfDiv = null;

function displayItem(index)
{
   if(!arrayOfDiv)
      setArray();
   arrayOfDiv[index].style.display = 'block';
}

function hideItem(index)
{
   if(!arrayOfDiv)
      setArray();
   arrayOfDiv[index].style.display = 'none';
}

function setArray()
{
   arrayOfDiv = new Array();
   var count = 0;
   var arr = document.getElementsByTagName('div');
   for(i = 0; i < arr.length; i++)
   {
       if(arr[i].className.indexOf('InvisibleItem') >= 0)
       {
          arrayOfDiv[count++] = arr[i];
       }
   }
} 

[InternetMania]

non sono molto pratico in queste cose ... puoi farmi un esempio semplice ??

in modo che le scritte che devono apparire quando clicco sull'immagine, compaiano in un'altra cella .. cioè se puoi separarmi cio che devo mettere nell'html e css, e cio che devo applicare all'immagine da cliccare e al testo che deve apparire

grazie per la risposta

[artorius]

scusa, ma la cosa del genere richiede del lavoro sul CSS, ti posso dare l'HTML, ma per il CSS devi fare tu.

<div id="Container">
   <div class="Row">
      <div class="MyImage" onmouseover="displayItem(0)" onmouseout="hideItem(0)">
           [img]immagine1.jpg[/img]
      </div>
      <div class="InvisibleItem">
         Testo a caso primo item...
      </div>
   </div>
   <div class="Row">
      <div class="MyImage" onmouseover="displayItem(1)" onmouseout="hideItem(1)">
           [img]immagine1.jpg[/img]
      </div>
      <div class="InvisibleItem">
         Testo a caso secondo item...
      </div>
   </div>
     ...
</div> 

E così via.
Devi poi usare il CSS per impostare il Layout delle righe (ti consiglio un position: absolute; con margin-left largo come MyImage per la class InvisibleItem, oltre a metterli come display: none

[InternetMania]

ok ora provo ... ma quindi cosa centrano i codici che mi hai scritto prima? se ora non li hai usati?

[artorius]

come che centrano?!?!<div class="MyImage" onmouseover="displayItem(0)" onmouseout="hideItem(0)">

Li devi importare oppure mica funge!!

[InternetMania]

io ho dato un occhio ed ho provato .. praticamente dovrei solo aggiungere

onmouseover="displayItem(0)" onmouseout="hideItem(0)"

alla classe in cui voglio passare sopra col mouse, pero ora per farlo apparire in un'altra classe come faccio? con che codice?

[artorius]

scusa, ma che indichi con un altra class? vuoi dire cambiare la classe dell'elemento con JS?

[InternetMania]

io ho provato a mettere questo nell'html:

<div id="Container">
   <div class="Row">
      <div class="MyImage" onmouseover="displayItem(0)" onmouseout="hideItem(0)">
           [img]immagine1.jpg[/img]
      </div>
      <div class="InvisibleItem">
         Testo a caso primo item...
      </div>
   </div>
   <div class="Row">
      <div class="MyImage" onmouseover="displayItem(1)" onmouseout="hideItem(1)">
           [img]immagine1.jpg[/img]
      </div>
      <div class="InvisibleItem">
         Testo a caso secondo item...
      </div>
   </div>
</div>

e questo nel css:

var arrayOfDiv = null;

function displayItem(index)
{
   if(!arrayOfDiv)
      setArray();
   arrayOfDiv[index].style.display = 'block';
}

function hideItem(index)
{
   if(!arrayOfDiv)
      setArray();
   arrayOfDiv[index].style.display = 'none';
}

function setArray()
{
   arrayOfDiv = new Array();
   var count = 0;
   var arr = document.getElementsByTagName('div');
   for(i = 0; i < arr.length; i++)
   {
       if(arr[i].className.indexOf('InvisibleItem') >= 0)
       {
          arrayOfDiv[count++] = arr[i];
       }
   }
}

pero poi quando entro in firefox vedo due scritte una sotto l'altra ... cioè vedo Testo a caso secondo item e Testo a caso primo item uno sotto l'altro, e non succede ninete se passo sopra col mouse ... come mai? in cosa sbaglio

[InternetMania]

up