Home › Forum › Problemi Vari con WP › Inserire immagine cliccabile nell’header
-
AutorePost
-
-
11 Novembre 2008 alle 13:16 #8476unbloginduePartecipante
Salve,
utilizzo il tema NewYorker 3.0 sul blog http://www.unblogindue.it con un’immagine di testata creata da me.
L’immagine ha una barra nera sulla quale vorrei scrivere i nomi di alcune sezioni speciali e vorrei poi renderli cliccabili, come in una qualsiasi barra.
Per fare questo ho trasformato la mia immagine in una mappa cliccabile con il programma CoffeCup Image Mapper e mi ritrovo con l’immagine e un file html che devo inserire nei miei file per far funzionare il tutto.
Il mio problema, che non sono riuscita a risolvere dopo ore di ricerche, è che non so dove inserire questo file HTML o dove incollare il codice.
Spero che possiate aiutarmi,grazie in anticipo..
Sara
Sto provando ad inserirvi il codice che devo sistemare ma non riesco..
-
11 Novembre 2008 alle 15:11 #59317gollum1Partecipante
guarda il sito che sto mettendo in piedi, nella testata vedi i quattro marchi, ebbene quelli sono una mappa cliccabile. non è difficile da fare, una volta che hai la mappa, la metti semplicemente dove avresti normalmente il codice per l’inserimento dell’immagine.
quindi visto che stai parlando della testata, posso presumere che sia nell’header che devi inserirlo. (naturalmente non devi usare i css per inserire l’immagine, altrimenti non riesci a refernziarla con la mappa).
Byez
—
Gollum1
-
11 Novembre 2008 alle 15:25 #59318unbloginduePartecipante
Ecco, è esattamente quello che voglio fare io!
Il mio problema è che non so in quale punto dell’header inserire il codice..
Non mi sono avventurata più di tanto per non rischiare..
Il mio header.php è questo:
<!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 profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /><title> <?php wp_title(''); if (function_exists('is_tag') and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (is_search()) { ?> Search for <?php echo wp_specialchars($s,1); } if ( !(is_404()) && (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> | <?php } ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /><link rel="shortcut icon" type="image/gif" href="<?php bloginfo('template_url'); ?>/favicon.gif" /><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /><link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /><link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /><script src="<?php bloginfo('template_directory'); ?>/js/addEvent.js" type="text/javascript"></script><script src="<?php bloginfo('template_directory'); ?>/js/sweetTitles.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/sweetTitles.css" media="screen,projection" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><?php wp_get_archives('type=monthly&format=link'); ?><?php wp_head(); ?></head><body><div id="wrap"><div id="content"><div id="header"> <h1>/"><?php bloginfo('name'); ?></h1>
</div>
Sei stato molto gentile e non vorrei stressarti ma se solo mi dicessi dove mettere il codice…
Ti ringrazio!
Il codice che dovrei inserire è questo:
<!-- Beginning of Client Side Image Map -->
<map name="NotNamed">
-qui tutte le coordinate e i link-
</map>
<!-- End of Client Side Image Map -->
-
11 Novembre 2008 alle 17:00 #59323gollum1Partecipante
all’interno del div con l’identificativo header….
ci devi mettere il codice completo della mappa, quindi anche l’immagine vera e proprio, altrimenti se metti l’immagine come attributo css non riuscirai a farci la mappa.
per semplicità tutto il blocco
<div id=”header”> < img /> <?php bloginfo(‘name’); ?></h1></div>
lo togli e ci metti al suo posto un
< div id=”header”>
< a href=”<?php bloginfo(‘url’); ?>”>
< img usemap=”#header” alt=”Testata” src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/header.png” width=”760″ height=”339″ />
< /a>
< map name=”header” id=”map_menu_header”>
< area alt=”STG” shape=”circle” href=”/specialita-tradizionale-garantita” coords=”559,307,28″ />
< area alt=”IGP” shape=”circle” href=”/indicazione-geografica-protetta” coords=”499,308,28″ />
< area alt=”DOP” shape=”circle” href=”/denominazione-di-origine-protetta” coords=”437,307,28″ />
< area alt=”PAT” shape=”circle” href=”/prodotti-agroalimentari-tradizionali-italiani” coords=”360,307,30″ />
< /map>
< /div> <!– header –>
byez
—
Gollum1
-
11 Novembre 2008 alle 21:05 #59340unbloginduePartecipante
Grazie, grazie e ancora grazie!
Domani testo il tutto e poi ti faccio sapere!
-
12 Novembre 2008 alle 9:44 #59345unbloginduePartecipante
Ho seguito tutte le tue indicazioni ma niente..
Ho visto che se non cambio l’immagine dal foglio di stile non la reperisce proprio..
Vado sul style.css e metto l’indirizzo della nuova immagine e allora la cambia, ma non è riconosciuta come mappa..
-
12 Novembre 2008 alle 13:20 #59351gollum1Partecipante
Come ti ho già indicato, non devi cambiare l’immagine dal css… togli il caricamento dell’immagine dal css…
segui questi primi passi:
1) togli l’immagine dal css.
2) vai nel foglio di header.php, taglia via tutto quello che hai da div id=header alla chiusura del suo div (i div compresi)
3) in quel punto ci metti un include al file in cui vai a copiare praticamente il blocco dell’header.
arriva a questo punto e vedi se ti ritrovi l’header di nuovo corretto come lo era prima… (senza l’immagine ovvio, visto che l’hai tolto, ma quello che importa ora è che non ci sia errore nel codice php).
se tutto funziona ti do le altre informazioni su come procedere.
Byez
—
Gollum1
-
12 Novembre 2008 alle 14:08 #59352unbloginduePartecipante
Ok ho fatto tutto e ora il codice non da errori e non c’è l’immagine.
Sono pronta a procedere!
ecco il mio nuovo header.php
<!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 profile=”http://gmpg.org/xfn/11″><meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” /><title> <?php wp_title(”); if (function_exists(‘is_tag’) and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (is_search()) { ?> Search for <?php echo wp_specialchars($s,1); } if ( !(is_404()) && (is_search()) or (is_single()) or (is_page()) or (function_exists(‘is_tag’) and is_tag()) or (is_archive()) ) { ?> | <?php } ?> <?php bloginfo(‘name’); ?></title>
<meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats –><link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” /><link rel=”shortcut icon” type=”image/gif” href=”<?php bloginfo(‘template_url’); ?>/favicon.gif” /><link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” /><link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” /><link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” /><script src=”<?php bloginfo(‘template_directory’); ?>/js/addEvent.js” type=”text/javascript”></script><script src=”<?php bloginfo(‘template_directory’); ?>/js/sweetTitles.js” type=”text/javascript”></script><link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/css/sweetTitles.css” media=”screen,projection” /><link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” /><?php wp_get_archives(‘type=monthly&format=link’); ?><?php wp_head(); ?></head><body><div id=”wrap”><div id=”content”>
<div id=”header”>
< img src=”header2.jpg”>
<map name=”NotNamed”>
< area name=”Home Page” shape=”rect” coords=”62,201,170,230″ href=”http://www.unblogindue.it” alt=”Home Page”>
< area name=”Domenica Fotografica” shape=”rect” coords=”247,200,445,227″ href=”http://www.unblogindue.it/?page_id=786″ alt=”Domenica Fotografica”>
< area name=”Eventi in Sardegna” shape=”rect” coords=”531,199,681,230″ href=”http://www.unblogindue.it/?page_id=1282″ alt=”Eventi in Sardegna”>
< area name=”Iniziative” shape=”rect” coords=”757,201,838,225″ href=”http://www.unblogindue.it/?cat=86″ alt=”Iniziative”>
< area name=”Contatti” shape=”rect” coords=”929,200,996,225″ href=”http://www.unblogindue.it/?page_id=3382″ alt=”Contatti”>
< area name=”Iscriviti ai nostri feed!” shape=”rect” coords=”1063,180,1111,226″ href=”http://feeds.feedburner.com/UnBlogInDue” alt=”Iscriviti ai nostri feed!”>
</map>
</div>
-
12 Novembre 2008 alle 17:54 #59357gollum1Partecipante
1) se non vedi l’immagine header2.jpg, evidentemente hai un errore nel path per raggiungerla. se la tieni nella stessa directory del tema ( in images/ presumibilmente)… mettici:
src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/header.png”
Il tuo codice dovrebbe essere il seguente:
< div id=”header”>
< a href=”<?php bloginfo(‘url’); ?>”>
< img usemap=”#NotNamed” alt=”Logo” src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/header2.jpg” />
< /a>
< map name=”NotNamed” id=”map_header”>
< area name=”Home Page” shape=”rect” coords=”62,201,170,230″ href=”http://www.unblogindue.it” alt=”Home Page”>
< area name=”Domenica Fotografica” shape=”rect” coords=”247,200,445,227″ href=”http://www.unblogindue.it/?page_id=786″ alt=”Domenica Fotografica”>
< area name=”Eventi in Sardegna” shape=”rect” coords=”531,199,681,230″ href=”http://www.unblogindue.it/?page_id=1282″ alt=”Eventi in Sardegna”>
< area name=”Iniziative” shape=”rect” coords=”757,201,838,225″ href=”http://www.unblogindue.it/?cat=86″ alt=”Iniziative”>
< area name=”Contatti” shape=”rect” coords=”929,200,996,225″ href=”http://www.unblogindue.it/?page_id=3382″ alt=”Contatti”>
< area name=”Iscriviti ai nostri feed!” shape=”rect” coords=”1063,180,1111,226″ href=”http://feeds.feedburner.com/UnBlogInDue” alt=”Iscriviti ai nostri feed!”>
< /map>
< /div> <!– header –>
Nota che anche nella definizione dell’immagine da usare come sfondo per la mappa devi dirgli che deve essere usata per questa mappa, appunto…
Byez
—
Gollum1
-
12 Novembre 2008 alle 19:48 #59361unbloginduePartecipante
Finalmente ho risolto!!
Sono contentissima, sei stato assolutamente fenomenale!
Se ti va puoi vedere il risultato su http://www.unblogindue.it
Ti ringrazio tantissimo davvero!
-
31 Marzo 2009 alle 22:50 #64250MariposalibrePartecipante
ciao mi aiuti per favore a inserire una cartina come mappa immagine, con il codice di sopra non mi funziona. Grazie tante
-
11 Luglio 2011 alle 10:26 #86361santoroagPartecipante
unblogindue potrei sapere quale widget hai usato per avere quell effetto nella parte destra: “sezioni” ? Grazie…
-
-
AutorePost
- Devi essere connesso per rispondere a questo topic.