rollover css per barra di navigazione basata su immagini

wutangrob

Nuovo Utente
4 Nov 2005
14
0
0
Ciao ragazzi,
c'è qualcuno che potrebbe aiutarmi a a dissipare un dubbio? Vorrei cambiare la barra di navigazione realizzata usando javascript con una basata su i css. Primo si può fare, facendo in modo che ogni voce della barra sia associata ad una immagine diversa? Ho trovato questo codice che ho in parte adattato ma mi sono fermato qui...sapete dirmi come fare...mille grazie in anticipo. ciao

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Barra di navigazione a 3 stati con immagini</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
font-family: Verdana, sans-serif;
background-color:#e5e5e5;
text-align:center;
}
h1{color:#333; font:1.2em Verdana,sans-serif;}

div#barranav{
width:85%;
margin-top:70px auto;
/*border:1px solid #000;*/
padding-top:0;
height:70px;
}

div#barranav ul{
list-style-type:none;
margin:0;
padding:0;
}

div#barranav li{
float:left;
margin:0 2px 0 0;
padding:0;
}

div#barranav a{
display:block;
width:91px;
height:70px;
line-height:35px;
text-decoration:none;
background:url("img/home.jpg") no-repeat top center;
color:#fff;
font-variant:small-caps;
font-size:.8em;
font-weight:bold;
}
div#barranav a:hover{
background: url("img/home_on.jpg") no-repeat top center;
color:#336;
}

div#barranav li#active{
width:91px;
height:70px;
line-height:35px;
background:url("img/home_on.jpg") no-repeat top center;
color: #fff;
text-indent:11px;
font-size:.8em;
font-weight:bold;
font-variant:small-caps;
}

</style>

</head>

<body>
<h1>Barra di navigazione con CSS e immagini </h1>
<div id="barranav">
<ul>
<li id="active">Home</li>
<li><a href="pag_asp.htm">ASP</a></li>
<li><a href="pag_js.htm">Javascript</a></li>
<li><a href="pag_css.htm">CSS</a></li>
<li><a href="pag_xml.htm">Corso XML</a></li>
<li><a href="pag_guest.htm">GuestBook</a></li>
</ul>

</div>

<h1>Questa è la Home Page</h1>

</body>
</html>
 

lukeonweb

Utente Attivo
5 Mar 2003
5.177
10
38
43
Napoli
www.lucaruggiero.it
Puoi creare n classi per ogni link, o magari usi gli id che ha piu' senso.

Esempio

<a href="a.html" id="a">a</a>
<a href="b.html" id="b">b</a>
<a href="c.html" id="c">c</a>

#a
{
background-image: url(a1.gif);
}
#a:hover
{
background-image: url(a2.gif);
}

e lo stesso per b c.

E' scomodo... Javascript serve a questo, facilitarela vita in certi casi!

:byebye:
 

wutangrob

Nuovo Utente
4 Nov 2005
14
0
0
grazie per l'aiuto

grazie per l'aiuto...ora ci provo, pensavo che nn fosse possibile. io sono nuovo di css. mille grazie


wutangrob
 

wutangrob

Nuovo Utente
4 Nov 2005
14
0
0
grazie a lukeonweb

Ciao,
volevo ringraziarti anche se a distanza di tempo per il prezioso consiglio, sulla barra css e immagini, dopo un po' riesco a ricollegarmi e lo faccio per dire grazie. A breve, posto come ho risolto affinchè possa essere utile a chiunque lo ritenga opportuno. ciao ed ora nanna...:dormo: :dormo:
 
Discussioni simili
Autore Titolo Forum Risposte Data
V Problema Rollover con css HTML e CSS 1
D Dreamweaver-attivazione di un suono-audio su rollover del mouse su un link Windows e Software 0
A Problema rollover su iphone con ios 8.0 HTML e CSS 2
P far apparire immagine sotto testo con rollover Javascript 2
R [Risolto] Body onLoad e Immagini Rollover Classic ASP 6
K menu in rollover senza link...possibile? HTML e CSS 4
P rollOver su testo cambia jpg Javascript 2
M Effetto rollover sulle immagini: immagine selezionata? Javascript 0
M Immagine diversa al rollover per ogni voce di menu Javascript 2
C rollover particolare... HTML e CSS 2
1 Rollover e link inesistenti con Firefox ma funzionanti con Internet Explorer HTML e CSS 7
T flash gallery e rollover HTML e CSS 4
B come si creano i rollover su photoshop su cs3 e superiori? Photoshop 3
WpStyle mappa immagine con rollover HTML e CSS 3
S on rollOver Flash 1
F effetto rollover Webdesign e Grafica 1
C Effetto rollover [era:aiuto urgente!!] Javascript 5
C Rollover e popup Javascript 1
Dragon Problema di rollover Javascript 4
M rollover complesso Javascript 4
B Problemi "parziali" di rollover su FireFox Javascript 0
P Inserire suono in immagine di rollover Javascript 0
N Problema rollover su IE... HTML e CSS 1
Y rollover + preload Javascript 4
S effetto rollover Flash 1
J rollover su immagine con Javascript Javascript 1
Angelo.com Rotazione controllata dal rollover Flash 1
M Rollover & Testo Flash 2
L compatibilità browser rollover Javascript 1
S Problema Con L' Effetto Rollover Per Pulsanti Javascript 1
S Rollover su testo HTML e CSS 3
S problema con rollover Webdesign e Grafica 3
S Rollover slideshow su immagini! HELP!!!! Javascript 4
F rollover - problemi con IE 5 Javascript 4
diodo Rollover su tabella Javascript 1
A Rollover jpg senza livelli Javascript 0
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0

Discussioni simili