Ho una barra di menu e sotto al menu ho fatto un riguadro.
Vorrei che al passaggio del mouse su di un link del menu apparisse una determinata immagine nel riguadro.In pratica ad ogni link la sua immagine.
Ho una barra di menu e sotto al menu ho fatto un riguadro.
Vorrei che al passaggio del mouse su di un link del menu apparisse una determinata immagine nel riguadro.In pratica ad ogni link la sua immagine.
Quello che cerchi si chiama galleria (gallery).
Ce ne sono di pronte, alcune anche senza uso di Javascript. Fa' una ricerca in rete (magari inizia dai "link utili" del forum, dove ne sono citate alcune)
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
ho fatto una ricerca su google e sul forum,ma mi trova solo con javascript,tramite css nn si può fare,è molto importante per me questa cosa.
Grazie
Ad esempio (punto 6.2 dei "link utili"):
A 'Two Step' CSS Photograph Gallery
E ci dovrebbe essere qualcosa anche in CSSplay (se ricordo bene)
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Allora io ho un menu orizzontale,e quando il mouse va sopra si apre un "sottomunu"...ora con questo codice ho realizzato un aspecia di galleria:
Ora fin quando vado sul link del menu normale l'immagine viene perfettamente sistemata al centro pagina,ma quando vado su un link del sottomenu,l'immagine viene posizionata un po piu in basso rispetto al normale,ma questo accade solo per i sottomenu.codice:#boxlink{ position: relative; width: 20em; } #imglink{ position: absolute; top: 100px; left: 250px; width: 500px; height: 400px; background: url(url); z-index: 1 } ul{ margin-left: 100px; padding-left:0px; } a {text-decoration: underline;} a span{text-decoration: none;} a:hover, a:hover span{ display: block !important; display: inline; } a:hover span{ position: absolute; top: 100px; left: 250px; width: 500px; height: 400px; z-index: 2; } #film span{background: url(url);} #home span{background: url(url);} #cast span{background: url(url);} #qu span{background: url(url);}
Le immagini le ho ridimensionate tutte alla stessa misura.
Cosa devo modificare nel codice?
Vi prego,sto impazzendo
Lo so che è una sciocchezza ma non riesco a capire dove sbaglio,mi sono bloccato,vi prego poteve farmi capire almeno dove sbaglio.
Allora questo è il codice html del menu:
Questo è del css:codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS Menu Maker</title> <link rel="stylesheet" media="all" type="text/css" href="menu_style.css" /> </head> <body> <div class="nav"> <div class="table"> <ul class="select">[*]Sample[/list]<ul class="select">[*]Sample Menu <div class="select_sub"> <ul class="sub"> [*]Sample Menu [*]Sample Menu [*]Sample Menu [*]Sample Menu [*]Sample Menu [/list]</div>[/list]<ul class="select">[*]Sample Menu <div class="select_sub"> <ul class="sub"> [*]Sample Menu 2 [*]Sample Menu 2 [*]Sample Menu 2 [*]Sample Menu 2 [*]Sample Menu 2 [/list]</div>[/list]<ul class="select">[*]Sample Menu <div class="select_sub"> <ul class="sub"> [*]Sample Menu 3 [*]Sample Menu 3 [*]Sample Menu 3 [*]Sample Menu 3 [*]Sample Menu 3 [/list]</div>[/list]<ul class="select">[*]Sample Menu <div class="select_sub"> <ul class="sub"> [*]Sample Menu 4 [*]Sample Menu 4 [*]Sample Menu 4 [*]Sample Menu 4 [*]Sample Menu 4 [/list]</div>[/list]</div> </div> </body> </html>
Ho provato a modificare questo pezzo di codice:codice:.nav { height:35px; background: url(images/bg.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; font-size:11px; width:100%; z-index:100; margin:0; padding:0; } .nav .table { display:table; margin:0 auto; } .nav .select, .nav .current { margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap; } .nav li { margin:0; padding:0; height:auto; float:left; } .nav .select a { display:block; height:35px; float:left; font-weight:bold; background: url(images/bg.gif); padding:0 30px 0 30px; text-decoration:none; line-height:35px; white-space:nowrap; color:#2b3238; } .nav .select a:hover, .nav .select li:hover a { background: url(images/hover.gif); padding:0 0 0 15px; cursor:pointer; color:#2b3238; } .nav .select a b{ font-weight:bold; } .nav .select a:hover b, .nav .select li:hover a b { display:block; float:left; padding:0 30px 0 15px; background:url(images/hover.gif) right top; cursor:pointer; } .nav .select_sub { display:none; } /* IE6 only */ .nav table { border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0; } .nav .sub { display:table; margin:0 auto; padding:0; list-style:none; } .nav .sub_active .current_sub a, .nav .sub_active a:hover { background:transparent; color:#2b3238; } .nav .select :hover .select_sub, .nav .current .show { display:block; position:absolute; width:100%; top:35px; background:url(images/back.gif); padding:0; z-index:100; left:0; text-align:center; } .nav .current .show { z-index:10; } .nav .select :hover .sub li a, .nav .current .show .sub li a { display:block; float:left; background:transparent; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#2b3238; } .nav .current .sub li.sub_show a { color:#2b3238; cursor:default; } .nav .select .sub li a { font-weight:normal; } .nav .select :hover .sub li a:hover, .nav .current .sub li a:hover { visibility:visible; color:#73a0d2;
Se in top metto 10px l'immagine viene messa pecisa,ma poi il sottomenu sale sopra.codice:.nav .select :hover .select_sub, .nav .current .show { display:block; position:absolute; width:100%; top:35px; background:url(images/back.gif); padding:0; z-index:100; left:0; text-align:center; }
Se quello che cerchi e` un menu, e` meglio che guardi allora tra le raccolte di menu.
Ce ne sono moltissimi, gia` pronti e funzionanti (gia` testati su molti browser)
Sempre tra i "link utili", sezione "menu".
La pagina di CSSplay e` notevole (a mio parere)
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
grazie per avermi risposto,ti giuro sto impazzendo,allora io non cerco un menu,o meglio l'ho gia trovato e modificato secondo i miei gusti,e ora cerco di fare in modo che quando passo con mouse su un nome del menu,appare un immagine scelta da me,e su questo va tutto bene....il problema è quando passo col mouse sul sottomenu allora l'immagine viene visualizzata piu giu rispetto a come dovrebbe venire.
Lo stile del munu è questo www.cssmenumaker.com/builder/menu_info.php?menu=066
Praticamente quando vado su "Sample" l'immagine esce bene,mentre se vado su "sub menu1" l'immagine esce piu giu rispetto a quella di prima.
Vi prego gli faccio una statua d'oro a chi mi risolve questo problema
Permessi di invio
Rispondi quotando