In molti portali vedo che sullo sfondo viene inserita una immagine (in questo caso di pubblicità) con relativo link. un esempio noto è il sito di repubblica.
Volendo fare cmq una immagine di sfondo del sito, magari natalizia e linkarla ad una promo natalizia collegata all'interno del sito stesso, come posso associrgli un link? considerato che l'immagine viene caricata sullo sfindo con i css...
grazie
L'immagine di fondo è inserita in un div quindi associando il comando "onclick" al div fai quello che vuoi...
es:
<div style="background-image: url(TuoSfondo.gif); background-repeat:no-repeat; background-color:#FF0000; width:100px; height:20px;" onclick="window.location ='http://www.tuosito.com/'"></div>
qui ti ho inserito anche le dimensioni e altezza per mostrarti il div...
il tuo sarà il div principale quindi avrà la dimensione intera!
ciao
grazie, ho provato e funziona però:
1- come fare per far comparire la manina e far capire che è un link a tutti quanti?
2 - se inserisco un div sopra con immagine o meno e ci clicco, mi apre lo stesso link dell'immagine di sfondo
Originariamente inviato da fit
grazie, ho provato e funziona però:
1- come fare per far comparire la manina e far capire che è un link a tutti quanti?
2 - se inserisco un div sopra con immagine o meno e ci clicco, mi apre lo stesso link dell'immagine di sfondo
1) aggiungi allo style cursorointer;
cosi:
<div style="cursor
2) non ho ben capito la domanda :-)
innanzi tutto grazie, ho inserito cursor
il problema che riscontro è il seguente ( e spero di essere più chiarra):
- ho inserito un div sopra questo da te indicatomi come se il div con il link andasse sullo sfondo e poi sopra, questo div nuovo, fosse il mio sito vero e proprio.
Succede che in questo div che ho messo sopra (inserito come div nel div di sfondo cioè quello col link) ho inserito una immagine senza link ed untesto generico ma appena lancio la pagina per il test mi dà sempr eillink dell'immagine di sfondo...cioè anche se sopra questo div ho una immagine senza link o testo senza link, mi rimada sempre a tuosito.com
ciao ho capito perfettamente cosa intendi in effetti ti ho risposto in modo troppo afrettato...Originariamente inviato da fit
innanzi tutto grazie, ho inserito cursor
il problema che riscontro è il seguente ( e spero di essere più chiarra):
- ho inserito un div sopra questo da te indicatomi come se il div con il link andasse sullo sfondo e poi sopra, questo div nuovo, fosse il mio sito vero e proprio.
Succede che in questo div che ho messo sopra (inserito come div nel div di sfondo cioè quello col link) ho inserito una immagine senza link ed untesto generico ma appena lancio la pagina per il test mi dà sempr eillink dell'immagine di sfondo...cioè anche se sopra questo div ho una immagine senza link o testo senza link, mi rimada sempre a tuosito.com
ti mostro l'immagine che la repubblica sta utilizzando questo sotto è il link:
http://oas.repubblica.it/0/OasDefaul..._livraison.jpg
Io ti ho fatto mettere l'immagine di background in un "div"....in realtà ho visto che la repubblica lo ha messo nel "body", se osservi l'immagine dovresti capire come creare un layout ad hoc per te...
una volta messa l'immagina come sfondo del "body" fai in modo che SOLO le aree soprastanti lo sfondo abbiano il comando "onclick" le altre no!
se hai problemi postami il codice che te lo faccio io
spero che sia chiaro altrimenti chiedi pure
ciao
..ho cercato di costruire la pagina con il div per il sito e come body l'immagine di sfondo.
adesso ho 2 problemi:
1 - devo fare in modo che l'immagine si ridimensioni altrimenti resta per i fatti suoi
2 - non so come dare il link all'immagine caricata sul body da css
ti mando il codice base dem che ho fatto dove nel div contenitore ci andrò poi a sviluppare tutto il sito...al momento ho caricato una immagine per capire gli ingombri.
non so come mandarti i file quindi ti scrivo qui di seguito ilcodice base che ho utilizzato
body.css
body {
background-color:#000;
background-image:url(skin_1400x600_livraison.jpg);
background-repeat: no-repeat;
margin: 0px;
}
#contenitore {
margin: 0 auto;
width:910px;
padding-top:80px;
}
ho usato l'immagine stessa che hai linkato tu cioè quella di repubblica ed ho preso le misure del centro ossia dove è tutto nero e che quindi conterrà il sito
la index.html è la seguente:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>immagine di sfondo con link</title>
<style type="text/css"></style>
<link href="body.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div id="contenitore">
<div>[img]mio-sito.jpg[/img]</div>
</div>
</body>
se potessi aiutarmi te ne sarei grato perchè così potrei sia cambiare immagine di sfondo per cambiare il sito che per evidenziare qualcosa e rimandare ad una landing page.
grazie in anticipo
Ciao fit, ti posto tutto l'html della pagina come dovrebbe venire,
considera che il layout prevede body + 5 DIV flottanti con questa struttura:
-body
- div "contenitore" al 100% = (1230px)
- div "advtop" larghezza 100% alto 80px;
- div "advleft" larghezza 160px alto 800px
- div "miosito" larghezza 910px (qui crei la tua pagina!!)
- div "advright" larghezza 160px alto 800px
il body ha la sua immagine piazzata al centro
è una larghezza totale di 1230px (ho preso come riferimento le repubblica!!)
160px + 910px + 160px; (tot 1230px)
i 160px sono i due DIV che stanno a destra e sinistra del tuo div centrale con id=miosito
e fungono da link per lo sfondo cosi come un ulteriore div al top alto 80px..
ecco l'html intero:
Ti assicuro che è piu facile a farsi che a dirsi! se hai dubbi fammi sapere ;-)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color:#000;
background-image:url(skin_1400x600_livraison.jpg);
background-repeat: no-repeat;
background-position:center top;
margin-top:0px;
margin-left:auto;
margin-right:auto;
width:1230px;
}
#contenitore {
margin: 0;
width:100%;
}
#advtop{
width:100%;
height:80px;
float:left;
cursor
}
#advleft{
width:160px;
height:800px;
float:left;
cursor
}
#miosito{
background-color:#FFF;
width:910px;
height:800px;
margin-left:auto;
margin-right:auto;
float:left;
}
#advright{
width:160px;
height:800px;
float:left;
cursor
}
</style>
</head>
<body>
<div id="contenitore">
<div onclick="window.open('http://adv.it')" id="advtop"></div>
<div onclick="window.open('http://adv.it')" id="advleft"></div>
<div id="miosito">
</div>
<div onclick="window.open('http://adv.it')" id="advright"></div>
</div>
</body>
</html>
Ciao
......
dimenticavo ho usato "window.open" per aprire in blank la tua pubblicità,
se vuoi aprire in self sostituisci con: "window.location="
ri-ciao
grazie, funziona correttamente, l'unica cosa però è che avendo a sinistra il 160px se riduco la finestra del browser verso sinistra arriverò al punto in cui lo sfondo dell'immagine non corrisponderà più alla larghezza del mio sito.
ma va bene lo stesso, già così è ottimo!
grazie infinite
Permessi di invio
Rispondi quotando