Javascript background-image change per Menu e Div

Pubblicato da Davide, Aggiornato lunedì 23 luglio 2007 7 Commenti »

Questo articolo e' stato scritto piu' di 6 mesi fa.. In teoria non cambia nulla, sed panta rei: se trovi link o informazioni datate segnalalo pure. :)

Il titolo non è dei migliori, tradotto significa:

Impostare uno sfondo ad un oggetto quando il mouse scorre su un’altro oggetto

Può capitare, per esigenze estetiche, di aver bisogno che quando l’utente passa il mouse sopra ad un box venga cambiato lo sfondo ad un altro box. In una sorta di fanta-css sarebbe:

#div1 {
background: url(img1.gif) center;
}
#div2 {
background: url(img2.gif) center;
}
#div1:hover {
#div2-background: url(img1.gif);
}

E’ una soluzione che può tornare utile in certi casi, e ho preparato qualche esempio. Potete tranquillamente scaricarli e utilizzarli come volete, magari correggerli e migliorarli pure. Questo è il link al file zip con i tre gli esempi presentati in seguito.
Sono stati testati su IE 6 e 7, Opera, FireFox. Tutto il codice, CSS e XHTML, è stato validato secondo gli standard del W3C. Faccio notare come tutti gli esempi siano correttamente e degnamente visualizzati anche da utenti con javascript disabilitati.

Esempio 1: menu con css e javascript che spegne tutte le voci tranne quella selezionata col mouse

Da questa pagina si può vedere l’esempio. L’immagine utilizzata per le tab è una sola, viene caricata secondo la tecnica dello slittamento dell’immagine di sfondo.

tab

Sintassi HTML:


<ul id="menu">
<li id="current"><a xhref="http://www.diplod.it/index.html" mce_href="http://www.diplod.it/index.html" >Home</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Dove Siamo</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Cosa Facciamo</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Contatti</a></li>
<li><a xhref="http://www.diplod.it/#" mce_href="http://www.diplod.it/#" >Dicono di Noi</a></li>
</ul>

Il codice css:

/*menu tabs*/
#menu {
margin: 80px auto 0 auto;
padding: 0;
height: 30px;
width: 880px;
list-style: none;
border-bottom: 5px solid #7ce41d;
font: bold 13px/30px Arial, 'Trebuchet MS', Tahoma, verdana, sans-serif;
}
#menu li {
display: inline;
margin: 0;
padding: 0;
}
#menu li a {
height: 30px;
width: 140px;
float: left;
background: url(tab.gif) no-repeat center top;
margin: 0;
padding: 0;
text-decoration: none;
color: #333;
}
#menu li a:hover {
color: #336633;
background: url(tab.gif) no-repeat center top !important;
}

Il codice javascript (esterno alla pagina):

function cambiaSfondo(hover) { //cambia lo sfondo a tutte le altre tab
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
for (var j = 0; j < lis.length; j++) { var a = lis[j].getElementsByTagName('a');
a[0].style.backgroundPosition ='0 -30px';

}
}
function ripristinaSfondo(hover) { //cambia lo sfondo a tutte le altre tab
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
for (var j = 0; j < lis.length; j++) { var a = lis[j].getElementsByTagName('a');
a[0].style.backgroundPosition ='0 0';

}
}
//Events
function addEvent(elm, evType, fn) {
// cross-browser event handling
if(elm.addEventListener) {
elm.addEventListener(evType, fn, false);
return true;
}
else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
}
else {
elm['on'+evType] = fn
}
}
function addListeners(e) {
var menu = document.getElementById('menu');
var lis = menu.getElementsByTagName('li');
for (var j = 0; j < lis.length; j++) { var a = lis[j].getElementsByTagName('a'); addEvent(a[0],'mouseover',cambiaSfondo);
addEvent(a[0],'mouseout',ripristinaSfondo);

}
}
//Aggiungi gli ascoltatori degli eventi quando si carica la pagina
addEvent(window,'load',addListeners);

Esempio 2: Sfondo alternato su un unico bottone diviso in due

Da questa pagina si può vedere l’esempio. In questo caso l’immagine utlizzata è decisamente pià grande (e pesante), ma in questo modo si evita che l’utente percepisca il vuoto mentre l’immagine si carica al passaggio del mouse. Lo sfondo è relativo al box esterno che contiene i due interni (destro e sinistro) entrambi con sfondo trasparente.

Big Button

Sintassi HTML:


<div id=bigbutton" >
<div id="bbleft">
<h1><a xhref="" mce_href="" >Pulsante Sinistro</a></h1>
<h2 class="on-air">Passa il mouse qui sopra</h2>
</div>
<div id="bbright">
<h1><a xhref="" mce_href="" >Pulsante Destro</a></h1>
<h2>Oppure qui sopra..</h2>
</div>
</div>

Il codice css:
Una piccola nota: il lampeggiamento del titoletto di sinistra non è opera del javascript, ma della dichiarazione css “text-decoration: blink”.

/*big-button*/
#bigbutton {
height: 130px;
width: 880px;
margin: 100px auto 0 auto;
padding: 0px;
background: transparent url(big-button-bg.gif) no-repeat center top;
}
#bbleft {
width: 420px;
margin: 0;
padding: 0;
display: inline;
float: left;
cursor: pointer;
}
#bbright {
width: 420px;
padding: 0;
margin: 0;
float: right;
display: inline;
cursor: pointer;
}
#bigbutton h1 {
font: 2em/90px Verdana, Arial, sans-serif;
letter-spacing: -3px;
font-weight: bold;
text-align: center;
margin: 0 auto;
padding: 0px;
}
#bigbutton a, #bigbutton a:hover {
color: #333;
text-decoration: none;
outline: none; /* hide dotted outline */
}
#bigbutton h2 {
font: 1.2em/20px Verdana, Arial, sans-serif;
text-align: center;
margin: 0 auto;
padding: 0px;
color: #555;
text-transform:uppercase;
}
#bigbutton h2.on-air {
text-decoration: blink;
}

Il codice javascript (esterno alla pagina):

function avvertisx() {
alert('Hai cliccato sul pulsante di sinistra!');
}
function avvertidx() {
alert('Hai cliccato sul pulsante di destra!');
}
function sfondosx() { //imposta lo sfondo quando si passa il mouse sul pulsante di sinistra
var bigbutton = document.getElementById('bigbutton');
bigbutton.style.backgroundPosition ='0 -130px';
}
function sfondodx() { //imposta lo sfondo quando si passa il mouse sul pulsante di destra
var bigbutton = document.getElementById('bigbutton');
bigbutton.style.backgroundPosition ='0 -260px';
}
function ripristinaSfondo() { //ripristina lo sfondo normale
var bigbutton = document.getElementById('bigbutton');
bigbutton.style.backgroundPosition ='0 0';
}
//Events
function addEvent(elm, evType, fn) {
// cross-browser event handling
if(elm.addEventListener) {
elm.addEventListener(evType, fn, false);
return true;
}
else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
}
else {
elm['on'+evType] = fn
}
}
function addListeners(e) {
var bbleft = document.getElementById('bbleft');
var bbright = document.getElementById('bbright');
addEvent(bbleft,'click',avvertisx);
addEvent(bbleft,'mouseover',sfondosx);
addEvent(bbleft,'mouseout',ripristinaSfondo);
addEvent(bbright,'click',avvertidx);
addEvent(bbright,'mouseover',sfondodx);
addEvent(bbright,'mouseout',ripristinaSfondo);
}
//Aggiungi gli ascoltatori degli eventi quando si carica la pagina
addEvent(window,'load',addListeners);

Esempio 3: Sfondo alternato su due div separati

Da questa pagina si può vedere l’esempio. In questo caso si utilizza un’immagine diversa per ogni blocco, che viene fatta slittare al passaggio del mouse su uno di essi.

BB Left BB Right

Sintassi HTML:


<div id="bbleft">
<h1><a xhref="" mce_href="" >Pulsante Sinistro</a></h1>
<h2 class="on-air">Passa il mouse qui sopra</h2>
</div>
<div id="bbright">
<h1><a xhref="" mce_href="" >Pulsante Destro</a></h1>
<h2>Oppure qui sopra..</h2>
</div>

Il codice css:
Nota: in questo caso i box sono posizionati in maniera assoluta, ma è possibile utilizzare qualsiasi elemento purchè esso venga identificato con un ID. Penso solo a un effetto di sfumatura su un box all’interno del quale sono presenti link nei paragrafi di testo. Credo possa essere interessante, soprattutto se consideriamo il fatto che questa soluzione non va a ledere in nessun modo gli utenti con javascript disabilitato.
/*divs*/
#bbleft {
width: 380px;
height: 130px;
margin: 0;
padding: 0;
display: inline;
cursor: pointer;
background: transparent url(bbleft.gif) no-repeat center top;
position: absolute;
top: 40px; left: 100px;
}
#bbright {
width: 380px;
height: 130px;
padding: 0;
margin: 0;
display: inline;
cursor: pointer;
background: transparent url(bbright.gif) no-repeat center top;
position: absolute;
top: 200px; right: 200px;
}
#bbleft h1, #bbright h1 {
font: 2em/90px Verdana, Arial, sans-serif;
letter-spacing: -3px;
font-weight: bold;
text-align: center;
margin: 0 auto;
padding: 0px;
}
#bbleft a, #bbleft a:hover, #bbright a, #bbright a:hover {
color: #333;
text-decoration: none;
outline: none; /* hide dotted outline*/
}
#bbleft h2, #bbright h2 {
font: 1.2em/20px Verdana, Arial, sans-serif;
text-align: center;
margin: 0 auto;
padding: 0px;
color: #555;
text-transform:uppercase;
}
#bbleft h2.on-air {
text-decoration: blink;
}

Il codice javascript (esterno alla pagina):

function avvertisx() {
alert('Hai cliccato sul pulsante di sinistra!');
}
function avvertidx() {
alert('Hai cliccato sul pulsante di destra!');
}
function sfondosx() { //imposta lo sfondo a destra quando si passa il mouse sul pulsante di sinistra
var bbright = document.getElementById('bbright');
bbright.style.backgroundPosition ='0 -130px';
}
function sfondodx() { //imposta lo sfondo a sinistra quando si passa il mouse sul pulsante di destra
var bbleft = document.getElementById('bbleft');
bbleft.style.backgroundPosition ='0 -130px';
}
function ripristinaSfondosx() { //ripristina lo sfondo normale a destra
var bbright = document.getElementById('bbright');
bbright.style.backgroundPosition ='0 0';
}
function ripristinaSfondodx() { //ripristina lo sfondo normale a sinistra
var bbleft = document.getElementById('bbleft');
bbleft.style.backgroundPosition ='0 0';
}
//Events
function addEvent(elm, evType, fn) {
// cross-browser event handling
if(elm.addEventListener) {
elm.addEventListener(evType, fn, false);
return true;
}
else if(elm.attachEvent) {
var r = elm.attachEvent('on'+evType,fn);
return r;
}
else {
elm['on'+evType] = fn
}
}
function addListeners(e) {
var bbleft = document.getElementById('bbleft');
var bbright = document.getElementById('bbright');
addEvent(bbleft,'click',avvertisx);
addEvent(bbleft,'mouseover',sfondosx);
addEvent(bbleft,'mouseout',ripristinaSfondosx);
addEvent(bbright,'click',avvertidx);
addEvent(bbright,'mouseover',sfondodx);
addEvent(bbright,'mouseout',ripristinaSfondodx);
}
//Aggiungi gli ascoltatori degli eventi quando si carica la pagina
addEvent(window,'load',addListeners);

Se avete problemi ad utilizzare questi esempi o volete capire come personalizzarli non esitate a fare domande.. Alla prossima.

7 Commenti »

Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.

Vuoi essere il primo a lasciare un commento per questo articolo? Utilizza il modulo sotto..

Lascia il tuo commento

 

http://livregratis.fr/ - http://club-ebook.fr/

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi