Sfondo del sito cliccabile

**Bukowski** · 26-10-2010, 17:41

Salve a tutti,
come ormai sempre più spesso accade, molti portali personalizzano lo sfondo del sito con varie pubblicità.

Ora, sto cercando il metodo per integrare questo sistema nella mia struttura, ma non ho capito ancora come poter rendere cliccabile l'eventuale sfondo del mio sito, e anche googlando un pò, non sono riuscito a trovare una soluzione funzionante.

Considerando che la mia struttura è cosi:

<div id="background_cliccabile">

<div id="layout">
Il mio sito bla bla bla
</div>

</div>

Come posso fare in modo che il div background_cliccabile sia, appunto, cliccabile, senza interferire con il resto del layout???

Grazie a tutti!

**mucu** · 26-10-2010, 18:04

lo sfondo non si clicca
ma forse intendi qualcosa di diverso
quindi o fai degli esempi o usi un linguaggio più tecnico

**Mich_** · 26-10-2010, 18:05

Uno sfondo e` una struttura di abellimento, e non e` mai cliccabile.
Solo oggetti (pezzi di testo, immagini, ecc)di una pagina pososno diventare cliccabili.

Per realizzare qulcosa che assomiglia a quanto chiedi, puoi piazzare una immagine cliccabile sullo sfondo e metterci sopra il resto della pagina. In linea di massima per far questo si usano i posizionamenti e l'attributo z-index.

**furbostandby** · 26-10-2010, 18:19

Non si può fare un link dello sfondo, ma puoi assegnare un onClick javascript al body...

**Bukowski** · 26-10-2010, 18:35

In realtà ho trovato un sistema molto più semplice e crossbrowser (mi sembra!)

#sfondocliccabile {
position:fixed;
top:0px;
left:0px;
height:100%;
width:100%;
background-repeat:no-repeat; background-color: #3b0b01; background-position:center top;
}

#sfondocliccabile a {
display:block;
width:100%;
height:100%;
}

Ed ecco l'html:

<div id="sfondocliccabile">

</div>

<div id="layout" style="margin-left:auto; margin-right:auto; position:relative">
tutto il mio sito web
</div>

L'ho appena testato e funziona alla grande

**furbostandby** · 26-10-2010, 19:17

Però usando Javascript risulta molto più semplice:

codice:

...
<body onClick="location.href='http://www.google.it'">
...

A me sembra migliore questa soluzione...

**Mich_** · 27-10-2010, 08:38

Attenzione che tutte le soluzioni proposte presentano dei bachi.

La soluzione di inserire un <a> vuoto puo` funzionare in qualche browser, ma e` contraria allo standard.
Anzitutto un tag vuoto puo` esser ignorato dai browser;
Pertanto occorre metterci dentro qualcosa tra apertura e chiusura del tag <a>; poi come hai fatto tu occorre dare dimensioni 100% al tag <a>, e far in modo che stia sempre sotto (tu hai usato il posizionamento fisso per lo sfondo e il posizionamento relativo per il blocco sopra). In pratica con modi leggermente diversi hai ricreato al soluzione da me abbozzata, ma la tua non funziona in IE6 (e anche altri IE se la DTD non e` strict).

La soluzione JS fallisce miseramente se il browser non ha JS abilitato, per cui la ritengo non universale: in questo mondo in cui i brwoser sono ovunque, anche in dispositivi con poca capacita` elaborativa, e` facile trovare utenti che disabilitano JS per poter navigare un po' piu` velocemente.

**furbostandby** · 28-10-2010, 17:28

Originariamente inviato da Mich_
Attenzione che tutte le soluzioni proposte presentano dei bachi.

La soluzione di inserire un <a> vuoto puo` funzionare in qualche browser, ma e` contraria allo standard.
Anzitutto un tag vuoto puo` esser ignorato dai browser;
Pertanto occorre metterci dentro qualcosa tra apertura e chiusura del tag <a>; poi come hai fatto tu occorre dare dimensioni 100% al tag <a>, e far in modo che stia sempre sotto (tu hai usato il posizionamento fisso per lo sfondo e il posizionamento relativo per il blocco sopra). In pratica con modi leggermente diversi hai ricreato al soluzione da me abbozzata, ma la tua non funziona in IE6 (e anche altri IE se la DTD non e` strict).

La soluzione JS fallisce miseramente se il browser non ha JS abilitato, per cui la ritengo non universale: in questo mondo in cui i brwoser sono ovunque, anche in dispositivi con poca capacita` elaborativa, e` facile trovare utenti che disabilitano JS per poter navigare un po' piu` velocemente.

Ok, ma se non ci sono soluzioni migliori bisogna per forza scegliere tra una delle due. Comunque credo che la maggior parte dei browser moderni non ignori un tag <a> vuoto. Al limite i problemi ci potrebbero essere con i browser vecchi.
Però mi è venuta un'idea: implementarlo in javascript, e inserire il tag <a> all'interno di un <noscript>. Così se manca JS si attiverà la versione html, e si spera che almeno una delle due funzioni.

**Mich_** · 28-10-2010, 17:47

Ci sono anche soluzioni semplici che non hanno bisogno di JS.

Ad esempio:

codice:

HTML:
<body>
  <div id="sfondocliccabile">
    <a href="http://www.google.it" title="link per lo sfondo">
      [img]trasp.gif[/img]
    </a>
  </div>

  <div id="wrapper">
    ...tutto il mio sito web
  </div>
</body>


CSS:
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#sfondocliccabile, #wrapper {
  position: absolute;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
}
#sfondocliccabile {
  background: #3b0b01 url(sfondo.png) no-repeat top center;
  z-index: 10;
}
#sfondocliccabile a {
  display:block;
  width:100%;
  height:100%;
}
#sfondocliccabile img {
  width:100%;
  height:100%;
}
#wrapper {
  overflow: auto;
  z-index: 100;
}

Nello sfondo ho messo anche un'immagine, contornata da un colore di sfondo (che in linea di massima dovra` essere uguale al colore dei bordi dell'immagine)
Il posizionamento top center e` una possibile scelta (puo` naturalmente essere diversa)
La parte cliccabile e` un'immagine trasparente (da creare piccola) stirata per tutto lo spazio disponibile.

Discussione: Sfondo del sito cliccabile

Strumenti discussione

Ricerca discussione

Visualizza

Sfondo del sito cliccabile

Permessi di invio