Discussion :

[Trinita92]

Bonjour à tous,

Cela fait plus d'1 semaine que j'essaie désespérément de créer un menu cliquable sur mon blog test... (oui j'ai un blog test, pour trouver les bonnes manips et les filer toutes mâchées à mes futures élèves blogueuses aussi idiotes que moi..)

Je suis sur un mac OS X, et voilà ce que j'ai fait (après mille et une péripéties de débutante) jusque là:
- J'ai créé un petit menu test sur Gimp
- J'ai hébergé mon image en .png sur Dropbox (afin d'avoir un lien bien clair - sur mac je ne comprends rien aux emplacements des dossiers)
- J'ai utilisé le très pratique http://www.maschek.hu/imagemap/imgmap pour définir mes zones cliquables et récupérer le code de tout ça
- J'ai entré ce code dans le code de mon blog Blogger, et cliqué sur Enregistrer...

Et là... impossible de valider les modifications, car une fois ce petit bout de code intégré, Blogger me trouve erreur sur erreur dans le code pré-existant, du genre:
"Erreur d'analyse XML, ligne 858, colonne 7 : The string "--" is not permitted within comments.."

Alors que c'est Blogger LUI-MÊME qui a généré ce code prédéfini et que je n'ai touché à RIEN d'autre !

En tant que tout débutante qui se forme au code en fonction de ce qu'elle a besoin de savoir sur l'instant T, je me suis dit que ce problème était peut-être lié à l'EMPLACEMENT auquel j'ai intégré le code de mon image map. Car il est vrai, c'est vraiment "très intuitivement" que je l'ai placé...


Voilà le code, généré par Maschek, que j'ai ajouté à mon blog:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<img src="Sans titre" width="1050" height="160" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Mon nom —>
<area shape="rect" coords="34,23,135,133" href="http://kobai-uneblondeetblogger.blogspot.fr/" />
<area shape="rect" coords="166,28,408,136" href="http://uneblondeet-blogger.blogspot.fr"  />
<area shape="rect" coords="444,29,602,136" href="http://kobai-uneblondeetblogger.blogspot.fr/p/un-onglet-test.html" />
      </map>

Je l'ai positionné tout à la fin du <header/> du <body/>
hum.. en espérant que ça signifie quelque chose ce que je précise là.
Je voulais coller tout le code mais mon message ne passe pas, trop long.


D'après les éléments donnés, pensez-vous que mon problème puisse être dû à une erreur d'"emplacement"?


Autre point, j'ai aussi l'impression que mon image ne "sort" pas.
J'ai essayé de tester le code de l'image map sur http://jsfiddle.net pour voir.
Et seul un cadre "vide" apparaît.
Comme si le lien n'était pas fait avec la source.

Pour info j'ai trouvé bizarre que mon img src soit appelée "Sans titre", alors j'ai essayé de la nommer.
J'ai donc essayé de plusieurs manières:
- "nom de mon fichier.png"
- "user/....../nom de mon fichier.png" (erreur possible vu que j'ai BEAUCOUP de mal avec les liens des fichiers sur Mac OS)
- "www....le lien généré par Drop Box"
Mais rien n'y fait.

Du coup, 2 questions en 1 dans ce très long message pour lequel je m'excuse d'avance:
1. Pourquoi tout mon code se barre en sucette dès que j'intègre ce petit bout de code inoffensif d'image map ?
2. Pourquoi mon image semble ne pas se linker et donc se charger correctement ?

Je serais tellement heureuse que quelqu'un puisse m'aider à trouver une solution...

Merci d'avance !!!

Trinita girl

[Trinita92]

Avec toutes ces informations et quelques bons cauchemars de balises carnivores, j'en ai oublié de précisé que j'avais fait un autre essai, qui me prouve que mon image ne se charge pas avec ce code (et toutes ses déclinaisons avec les url et nom de fichier de mon image):

J'ai enfin réalisé à un moment que ça ne servait à rien du tout de s'ennuyer à chercher un emplacement à ce code dans Blogger, l'interface que j'utilise pour mon blog....
Puisqu'il y a déjà un gadget prévu à cet effet et qu'on n'a qu'à entrer le code HTML ou Javascript dedans !!!

C'est donc ce que j'ai fait, et c'est A CETTE OCCASION que j'ai vérifié, encore une fois, que mon "truc" apparaissait bien MAIS: sous la forme d'un cadre vide (non cliquable bien sur).

Voilà.
Du coup ma question principale est de savoir COMMENT faire le bon lien avec mon image !

...
Merci encore.

[rodolphebrd]

Bonjour et bienvenue sur developpez.com,

Etes-vous en train de réaliser un menu ?

Si oui ce n'est pas le bon procédé.
A mon avis une liste non-ordonnées avec des images en background pourrait être judicieux. (si j'ai bien compris la demande).

Voici un exemple : http://www.tankedup-imaging.com/css_dev/rollover.html

[Trinita92]

Bonjour!

Hm.. Oui, en effet, cela ressemble a ce que je veux faire dans le fonctionnement.

C'est bien un menu personnalisé que je veux faire, et ce a partir d'images que j'aurais crées moi même (sur Gimp).
Pour l'instant j'aimerais déjà réussir a faire apparaître mon image et a faire en sorte que les boutons mènent aux bons liens.

La prochaine étape sera de réaliser des animations d'images au dessus de chaque bouton/onglet lors du clic et du passage de la souris (a l'aide de Javascript, si j'ai bien suivi les tutos et cours que j'ai lus jusque la).

Je sais, ambitieux pour quelqu'un qui n'y connait encore rien au code, mais je suis déterminée!


Je précise que le tout sera a intégrer a un blog Blogger.
Mais j'imagine que cela ne changera pas grand chose?

Je suis persuadée que vous m'aiderez a trouver les solutions!!

Comme vous l'avez compris je suis ouverte a toute suggestion et prête a mettre les mains dans le cambouis!

Merci encore

[rodolphebrd]

Avez-vous consulté les ressources de Blogger : http://optimisation-blogger.blogspot...lon-texte.html

[Astoumix]

Bonjour,

Juste pour dire que dans ton code généré par Maschek, il y a une erreur.
Un commentaire n'est pas fermé donc les balises <area> ne sont pas du tout prise en compte.

La correction du code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<img src="Sans titre" width="1050" height="160" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Mon nom -->
<area shape="rect" coords="34,23,135,133" href="http://kobai-uneblondeetblogger.blogspot.fr/" />
<area shape="rect" coords="166,28,408,136" href="http://uneblondeet-blogger.blogspot.fr"  />
<area shape="rect" coords="444,29,602,136" href="http://kobai-uneblondeetblogger.blogspot.fr/p/un-onglet-test.html" />
      </map>

Et comme tu l'as dit, l'attribut src de la balise img ne devrait pas être comme ça. Il faut tu partes du fichier où ce code est mis et que tu remontes jusqu'à ton image.

Exemple

src="img/sanstitre.png" (là, ça veux dire que en partant de ton fichier où se situe le bout de ton code, ton image se situe dans le dossier img qui est à la même hauteur que ton fichier).

La balise img