L'esempio corretto è questo

http://essedi.altervista.org/_EVO10/_esterno/index.html

Ciao grazie per l'esempio ma vorrei capire meglio... io le immagini a cui devo associare l'area linkabile sono tuttuno con lo sfondo in questo momento... devo quindi avere i file dei loghi separati, inserirli nella cartella "files" all'interno del mio progetto e richiamarli con il codice che mi indichi (  #sdFacebook {
 background: url("files/Facebook_n.png");
 width: 60px;
 height: 60px;
 position: fixed;
 top: 200px; /* distanza dal margine superiore della  pagina      */
 left: 50%; /*lato sinistro al centro della pagina                */
 margin-left: -540px; /*distanza verso sinistra dal centro pagina */
}

#sdFacebook:hover {
 background: url("files/Facebook_h.png");
}
...ma la parte che per esempio ti ho messo in grassetto la lascio o serve a me a cosa serve il codice e poi va tolto se no non funziona???

altra cosa... nella versione 11 la sezione esperto non si trova più nelle schermate iniziali del programma è giusto se uso la sezione esperto che trovo tramite la mappa del sito - home page - proprietà?

grazie 1000000000

X

Il mio è solo uno dei tanti metodi utilizzabilli per realizzare quello che hai chiesto.

Se vuoi utilizzarlo, non assegnare allo sfondo una immagine, ma solo il colore bianco.

Poi segui le istruzioni.

Il testo compreso tra /* e */ sono dei semplici commenti, inseriti con la speranza (vana?) di rendere più comprensibile il codice.

Nel caso specifico:

• il mio sito è largo 960 pixel
• il valore 50% della proprietà left posiziona il lato sinistro dell'immagine a metà pagina, cioè a 480 pixel (960 diviso 2) dal margine sinistro
• il valore -540px di margin-left sposta il lato sinistro dell'immagine di 540 pixel a sinistra dal centro pagina. Esso va calcolato e/o trovato per tentativi in modo da raggiungere il risultato voluto.

Ma qualsiasi sistema per aggiungere al sito funzionalità non previste dai canonici 5 passi richiede un minimo di conoscenze nel campo HTML e CSS.

x Giuseppe,
... per me non è tanto chiara la tua richiesta sulla immagine di sfondo, e quale...!...
... l'immagine che hai presentato contiene anche un menu grigio orizzontale, e ne fa parte...?...
... quale sarebbe l'immagine reale da mappare...?... e dove sarebbe posizionata...?...
... se non sei pratico di mappature, pubblica l'esempio completo e REALE di questa pagina, magari un duplicato nascosto, con ogni cosa a suo posto, e poi si vedrà sul come agire, in un modo o nell'altro...
... puoi intanto prendere spunto anche da un semplice esempio fatto con DIV-Custom e la relativa griglia, che non dovrebbe porti limiti:
http://www.zspace.it/kolasim/website/DivCustom_Lombardia/
http://www.zspace.it/kolasim/website/DivCustom_Lombardia/res/home.css

... mappare con SwishMax sarebbe ancora più semplice ed immediato, ma occorrerebbe sapere del contesto...
.

ciao

ciao KolAsim... nell'immagine che ho allegato c'è la bozza della mia home ma come detto quello che è l'immagine di sfondo comprende i loghi che ho evidenziato con una cornice arancione più naturalmente il bianco di fondo... la mia richiesta è quella di poter creare una mappatura traparente delle dimensioni dei rettangoli arancioni che possano essere linkabili... spero di essere stato più chiaro....

intanto grazie a EsseDi per la porposta di soluzione stasera a casa vedo di cimentarmi... kolasim se hai idee da sperimentare fammi sapere... grazie a tutti e due.... gentilissimi

... come detto, per me, se pubblichi la pagina di prova, si risolverebbe in modo quasi immediato; ...io mi posso basare solo su quanto detto da me...

.

ciao

ok stasera pubblico la pagina così come è venuta finora... domani ti invio il link... grazie

ciao essedi è veramente umiliante ma seguendo quello che mi scrivi (e sicuramente stò sbagliando qualcosa...) non riesco a visualizzare nulla... ti descrivo cosa ho fatto...

1- ho tolto l'immagine di sfondo ed ho messo il colore bianco

2- ho salvato le immaginisingolarmente come file .png/jpg

3- le ho messe in una cartella chiamata "files" ma non ho ben capito quando scrivi "Tutte le immagini utilizzate nel codice CSS sono state allegate nella cartella files tramite il comando Aggiungi di un oggetto HTML, inserito solo per questo scopo e dichiarato nascosto tramite l'apposito comando nella barra degli strumenti disponibile in "Creazione mappa"... io in questo caso ho creato una pagina ed inserito un elemento html e nella sezione esperto alla voce files allegati al codice ho cercato la mia immagine

4- ho inserito il seguente codice nella sezione esperto prima della chiusura head della home page passando dalla mappa:

<style type="text/css">
#sdVillafranchese {
  background: url("files/LOGO.png");
  width: 132px;
  height: 179px;
  position: fixed;
  top: -100px;
  left: 50%;
  margin-left: -240px;
}
 #sdVillafranchese:hover {
  background: url("files/LOGO.png");
}


</style>

purtroppo non visualizzo nulla

cosa sbaglio?

grazie

per kolasim... ho pubblicato la bozza del sito... ecco l'indirizzo..

http//www.acd-villafranchese.it

il logo della villafranchese ed i loghi dei finti sponsor sono immagini nello sfondo e vorrei riuscire a creare un link sul logo della villafranchese per tornare alla home e sui loghi degli sponsor per mandarli ai loro siti...

grazie

Prima di tutto: quello che nella versione 10 era "Impostazioni Generali - Sezione Esperto", nella 11 è diventato "Impostazioni Avanzate – Statistiche, SEO e Codice – Sezione Esperto". È lì che devi inserire i codici se vuoi che le icone siano presenti sullo sfondo di tutte le pagine. Se li inserisci nelle Proprietà della Home Page, esse saranno presenti solo sullo sfondo della Home Page.

Per il tuo punto 3

devi salvare le immagini in una tua cartella. Io in genere memorizzo tutte le risorse destinate al progetto (immagini, PDF, JS, ecc.) in una unica cartella che chiamo "_risorse". Nulla vieta di chiamare "files" la suddetta cartella, purché non sia la cartella "files" del progetto.

La mia frase da te citata contiene un errore, che correggerò quanto prima.

Tutte le immagini utilizzate nel codice CSS sono state allegate nella cartella files tramite il comando Aggiungi di un oggetto HTML, inserito solo per questo scopo e dichiarato nascosto tramite l'apposito comando nella barra degli strumenti disponibile in "Creazione mappa".

Non si può dichiarare nascosto un oggetto HTML, ma la pagina in cui esso è inserito.

Il codice CSS da te riportato è formalmente corretto. Tieni presente che il nome del file richiamato nella proprietà background (LOGO.png nel tuo esempio) deve essere identico a quello del file caricato nella cartella files, compreso lettere maiuscole e minuscole.

Non volendo differenziare l'immagine al passaggio del mouse, puoi eliminare la corrispondente regola

 #sdVillafranchese:hover {
  background: url("files/LOGO.png");
}

Infine nei due esempi da te allegati non vedo riferimenti al codice HTML presente in fondo alla pagina del mio esempio, che nel tuo caso dovrebbe essere più o meno:

***<a id=" sdVillafranchese " title=" Villafranchese "
***  href="http://www. sdVillafranchese.it" target="_blank">
***</a>

rimuovendo gli asterischi di inizio riga, aggiunti solo evitare che Answer stravolga il codice.

P.S. Il tuo link http//www.acd-villafranchese.it non funziona.

ciao kolasim nel codice trovo che lo sfondo è un'immagine chiamata bg.png ... cosa comprende il riquadro bianco e la cornice rossa ed i loghi sono tutti separati...giusto?

grazie bella soluzione... l'unica cosa che non farei è il colore dell'are quando si passa sopra... lo terrei comunque trasparente...bella ora provo e vedo cosa combino...

... mi sono basato sul codice della tua pagina, quindi la parte iniziale quella che riguarda il "bg.png" che sarebbe il tuo sfondo non devi prenderlo in considerazione...

... la parte di codice che ti interessa è quello dei TAG compresi tra INIZIO 1 e FINE 1 e tra INIZIO 2 e FINE 2...

... questo è lo stesso esempio senza il colore sul passa sopra: http://www.zspace.it/kolasim/div_custom/divCustom_link2.html

... il colore serviva per verificare la centratura dei link, dopodichè puoi eliminare il riferimento a "block:hover " come fatto in questo mio esempio...

...il primo link porta alla INDEX (index.html); ..gli altri vanno su Google, ed al posto di questi URL metterai quelli reali degli sponsor...

.

... ... noto adesso che hai già rimediato con la trasparenza totale, OK anche così...

.

ciao