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

[Trinita92]

Bonsoir Astoumix, et merci pour ton aide!!

Je vais essayer avec les éléments que tu m'as donnés et je te dis si cela fonctionne!

Merci

[Trinita92]

Voilà le résultat:
La zone de l'image est toujours vide, MAIS bizarrement, les liens sont cliquables, même si les boutons n'apparaissent pas!

Pour ce qui concerne l'image, je me demande si ce n'est pas à cause de la dimension: en effet en réalisant l'image sur Gimp, je me suis trompée dans les dimensions et j'ai pris celles d'un autre blog. L'image est donc "décalée". Pas grave vu que c'est juste un test, mais peut-être que cela a une influence sur l'invisibilité de mon image?

J'ai fait une capture d'écran de ce que cela donne:
(OUPS, petit problème: encore une histoire d'image et de mauvais lien décidément, impossible de vous mettre l'image. Avec l'url dropbox ça ne me met "image invalide" et je ne peux pas télécharger depuis mon ordi ni même écrire le lien. Tout cela serait-il lié...? l'adresse du blog pour mes tests: http://kobai-uneblondeetblogger.blogspot.fr/ )

Bon en tout cas cela donne un cadre vide avec une petite icône de document au milieu, comme lorsque les images ne se chargent pas.
Par contre lorsque je fais ctrl + ouvrir l'image dans un nouvel onglet, l'image s'affiche correctement dans ce nouvel onglet.

Je suis sûre qu'il y a un truc que je n'ai pas capté sur le mac avec le transfère d'images..
Je vais tout de même essayer la manip avec l'image aux dimensions du blog, pour voir.

[Trinita92]

Comme vous le verrez si vous cliquez sur le lien de mon blog, l'image n'apparaît toujours pas et en plus, elle est toujours décalée..

[Astoumix]

Le lien de ton image n'est pas bon.

Le bon, c'est celui-là:
https://photos-4.dropbox.com/t/0/AAC...8uZRlJ2qklt720

Sur le lien que tu as mis, ça ne renvoie pas sur l'image directement (tu le vois à cause du header de dropbox).
Quand tu es sur le lien que tu as mis, tu fais glisser l'image dans un nouvel onglet et le lien qui sera afficher dans la barre d'adresse est le bon.

[Trinita92]

Bonjour Astoumix,

Avec un grand espoir, j'ai tenté de remplacer l'adresse en fonction de celle que tu m'as indiquée.
Malheureusement... Cela donne toujours le même résultat...

Aurais-tu d'autres suggestions?

Rappel de mon pb pour ceux qui prendraient en cours de route:
- Mon image ne se charge pas, on voit juste le cadre (mais les fonctions cliquables fonctionnent! grâce à toi Astoumix!)
- Mon cadre est décalé sur le côté, alors que je n'ai pas entré de marge.

Merci!!!

Bonne journée
Trinita

[Astoumix]

Je vois bien ton image.
Vide le cache de ton navigateur.

Pour le décalage:

Ton conteneur à une taille de 910px et l'image une taille de 1050px. Donc forcément, ça dépasse.
À la place du width="1050", tu peux mettre width="100%". Par contre, l'image s'adaptera à ton conteneur non proportionnellement.

[Trinita92]

Merci à toi Astoumix!!!

C'est merveilleux, ça marche!!!

Je ne sais pas pourquoi je ne le voyais pas car je n'ai même pas vidé le cache.. Mais ça marche!
C'est vrai en mettant 100% cela a décalé mes zones cliquables mais ce n'est pas grave, c'était juste un test et maintenant je sais comment faire, et comment l'expliquer!! (car c'est un peu le but!)

Tu ne peux pas savoir comme ça me soulage d'avoir ENFIN passé cette étape!!

Aurais-tu un site ou un blog pour que je puisse te remercier en indiquant sur mon blog une fois mis au point que c'est grâce à toi (et à ce forum bien sûr) que j'ai pu trouver la "clé"?

Ma prochaine étape est de créer des animations comme je le disais plus haut, au passage de la souris et au clic. Je vais faire mes petites recherches mais en cas de galère.. t'y connais-tu en Javascript?

Ah si juste une chose sur l'étape menu cliquable, peux-tu me dire où tu as vu que mon contenu avait une taille de 910px? Car moi je croyais l'avoir passé à 1050 justement (en entrant cette valeur dans l'élément "largeur" dans mon outil de conception Blogger) mais j'ai dû faire une erreur..

Merci merci

[Astoumix]

Pour voir la taille de tes éléments, clique droit sur l'élément > Inspecter l'élément et quand tu passes ta souris sur le code, tu vois l'élément ciblé avec la taille qu'il fait actuellement (sur Google Chrome tout du moins).

Sinon, ta class .content-outer à une taille de 1050px > ta class .content-inner à un padding de 40px à droite et à gauche > ta class .region-inner à un padding de 15px à droite et à gauche > Et ta classe .section à une margin de 15px à droite et à gauche.

Si tu fais le calcul:

1050 - 80 = 970
970 - 30 = 940
940 - 30 = 910

Et tu tombes bien sur la taille de ta class .widget-content

Pour les animations regarde les pseudos class css3.

[Trinita92]

Super, je vais consulter ça attentivement.

Merci encore pour ton aide!!