Come si mappa un immagine di sfondo con relativi collegamenti? RISOLTO

[fabrisc]

Salve... riposto la domanda che avevo inserito nella sezione sbagliata:
Avrei la necessità di mappare l'immagine del topheader. Nello specifico l'immagine contiene 3 loghi che dovrebbero appunto aprire 3  siti divesri (www.pediatriasicilia.it/38). L'immagine è richiamata dal file template.css del template stesso.  Qualcuno saprebbe aiutarmi?
Sarebbe una soluzione inserire delle immagini in posizione assoluta sovrascrivendo quelle del banner? Se si come procedere?
Grazie infinite per l'aiuto

[conti1]

ciao
con una sola immagine che contiene in se stessa altre 3 loghi non si puo fare i link
, nel senso che hai una sola immagine e non 4 immagini separate.
devi creare le posizioni esempio

Codice: [Seleziona]

<div id="logo">
<div id="logo1">
<div id="logo2">
<div id="logo3">
di cui il logo e l'immagine totale gli altri logo1-2-3  sono le immagini che andrai ad inserire sopra il il primo logo  in questo modo hai tutti i 3 loghi con il suo link.
naturalmente devi fare anche il css x ogni logo  altrimenti non si allinea orizzontalmente ,
questo e quello che mi viene in mete .

[fabrisc]

Ho risolto anche se ho fatto mattina. Grazie delle dritte.
Prima di tutto ho ritagliato la parte dei loghi e quindi creato un file da sovrascrivere sopra l'immagine di sfondo

Ecco la soluzione:

1 - Aggiunta la posizione nel file XML dove andrò a inserire il ritaglio dei loghi

  <positions>
  <position>user3</position>
  <position>left</position>
  <position>right</position>
  <position>syndicate</position>
  <position>debug</position>
  <position>debug</position>    </positions>

2 - Modificato il file template.css aggiungendo i seguenti parametri che verranno poi richiamati dal file Index.php
in questo modo ho pozizionato l'immagine ritagliata in maniera perfetta sopra i 3 loghi
#logo1 {
   position: absolute;
   top: 45px;
   left: 248px;
  }

3 - Aggiungo le seguenti righe nel file index.php  e predisamente prima che venga richiamata l'immagine di sfondo
            <?php /*Aggiungo la posizione center!!!! */?>                                       
<?php if ($this->countModules('logo1')) : ?>
  <div id="logo1">
        <jdoc:include type="modules" name="logo1" style="xhtml" />
    </div>
<?php endif; ?>

4 - ho caricato il file jpg ritagliato su dreamweaver e ho mappato l'immagine effettuando quindi 3 mappe collegate ai miei 3 loghi (e quindi relativo link)

5 - ho creato un modulo HTML PERSONALIZZATO e ho incollato il codice ottenuto da dreamewaver.

Spero di essere stato utile alla comunità 

[vales]

Fabrisc, la soluzione non mi convince.
Hai inserito delle posizioni di moduli che non servono.
Devi inserire le div come ha detto conti1.
Poi nelle div posizionate esattamente sui loghi, dell'immagine grande in background, inserisci qualcosa di trasparente, anche una immagine.gif trasparente un po' più piccola di ogni logo, che fa da link.

[vales]

Prova così:

Codice: [Seleziona]

modifiche al template

<div id="header_r">
                                                   
<div id="logo1"><a href="tua pagina 1">
<img border="0" src="immaginetrasparente.gif" width="105" height="125">
</a></div>
<div id="logo2"><a href="tua pagina 2">
<img border="0" src="immaginetrasparente.gif" width="105" height="125">
</a></div>
<div id="logo3"><a href="tua pagina 3">
<img border="0" src="immaginetrasparente.gif" width="105" height="125">
</a></div>


</div>

dentro le div metti le immagini trasparenti con i link alle tue pagine

modifiche al css template.css

div#header_r {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/top.jpg) no-repeat scroll right bottom;
height:297px;
padding:0;



div#logo1 {
clear:left;
        float:left;
        height:130px;
        margin-left:200px;
        width:110px;
}

div#logo2 {
float:left;
        height:130px;
        margin-left:50px;
        width:110px;
}

div#logo3 {
float:left;
        height:130px;
        margin-left:60px;
        width:110px;
}

[fabrisc]

Ok ci provo subito...   
in questo modo nemmeno devo mappare l'immagine, creare un modulo e una posizione.
Ti faccio sapere GRAZIE

[vales]

Con Firebug ed con una prova semplificata per gli allineamenti in locale funziona.
Se ci sono problemi segnala.

[fabrisc]

Perfetto funziona alla grande. Tuttavia mi resta un problemino...
quando clicco i loghi compare il bordo del riquadro tratteggiato, come posso elimitarlo?

Grazie ragà

[vales]

Al momento non ho idea di come eliminare i punti.

Ti segnalo che c'è rimasto un div#logo che contiene un link non completo. Penso sia un residuo nei precedenti tentativi e che tu lo possa togliere.

[fabrisc]

Intendi questo ?:

</div>
<div id="logo"><a href="index.php"><?php echo $mainframe->getCfg('prova') ;?>[/url]
</div>

Faceva già parte del codice del template. Ho provato a toglierlo e non funzionava più nulla.

PS: come si fa a scrivere nel forum evidenziando in bianco il codice come fate voi?

[vales]

Ok. Con Firebug non vedevo il resto del link. Comunque quel link non sono riuscito a trovarlo online.

Per evidenziare il codice si usa l'icona # quando siamo in fase di editor di messaggio, e fra i tag che crea si inserisce il codice.