Javascript background-image change per Menu e Div
Pubblicato da Davide, Aggiornato lunedì 23 luglio 2007 7 Commenti »
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.
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.
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.
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.
Varie info
Articolo pubblicato lunedì 23 luglio 2007 alle 00:16
Segnala questo articolo.. e sentiti utile!
7 Commenti »
Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.
Lascia il tuo commento
1
Blakshark - Pubblicato il 15 11 2007 alle 20:16
Scusate una domanda ma io ho un sito che ha dei colori diversi da quelli dei bottoni ( verde – grigio – rosso – ecc ) come posso fare per cambiare i colori ai bottoni ?
Grazie a tutti ! Veramente un ottimo lavoro !
N.B.: A me servirebbero come colore di sfondo nero e come colore di scritte rosso
2
Davide - Pubblicato il 16 11 2007 alle 00:16
Puoi modificare direttamente i files delle immagini, e metterli con altri colori.
Per il testo devi cambiare il css invece: invece di “color: #333″ metti il colore che vuoi tu.
3
Blakshark - Pubblicato il 16 11 2007 alle 12:39
Grazie mille ! Provero’ a farlo !
4
Blakshark - Pubblicato il 16 11 2007 alle 15:01
Rieccomi … Scusa ( scusate ) un’ altra domanda … adesso sono riuscito a cambiare i colori del bottoni e delle scritte pero’ , una cosa che non sono riuscito a cambiare è stata la striscetta che c’è sotto i bottoni. Vi sarei grato se qualcuno mi potesse aiutare! Grazie di nuovo!
5
manuel - Pubblicato il 10 03 2010 alle 14:33
Ciao
Scusa io ho bisogno di una cosa infinitamente più semplice….
Ho un menu laterale con una serie di links
Un div contenitore con un’immagine di sfondo
Vorrei solo che quando passo con il mouse sopra i diversi links mi cambi l’immagine di sfondo del div contenitore
E’ possibile?! hai un esempio?
6
Davide - Pubblicato il 10 03 2010 alle 15:27
Si, è possibile.. parti dall’esempio 3: il concetto è uguale, solo che cambi lo sfondo del div contenitore e non di un altro div
7
manuel - Pubblicato il 10 03 2010 alle 16:17
oddio….non è chiarissimo cosa dovrei modificare nel js e nel css….diciamo che ho provato ma non ne ho tirato fuori nulla di buono :)
il fatto è che nel mio caso ho un div unico al quale cambiare sfondo….ma molti link diversi i quali, per ogni hover, caricano uno sfondo specifico nel div in questione….
per capirci è quello che ho ricreato qui:
http://www.designem.it/progetti.htm
tralasciando che qui è più complesso e c’è un accavallo di funzioni js perchè i link sono delle immagini (e non semplcie testo come serve ora a me) e ci sono anche un rollover immagine per ogni link….
a parte questo, l’effeto che vorrei è proprio così, con la differenza che questa funzione carica un’immagine in un punto specifico ma NON permette di caricare uno sfondo in un div specifico, come serve ora a me
Puoi aioutarmi?!? :(