se risolvete cena x tutti....

  • Creatore Discussione Creatore Discussione fabfel
  • Data di inizio Data di inizio

fabfel

Nuovo Utente
17 Ago 2006
12
0
0
Roma
Ciao, descrivo: ho un'immagine sulla quale passandoci sopra mi si deve aprire una finestrella laterale descrittiva. Avete soluzioni?
Infinitamente grato.
 
tasto destro visualizza sorgente pagina se usi firefox
se usi ie mi sembra tasto destro -> HTML

oppure con frontpage puoi importare 1 pagina dal web per studiarne i pezzi.
 
hm dead, ho provato a fare una cosa simile prendendo il tuo codice ma nn ce l' ho fatta... forse xke i div han tutti class o id che si riferiscono al css forse c'è qualche "opzione" che fa girare il tutto.

Perfavore aiutaci ;).
 
Allora:
questo è il codice del div:

<div id="showroom">
<p style=" text-align:center;"><strong>Benvenuti nel sito internet del Comune di Nuvolera.</strong></p>
<div id="intro">
<div id="bottoni">
<a class="zz mini1" href="#" title="Festa al campo sportivo">.
<span><img title="Festa al campo sportivo" alt="Festa al campo sportivo" src="http://www.comune.nuvolera.bs.it/themes/Nuvolera//images/pres1.jpg" /></span>
</a>

<a class="galleria mini1" href="#" title="Nuvolera insieme festa dei Nonni">1
<span><img title="Nuvolera insieme festa dei Nonni" alt="Nuvolera insieme festa dei Nonni" src="http://www.comune.nuvolera.bs.it/themes/Nuvolera//images/pres2.jpg" /><br />Nuvolera insieme festa dei Nonni</span>
</a>
<a class="galleria mini1" href="#" title="Municipio e Scuole di Nuvolera">2
<span><img title="Municipio e Scuole di Nuvolera" alt="Municipio e Scuole di Nuvolera" src="http://www.comune.nuvolera.bs.it/themes/Nuvolera//images/pres3.jpg" /><br />Municipio e Scuole di Nuvolera</span>
</a>
<a class="galleria mini1" href="#" title="Il Gabibbo a Nuvolera">3
<span><img title="Il Gabibbo a Nuvolera" alt="Il Gabibbo a Nuvolera" src="http://www.comune.nuvolera.bs.it/themes/Nuvolera//images/pres4.jpg" /><br />Il Gabibbo a Nuvolera</span>
</a>

<a class="galleria mini1" href="#" title="Nuvolera F.C.">4
<span><img title="Nuvolera F.C." alt="Nuvolera F.C." src="http://www.comune.nuvolera.bs.it/themes/Nuvolera//images/pres5.jpg" /><br />Nuvolera F.C.</span>
</a>
<a class="galleria mini1" href="#" title="Prati fioriti">5
<span><img title="Prati fioriti" alt="Prati fioriti" src="http://www.comune.nuvolera.bs.it/themes/Nuvolera//images/pres6.jpg" /><br />Prati fioriti</span>
</a>
<a class="galleria mini1" href="#" title="Interno Chiesa di Nuvolera">6
<span><img title="Interno Chiesa di Nuvolera" alt="Interno Chiesa di Nuvolera" src="http://www.comune.nuvolera.bs.it/themes/Nuvolera//images/pres7.jpg" /><br />Interno Chiesa di Nuvolera</span>
</a>

<a class="galleria mini1" href="#" title="Chiesa e Monumento ai Caduti">7
<span><img title="Chiesa e Monumento ai Caduti" alt="Chiesa e Monumento ai Caduti" src="http://www.comune.nuvolera.bs.it/themes/Nuvolera//images/pres8.jpg" /><br />Chiesa e Monumento ai Caduti</span>
</a>
</div>
</div>


e questa è la parte di CSS:

/*showroom*/
div#showroom {width:100%; background:transparent; margin:5px auto; display:block;}
div#intro {float:left;position:relative; width:54%; height:300px; background:transparent; margin:5px auto;}
div#intro1{float:left;width:45%; font-family:'Comic Sans MS','Monotype Corsiva',cursive;text-align:justify; margin-left:1%;background-color:#f0f8ff;}
div#bottoni {height:300px; width:5%; background:#00f; float:left; border:1px solid #008;}
a.mini1 {background-color:#6bf; font-weight:700;}
a.galleria span {display:block; position:absolute; width:0px; height:0px; overflow:hidden;}
a.galleria, a.galleria:visited {display:block; float:left; color:#f00; border:1px solid #008; width:100%; height:2em; margin:3px; z-index:100; font-size:.85em; text-align:center;}
a.galleria:hover, a.galleria:focus {border:1px solid #008;}
a.galleria:hover img, a.galleria:focus img {position:relative; z-index:100; border: 4px double #00f; vertical-align: middle; width:98%;height:250px;}
a.galleria:hover span, a.galleria:focus span {display:block; position:absolute; width:92%; height:280px;top:0px; left:8%;background:transparent;z-index:100;}
/*immagine di sottofondo*/
a.zz {border:1px solid #008; visibility:hidden;}
a.zz img {position:relative; z-index:100; border: 4px double #00f; vertical-align: middle; width:98%;height:250px;}
a.zz span { visibility:visible;display:block; position:absolute; width:92%; height:280px;top:0px; left:8%;background:transparent;z-index:100;}


e queste sono le direttive aggiuntive solo per IExplorer:
/*showroom*/
div#showroom {width:100%; background:transparent; margin:5px auto; display:block;}
div#intro{z-index:1; width:54%;}
div#intro1{float:left;width:44%;}
a.galleria:hover span, a.galleria:focus span {width:1820%; margin-left:30%;}
a.zz img {z-index:-1; width:98%;height:240px;}
a.zz span {width:1710%; margin-left:40%;top:5px; z-index:-1;}


naturalmente molte delle direttive CSS sono solo estetiche.
per padroneggiare questa tecnica devi fare un po' di prove.

ti darei il link originale dal quale ero partito ma non me lo ricordo più. comunque trovi mote informazioni utili con QUESTA ricerca.
 
cerbero ha scritto:
O.o direttive aggiunte solo per IE? ... dove? ^^

inserendo questo codice nell'head della pagina, puoi far si che SOLO IE (versione 6 o inferiori) leggano il foglio di stile stileIE.css.
Ovviamente devi adattare gli url al tuo sito


<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.comune.nuvolera.bs.it/themes/Nuvolera/styleIE.css" />
<![endif]-->
 
ah cioè te fai si che SOLO ie legga quella parte xke senno visualizzerebbe male il tutto? O.o
 
dead quanto sei sapiente... devi avere 1 testa enorme x contenere tutte quelle informazioni ;)
 
Chiedo scusa, non avevo letto bene la domanda.

In ogni caso:

1. gli script si somigliano molto e spesso bastà chiamarli menu piuttosto che pippo

2. non ci sono solo menu nel link che ho postato

:byebye:
 
hm, lo sto provando... funziona tutto a parte che con IE non cambiano le immagini... cioè si vede solo la prima :) cmq volendo mettere i numeri x la scelta delle img sotto le img anziche sopra?? devo agire sul css?
 

Discussioni simili