Aprire div o altro per effetto roll over

[diablobox]

Ciao
vorrei fare la seguente cosa attraverso i CSS, non so se sia possibile:

ho una piccola immagine disponibile in una pagina web.
Vorrei che al rollover si visualizzasse una zona (penso un div) della pagina oppure un div con all'interno un altra pagina.

per capire meglio metto un link:
http://www.snap.com/

a me interessa qualcosa di similare all'effetto che si ha sul rollover di learn more

Ciao
grazie...

[diablobox]

... nessuno che ha mai fatto qualcosa del genere??

[Mich_]

E` all'incirca quello che si ottiene con alcuni menu o con le gallerie di immagini (ce ne sono realizzate con solo CSS).

Quello che appare all':hover non e` una pagina, ma il contenuto di un div, che deve essere gia` presente nella pagina con display:none; e che all':hover diventa display:block;

Non so se questa indicazione ti e` sufficiente perche` tu possa risolvere da solo ...

[diablobox]

Ciao

qualcosa sono riuscito a trovare e a fare, ma c'era di mezzo un javascript

non riesco a capire come è possibile sostituire il Javascript con il CSS.

Mi puoi dare qualceh spunto'??

Ciao
Grazie

[Mich_]

Se hai trovato un codice che utilizza JS, forse ti conviene abbandonarlo e rifare da zero: infatti l'impostazione con JS e` diversa da quella con solo CSS.

La struttura fondamentale da usare e`:
HTML

<a href="...">[img]primaimmagine.gif[/img]
  <span id="primo">
    qui il blocco che deve apparire
  </span>
</a>
<a href="...">
  <span id="secondo">[img]secondaimmagine.gif[/img]
    qui il blocco che deve apparire
  </span>
</a>
...

CSS

a {
  ...
}
a img {
  border: 0;
  ...
}
a span {
  display: none;
}
a:hover span {
  display: block;
  position: absolute;   /* o relative */
  top: ...px;  /* oppure bottom - anche espresso in altra unita` di misura */
  left: ...px;   /* oppure right - ... */
}

[diablobox]

.. ti ringrazio.. era quello che volevo.

Adesso devo soltanto capire come fare in modo che si sovrapponga a tutto il contenuto dalla pagina.

ciao

[Mich_]

Adesso devo soltanto capire come fare in modo che si sovrapponga a tutto il contenuto dalla pagina.

Devi usare opportunamente l'attributo
z-index
Il blocco con valore piu` alto di tale attributo sta sopra gli altri.

PS: mi sono dimenticato di dirti che il display:none e` una cosa che non piace a google (e ai motori in genere). Se ti interessa il posizionamento occorre usare delle tecniche alternative.

[diablobox]

... per quello che mi serve a me.. è indispensabile il posizionamento

Forse allora devo optare per il javascript??

Grazie di nuovo

[Mich_]

NO, ci sono dei trucchi per fare la stessa cosa senza usare il display:none.

Ti basta spostare il blocco fuori dalla finestra visibile:

a span {
  display: block;
  position: absolute;
  left: -500px;    /* supponendo il blocco inferiore a 500px; /*
  top: ...px;       /* nella posizione dove dovra` stare */
}
a:hover span {
  left: ...px;      /* nella posizione dove deve stare per essere visibile */
}

Dal punto di vista logico e` piu` corretto il display, ma se hai problemi con i motori, questa sopra e` una soluzione.
Sono state proposte anche altre soluzioni simili nella logica.

Una volta che il tutto funziona, ti conviene farti un giro sia nel forum (bottone ricerca in alto - vedi anche il forum motori), e sia in rete per verificare come hanno risolto altri. Comunque quello che cambia e` uno o due attributi CSS, la struttura e la logica rimangono uguali.

[diablobox]

... vi ringrazio entrambi...

il mio problema è fare in modo che lo span si sovrapponga a tutto.

Vedete l'esempio cliccando qui:
http://www.tuscany-charming.it/en/tu...asp?IDstrut=61

e passando sopra l'icona con la mappa della toscana

ho provato con z-index a + 1 e 999 ma non si sovrappone.

lo stile che ho messo invece è questo:
<!--
a {
}
a img {
border: 0;
}
a span {
display: block;
position: absolute;
left: -500px;
}
a:hover span {
position: relative;
left: 5px; /* nella posizione dove deve stare per essere visibile */
top: 5px; /* oppure bottom - anche espresso in altra unita` di misura */
width:300px;
height:300px;
background:#003333;
z-index: +1;
}
-->

... lo span è contenuto all'interno di div...