WordPress Francophone

codex · 02-07-2008 07:50:48

Bonjour,

Ma configuration WP actuelle
- Version de WordPress : 2.5.1
- Thème utilisé : Pas encore décidé
- Plugins en place : -
- Nom de l'hebergeur : 1et1
- Adresse du site : -

Problème(s) rencontré(s) :

J'essaie d'adapter un projet/maquette de site à Wordpress et j'ai absolument besoin d'avoir plusieurs liens dans les images du theme.

Pour être + clair, dans le header et la colonne de gauche j'ai besoin que plusieurs logos et zones soient cliquables séparément.

Le peu d'infos que j'ai pu trouver ici ou là ne m'aident pas vraiment ou n'ont pas fonctionné malgré mes essais (je m'y connais peu en css et php...).

Avez-vous des idées, des pistes ?
merci!

Comme une image · 02-07-2008 10:03:19

Soit tu as plusieurs images collées les unes contre les autres, dans ce cas tu peux affecter à chaque image un lien, soit tu as une seule image composite dans laquelle tu veux découper des zones cliquables. Dans ce cas, il faut créer ce qu'on appelle une "MAP" et ce n'est ni du css, ni du php, c'est du HTML.

Fais une petite recherche google sur "map html" et puis ensuite, il vaut mieux que tu passes par un éditeur HTML pour faire ça. Je pense que Kompozer, gratuit, sait gérer ça.

Comme une image · 02-07-2008 17:40:23

DW ? Parfait !

Donc, une fois que tu as ta map et ton image, eh bien il faut que tu ajoutes ça à l'endroit qui va bien, probablement dans ton entête (donc fichier header.php) mais là, c'est à toi de voir !

Et puis DW sait ouvrir des fichiers PHP...

codex · 02-07-2008 23:56:39

Merci pour ton aide Comme une image

je sais mapper une image en html (j'utilise Dreamweaver pour info), mais comment insérer ce code à la place d'une image dans un thème Wordpress ??? est-ce possible ?

codex · 03-07-2008 00:01:03

merci encore pour ton aide,
en fait ce que je ne comprends pas (j'ai du mal à saisir la logique) c'est comment peut-on insérer du code html en lieu et place d'une ligne de code dans le css pour afficher l'image.

voici par exemple le code du css d'un theme :

#header {
position : relative;
margin : 0 auto 0 auto;
padding : 0 0 0 0;
background : url(../summernight/images/BAN.png) no-repeat;
background-position : top center;
}

codex · 03-07-2008 00:02:57

la suite (ca ne s'affichait pas... décidément...) :

et voici le code que donne la même image mappée (dans dreamweaver par exemple) :

<img src="file:///iMac/%A5%A5%20TRAVAUX/SITES/cooksound.com/V2/%A5%A5travail/summernight/images/BAN.png" width="530" height="170" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="75,34,182,116" href="www.google.com">
<area shape="rect" coords="211,25,345,77" href="www.yahoo.fr">
<area shape="rect" coords="359,29,499,78" href="www.voila.fr">
</map>

Dernière modification par codex (03-07-2008 00:03:59)

codex · 03-07-2008 00:04:50

comment est-ce compatible ?

comment faut-il insérer ce code dans la feuille de style css pour que l'image du theme soit cliquable selon le mappage ?...

j'ai fait plusieurs essais (c'est empirique) et je n'y arrive pas...

désolé si je ne suis pas clair, pourtant je fais des efforts !
merci encore

Xavier · 03-07-2008 14:27:00

Euh, ce code HTML ne se place pas dans une feuille CSS, mais directement dans ton fichier de template.

Comme une image · 03-07-2008 20:18:35

1/ Je te conseille de modifier le paramétrage de DW pour que, par défaut, il te formate ton code en XHTML 1.0 (ou ce que tu trouves dans header.php)

2/ Effectivement, le code généré est du code HTML donc à placer dans un fichier php (probablement aussi header.php si tu travailles sur une image en entête de page).
Il faut bien comprendre qu'un fichier php est un fichier HTML contenant en plus du code "PHP" visant à générer... du code (X)HTML, le tout devant être interprété par un navigateur (qui n'y comprend rien ni au php, ni au jsp, ni à l'asp, il ne comprend que (X)HTML et CSS, le navigateur !).

codex · 07-07-2008 01:45:48

Je vous remercie pour votre aide messieurs mais ça n'est toujours pas assez clair pour moi

(mettre le code de l'image mappée dans quel fichier template ? header.php ? index.php ? page.php ? entre quelle et quelle ligne ? je dois faire aussi d'autres changements (changer ou reprendre un nom d'image et le mettre à jour dans ce fichier + la feuille de style?) ???

j'ai fait plusieurs (de nombreux) essais, plusieurs (de nombreuses) recherches sur le web, essayé de modifier/rajouter une ligne h2, h3 et faire coïncider l'emplacement texte cliquable avec les éléments cliquables de mon image de header... rien, je n'y arrive toujours pas...

merci quand même

Comme une image · 07-07-2008 12:14:12

Tout dépend où est ton image, dans ton thème actuel ? Dans quel fichier ?

codex · 08-07-2008 01:16:43

Merci de ne pas lâcher l'affaire Comme une image

Je fais mes essais sur la base du thème iTheme 1.1 qu'on peut trouver ici

L'image de fond qui entoure le site correspond bien à ce que je veux faire -> avoir l'image du thème (ici 1 seule image donc) qui comporte des inscriptions, des logos cliquables.

Pour répondre à ta question, l'image est appelée dans la feuille CSS

Dans header.php, index.php, page.php, je ne vois pas où insérer les code de mon image mappée

Comme une image · 09-07-2008 12:22:12

Ahhhhhhhhhh !
C'est une background-image dans un CSS !!! C'est délicat parce qu'une map s'associe à une img (en "foreground", donc).

Bon, déjà, il faut que tu localises les éléments sur lesquels s'applique ce fond.

1/ ton image est associée à une classe ou un id
2/ cette classe ou cet id doit se retrouver dans ton thème => quel(s) fichier(s) de ton thème ? [NB : non ! je ne téléchargerai pas ton thème et je ne ferai pas le boulot pour toi tongue ]

Une fois cette partie débroussaillée, plusieurs possibilités :
1/ Modifier le thème pour que le background deviennent foreground. Si ton image est recouverte par du texte, il faut créer des div et les placer en conséquence. Ensuite, insérer ta map.
2/ Modifier le thème pour placer sur ton image des div « transparentes » cliquables.

Lumière de Lune · 09-07-2008 13:15:54

Oui et les divs transparentes cliquables, sous IE, c'est galère (façon de dire que ça ne marche pas).
Au "mieux" du pire (parce que c'est vraiment tordu), mettre des gifs transparent en <img src) mais il est beaucoup plus intelligent de découper l'image et de la mettre dans des div directement, au lieu du background

codex · 10-07-2008 08:13:51

Merci à vous deux.

Je m'y remets ce soir (ça s'annonce pas simple cette histoire, et pourtant va bien falloir que ça marche...).

WordPress Francophone

La référence en matiere de moteur de blog.

Le multi-blogs devient un jeu d'enfant !

La communauté, c'est vous qui la faites !

WordPress et vous !

Annonce

#1 02-07-2008 07:50:48

Images avec plusieurs liens

#2 02-07-2008 10:03:19

Re: Images avec plusieurs liens

#3 02-07-2008 17:40:23

Re: Images avec plusieurs liens

#4 02-07-2008 23:56:39

Re: Images avec plusieurs liens

#5 03-07-2008 00:01:03

Re: Images avec plusieurs liens

#6 03-07-2008 00:02:57

Re: Images avec plusieurs liens

#7 03-07-2008 00:04:50

Re: Images avec plusieurs liens

#8 03-07-2008 14:27:00

Re: Images avec plusieurs liens

#9 03-07-2008 20:18:35

Re: Images avec plusieurs liens

#10 07-07-2008 01:45:48

Re: Images avec plusieurs liens

#11 07-07-2008 12:14:12

Re: Images avec plusieurs liens

#12 08-07-2008 01:16:43

Re: Images avec plusieurs liens

#13 09-07-2008 12:22:12

Re: Images avec plusieurs liens

#14 09-07-2008 13:15:54

Re: Images avec plusieurs liens

#15 10-07-2008 08:13:51

Re: Images avec plusieurs liens

Pied de page des forums