Back to top

Autore Topic: Convertire un header (imm. di sfondo) in mappa immagine cliccabile, come fare?  (Letto 2376 volte)

Offline shuken

  • Nuovo arrivato
  • *
  • Post: 26
    • Mostra profilo
Salve,
mi è stato chiesto di trasformare l'header del sito www.confidifermo.it da immagine statica in mappa immagine cliccabile.
In particolare dovrebbe diventare cliccabile il piccolo logo di confindustria che si trova di fianco alla data odierna in alto a destra, magari cambiando colore on mouse over.
E' possibile realizzare questa cosa e se si, come?
Ho provato a cercare sul forum ma non ho trovato una soluzione che faccia al caso mio, o perlomeno mi sembra di caprie che non ci sia un metodo diciamo "standard".
Se aveste bisogno di alcuni listati, tipo del css, fatemi sapere e li posterò subito.
Spero che qualcuno possa aiutarmi.

Grazie.

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Ma certo che è realizzabile, e non è neppure un problema di Joomla!
Inserisci quella immagine dentro il div id top nelle index.php invece che richiamarla come sfondo del div stesso con i css. Poi la  linki come ti pare, anche facendo cambiare colore al loghetto con il muse over   ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline shuken

  • Nuovo arrivato
  • *
  • Post: 26
    • Mostra profilo
Dunque, ho individuato questi due pezzi di codice:
Dentro il css ho:
#top {
   background: #000 url(../images/topbg.jpg) top;
   color: #fff;
   height: 130px;
   width: 938px;
   margin: 0 auto;
   border-left: 1px solid #D7D7D7;
   border-right: 1px solid #D7D7D7;
       border-top: 1px solid #D7D7D7;
   border-bottom: 1px solid #D7D7D7;
   text-align: left;
}

Mentre dentro il file index.php all'interno della cartella del Template ho:
<div id="container">
<div id="top">
<div id="toptop">
<div id="topleft">
<a href="index.php"><?php echo $mainframe->getCfg('sitename'); ?>[/url]
</div>
<div id="topright">
<?php echo JHTML::_('date', 'now', JText::_('DATE_FORMAT_LC')) ?>
</div>
</div>

Ho generato il codice html della image map, se è corretto dovrebbe essere questo:
<map name="map">
<area shape="rect" coords="730,1,781,49" href="http://www.confindustriafermo.it" />
</map>
<img src="topbg.jpg" width="940" height="130" border="0" usemap="#map" />
il file topbg.jpg si trova nella stessa cartella del file index.php

Come devo procedere per inserire il codice?
Cosa cancello e dove lo inserisco?
Non sono molto pratico, mi farebbe comodo una mano :)

Grazie

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Incolla il codice della mappa immagine sotto questo:
<div id="top">
 ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline shuken

  • Nuovo arrivato
  • *
  • Post: 26
    • Mostra profilo
Ci avevo già provato ma non funziona.
Analizzando l'immagine con firebug da quello che ho capito rimane l'impostazione presente sul css.
Se provo a cancellare la voce dal css non carica nessuna immagine.
Dove posso guardare?

 



Web Design Bolzano Kreatif