[HTML+CSS]Links e pulsanti

[Sick Boy]

salve a tutti,

per un sito web che mi è stato richiesto sto usando html e css perchè non sono presenti molte pagine.

vorrei che i diversi link alle sezioni non fossero solo le singole parole che contraddistinguono le diverse sezioni, ma che fosse tutta l'immagine che fa da sfondo al mio div.

mi spiego meglio: per ogni sezione del menù ho creato un div che ha come sfondo una certa immagine. se si fa un over, l'immagine cambia. vorrei che il mio link fosse tutta l'immagine.

avete qualche suggerimento?

grazie.

[tomminno]

Potresti semplicemente aggiungere al div la proprità onClick ed assegnare una funzione javascript che richiama l'indirizzo specificato.

[Sick Boy]

non vorrei usare jscript per questo sito, cercavo alternative htmlesche! :D

[flx2000]

Evitare il Javascript a priori, soprattutto quando ti semplificherebbe la vita, è una scelta piuttosto controversa...

Ad ogni modo basta un onclick="document.location.href=nuova_pagina.html" negli attributi della div per fare quello che chiedi.

[Sick Boy]

si, sono d'accordo, però volevo conoscere anche altri metodi esistenti!

grazie comunque! :)

edit: così non funziona comunque perchè ho messo nel css che quando ci si va sopra con il mouse, l'immagine di sfondo cambi!

[WilliamBlake]

Fai un salto nella sezione menu di: http://www.cssplay.co.uk/articles/gallery/index.html

[kwb]

Non puoi mettere nel css le pseudoclassi con immagine di background diverse?
Tipo

#div1 { background: url(immagine.jpg); }
#div1:hover { background: url(immagine2.jpg);}

Non so se così va, prova....

[Sick Boy]

si, ho fatto così, però poi aggiungendo il codice che mi ha detto flx2000 non mi va il link

[FRAgNCESCO]

prova a creare un foglio di stile e associare al link una classe di questo genere

.linkImmagine{
background: url(img1.png) no-repeat;
width: 300px; /* misure dell'immagine */
height: 300px;
display: inline-block; /* o solo block; */
}

.linkImmagine:hover{
background: url(img2.png) no-repeat;
}

e lo implementi così nel file html

<a class="linkImmagine" href="pagina1.html">LINK</a>

dovrebbe funzionare

[kwb]

prova a creare un foglio di stile e associare al link una classe di questo genere

.linkImmagine{
background: url(img1.png) no-repeat;
width: 300px; /* misure dell'immagine */
height: 300px;
display: inline-block; /* o solo block; */
}

.linkImmagine:hover{
background: url(img2.png) no-repeat;
}

e lo implementi così nel file html

<a class="linkImmagine" href="pagina1.html">LINK</a>

dovrebbe funzionare

Si, infatti, così dovrebbe andare....

[Y3PP4]

Ciao,
se proprio vuoi usare un elemento che contenta la scritta e magari lo sfondo evita i div nidificati nel tag a: se sei pedante ti avverto che non otterresti la validazione w3.

Invece puoi nidificare uno span dentro il tag a. Quindi potresti fare una cosa del genere:
<a href="/"><span id="miospan">Homepage</span></a>
Bene, ora associamo le regole css appropriate:
#miospan{
background:url('immagine/menu.ext');
height:20px;
width:180px;
float:left; // altrimenti il link viene formattato della stessa grandezza del testo, cosi invece lo rendiamo libero dai vincoli dell'elemento padre.
//... etc tutte le proprietà del caso per centrare il testo verticalmente e orizzontalmente e ciò che serve.
}

Con questo metodo hai il sistema funzionante (ie6 compreso -5.5 non testato-, senza bisogno di dipendere da javascript) e ottieni la validazione w3 per html4.01 (non ho testato xhtml ma non mi risulta vietato nidificare span in un tag a).


Fai un paio di prove e vedrai.

Ciao e buona notte.

[ale09hh]

Ciao

Prova a guardare questo tutorial ---> http://www.youtube.com/watch?v=U8Kjy-G7cpk (http://www.youtube.com/watch?v=U8Kjy-G7cpk)

Penso sia quello che chiedi se non ho capito male... Io l'ho implementato nel mio sito e funziona bene.. Ciao! :cool:

[kwb]

Ciao

Prova a guardare questo tutorial ---> http://www.youtube.com/watch?v=U8Kjy-G7cpk (http://www.youtube.com/watch?v=U8Kjy-G7cpk)

Penso sia quello che chiedi se non ho capito male... Io l'ho implementato nel mio sito e funziona bene.. Ciao! :cool:

Tecnica interessante, certe uscite mi hanno fatto piegare in 2 dal ridere :asd:
Manca un punto e virgo su una width, ma roba da poco conto :)