Image map

Bonjour,
J'aimerais rendre cliquable une image dans un de mes articles.
J'ai inséré ce code dans mon article :
_____________________________________________________
<MAP NAME="menu"><AREA SHAPE=POLY COORDS="138,701,137,701,137,701,136,700,135,700,134,700,133,699,132,698,131,697,130,696,130,695,129,693,128,692,128,690,127,688,127,687,126,685,126,683,126,681,126,678,126,676,127,675,127,673,128,671,128,669,129,668,130,666,130,665,131,664,132,663,133,662,134,661,135,661,136,661,137,661,137,660,138,660,138,660,139,661,140,661,140,661,141,661,142,662,143,663,144,664,145,665,146,666,147,668,147,669,148,671,149,673,149,675,149,676,149,678,150,681,149,683,149,685,149,687,149,688,148,690,147,692,147,693,146,695,145,696,144,697,143,698,142,699,141,700,140,700,140,700,139,701,138,701,138,701" HREF="../?article144" TARGET="_self"><AREA SHAPE=POLY COORDS="373,667,372,667,370,667,369,666,368,666,366,665,365,664,364,663,363,662,362,661,361,659,361,658,360,656,359,655,359,653,359,651,359,649,359,648,359,646,359,644,360,643,361,641,361,640,362,638,363,637,364,636,365,635,366,634,368,633,369,633,370,632,372,632,373,632,375,632,376,632,377,633,379,633,380,634,381,635,382,636,383,637,384,638,385,640,386,641,386,643,387,644,387,646,387,648,387,649,387,651,387,653,387,655,386,656,386,658,385,659,384,661,383,662,382,663,381,664,380,665,379,666,377,666,376,667,375,667,373,667" HREF="../?article138" TARGET="_self"><AREA SHAPE=POLY COORDS="265,555,263,555,262,555,261,554,259,554,258,553,257,553,256,552,255,551,254,550,253,549,253,548,252,547,252,545,251,544,251,543,251,541,251,540,251,539,252,537,252,536,253,535,253,534,254,533,255,532,256,531,257,530,258,529,259,529,261,528,262,528,263,528,265,528,266,528,267,528,269,528,270,529,271,529,272,530,273,531,274,532,275,533,276,534,277,535,277,536,278,537,278,539,278,540,278,541,278,543,278,544,278,545,277,547,277,548,276,549,275,550,274,551,273,552,272,553,271,553,270,554,269,554,267,555,266,555,265,555" HREF="../?article149" TARGET="_self"><AREA SHAPE=POLY COORDS="309,632,309,632,308,632,308,632,307,631,306,631,305,630,304,629,303,628,302,627,301,626,300,625,300,623,299,622,299,620,298,618,298,616,298,614,298,612,298,610,298,608,298,607,299,605,299,603,300,601,300,600,301,598,302,597,303,596,304,595,305,594,306,594,307,593,308,593,308,593,309,593,309,593,310,593,311,593,311,593,312,593,313,594,314,594,315,595,316,596,317,597,318,598,318,600,319,601,320,603,320,605,321,607,321,608,321,610,321,612,321,614,321,616,321,618,320,620,320,622,319,623,318,625,318,626,317,627,316,628,315,629,314,630,313,631,312,631,311,632,311,632,310,632,309,632" HREF="../?article140" TARGET="_self"><AREA SHAPE=POLY COORDS="311,554,310,554,309,553,307,553,306,552,305,552,304,551,303,550,302,549,301,547,300,546,299,545,299,543,298,541,298,540,298,538,298,536,298,534,298,533,298,531,299,529,299,528,300,526,301,525,302,524,303,523,304,522,305,521,306,520,307,519,309,519,310,519,311,519,313,519,314,519,315,519,317,520,318,521,319,522,320,523,321,524,322,525,323,526,323,528,324,529,324,531,325,533,325,534,325,536,325,538,325,540,324,541,324,543,323,545,323,546,322,547,321,549,320,550,319,551,318,552,317,552,315,553,314,553,313,554,311,554" HREF="../?article143" TARGET="_self"><AREA SHAPE=POLY COORDS="411,572,407,572,405,572,403,571,401,571,399,570,397,570,395,569,394,568,393,567,391,566,391,565,390,564,389,564,389,563,389,563,389,562,389,562,389,561,389,560,389,560,389,559,389,559,389,558,390,558,391,557,391,556,393,555,394,554,395,553,397,552,399,552,401,551,403,551,405,550,407,550,411,550,416,550,418,550,420,551,422,551,424,552,426,552,428,553,429,554,430,555,431,556,432,557,433,558,434,558,434,559,434,559,434,560,434,560,434,561,434,562,434,562,434,563,434,563,434,564,433,564,432,565,431,566,430,567,429,568,428,569,426,570,424,570,422,571,420,571,418,572,416,572,411,572" HREF="../?article158" TARGET="_self"><AREA SHAPE=POLY COORDS="376,515,375,515,373,514,372,514,371,513,369,513,368,512,367,511,366,509,365,508,364,507,363,505,363,504,362,502,362,500,361,498,361,497,361,495,362,493,362,491,363,490,363,488,364,486,365,485,366,484,367,483,368,482,369,481,371,480,372,479,373,479,375,479,376,478,378,479,379,479,381,479,382,480,384,481,385,482,386,483,387,484,388,485,389,486,390,488,390,490,391,491,391,493,391,495,391,497,391,498,391,500,391,502,390,504,390,505,389,507,388,508,387,509,386,511,385,512,384,513,382,513,381,514,379,514,378,515,376,515" HREF="../?article146" TARGET="_self"><AREA SHAPE=POLY COORDS="321,460,319,460,317,460,316,459,314,459,313,458,311,457,310,456,309,455,308,454,307,453,306,452,306,450,305,449,305,447,304,446,304,444,304,442,305,441,305,439,306,438,306,436,307,435,308,434,309,432,310,431,311,430,313,430,314,429,316,428,317,428,319,428,321,428,322,428,324,428,325,428,327,429,328,430,330,430,331,431,332,432,333,434,334,435,335,436,335,438,336,439,336,441,337,442,337,444,337,446,336,447,336,449,335,450,335,452,334,453,333,454,332,455,331,456,330,457,328,458,327,459,325,459,324,460,322,460,321,460" HREF="../?article159" TARGET="_self"><AREA SHAPE=POLY COORDS="142,468,141,468,140,468,138,467,137,467,136,466,135,466,134,465,133,464,132,463,131,462,130,461,130,460,129,458,129,457,129,456,129,454,129,453,129,452,129,450,130,449,130,448,131,447,132,446,133,445,134,444,135,443,136,442,137,442,138,441,140,441,141,441,142,441,144,441,145,441,146,441,148,442,149,442,150,443,151,444,152,445,153,446,154,447,154,448,155,449,155,450,156,452,156,453,156,454,156,456,156,457,155,458,155,460,154,461,154,462,153,463,152,464,151,465,150,466,149,466,148,467,146,467,145,468,144,468,142,468" HREF="../?article192" TARGET="_self"><AREA SHAPE=POLY COORDS="445,373,443,373,442,373,441,372,440,372,438,371,437,371,436,370,435,369,435,368,434,367,433,365,433,364,432,363,432,361,432,360,432,358,432,357,432,355,432,354,433,352,433,351,434,350,435,349,435,348,436,347,437,346,438,345,440,344,441,344,442,343,443,343,445,343,446,343,447,343,449,344,450,344,451,345,452,346,453,347,454,348,455,349,455,350,456,351,457,352,457,354,457,355,458,357,458,358,458,360,457,361,457,363,457,364,456,365,455,367,455,368,454,369,453,370,452,371,451,371,450,372,449,372,447,373,446,373,445,373" HREF="../?article193" TARGET="_self"><AREA SHAPE=POLY COORDS="511,337,509,337,507,336,506,336,504,336,502,335,501,335,499,334,498,333,497,332,496,332,495,331,494,330,494,328,493,327,493,326,493,325,493,324,493,323,494,322,494,320,495,319,496,318,497,318,498,317,499,316,501,315,502,315,504,314,506,314,507,314,509,313,511,313,513,313,515,314,516,314,518,314,520,315,521,315,523,316,524,317,525,318,526,318,527,319,528,320,528,322,529,323,529,324,529,325,529,326,529,327,528,328,528,330,527,331,526,332,525,332,524,333,523,334,521,335,520,335,518,336,516,336,515,336,513,337,511,337" HREF="../?article139" TARGET="_self"><AREA SHAPE=POLY COORDS="521,308,520,308,518,308,516,308,515,307,513,306,512,306,511,305,509,304,508,303,507,302,506,301,506,300,505,299,505,297,505,296,504,294,505,293,505,292,505,290,506,289,506,288,507,287,508,286,509,285,511,284,512,283,513,282,515,282,516,281,518,281,520,281,521,281,523,281,525,281,526,281,528,282,529,282,531,283,532,284,533,285,534,286,535,287,536,288,537,289,538,290,538,292,538,293,538,294,538,296,538,297,538,299,537,300,536,301,535,302,534,303,533,304,532,305,531,306,529,306,528,307,526,308,525,308,523,308,521,308" HREF="../?article151" TARGET="_self"><AREA SHAPE=POLY COORDS="442,292,440,292,439,292,437,292,435,291,434,290,433,289,431,288,430,287,429,286,428,284,427,283,426,281,426,279,425,277,425,276,425,274,425,272,425,270,426,268,426,266,427,265,428,263,429,262,430,260,431,259,433,258,434,257,435,256,437,256,439,255,440,255,442,255,444,255,445,255,447,256,449,256,450,257,451,258,453,259,454,260,455,262,456,263,457,265,458,266,458,268,459,270,459,272,459,274,459,276,459,277,458,279,458,281,457,283,456,284,455,286,454,287,453,288,451,289,450,290,449,291,447,292,445,292,444,292,442,292" HREF="../?article190" TARGET="_self"><AREA SHAPE=POLY COORDS="377,343,376,343,374,343,373,343,372,342,371,342,370,341,369,340,368,340,367,339,366,338,366,337,365,336,365,335,364,333,364,332,364,331,364,330,364,328,365,327,365,326,366,325,366,324,367,323,368,322,369,321,370,321,371,320,372,319,373,319,374,319,376,319,377,319,378,319,380,319,381,319,382,319,383,320,384,321,385,321,386,322,387,323,388,324,388,325,389,326,389,327,390,328,390,330,390,331,390,332,390,333,389,335,389,336,388,337,388,338,387,339,386,340,385,340,384,341,383,342,382,342,381,343,380,343,378,343,377,343" HREF="../?article148" TARGET="_self"><AREA SHAPE=POLY COORDS="250,328,248,328,246,327,245,327,243,326,242,326,240,325,239,324,238,323,237,321,236,320,235,319,234,317,233,316,233,314,233,312,233,311,233,309,233,307,233,306,234,304,235,303,236,301,237,300,238,299,239,298,240,297,242,296,243,295,245,295,246,294,248,294,250,294,251,294,253,294,255,295,256,295,258,296,259,297,260,298,262,299,263,300,264,301,264,303,265,304,266,306,266,307,266,309,267,311,266,312,266,314,266,316,265,317,264,319,264,320,263,321,262,323,260,324,259,325,258,326,256,326,255,327,253,327,251,328,250,328" HREF="../?article152" TARGET="_self"><AREA SHAPE=POLY COORDS="140,294,138,294,135,294,133,293,131,293,130,292,128,292,126,291,125,290,123,289,122,288,121,287,120,286,119,285,119,284,119,283,118,283,118,282,118,281,118,281,118,280,119,280,119,279,119,278,120,277,121,276,122,275,123,274,125,273,126,272,128,271,130,271,131,270,133,270,135,269,138,269,140,269,142,269,144,269,146,270,148,270,150,271,152,271,153,272,155,273,156,274,158,275,159,276,160,277,160,278,161,279,161,280,161,280,161,281,161,281,161,282,161,283,161,283,161,284,160,285,160,286,159,287,158,288,156,289,155,290,153,291,152,292,150,292,148,293,146,293,144,294,142,294,140,294" HREF="../?article150" TARGET="_self"><AREA SHAPE=POLY COORDS="243,237,242,237,240,236,238,236,237,235,236,235,234,234,233,233,232,232,231,231,230,230,229,228,229,227,228,226,228,224,228,223,228,221,228,219,228,218,228,216,229,215,229,214,230,212,231,211,232,210,233,209,234,208,236,207,237,207,238,206,240,206,242,205,243,205,245,205,246,206,248,206,249,207,251,207,252,208,253,209,254,210,255,211,256,212,257,214,258,215,258,216,258,218,259,219,259,221,259,223,258,224,258,226,258,227,257,228,256,230,255,231,254,232,253,233,252,234,251,235,249,235,248,236,246,236,245,237,243,237" HREF="../?article142" TARGET="_self"><AREA SHAPE=POLY COORDS="255,211,254,210,252,210,251,210,250,209,249,208,248,207,247,206,246,205,245,204,244,203,243,201,243,199,242,198,242,196,242,194,242,192,242,191,242,189,242,187,243,185,243,184,244,182,245,181,246,180,247,178,248,177,249,176,250,176,251,175,252,175,254,174,255,174,256,174,257,175,259,175,260,176,261,176,262,177,263,178,264,180,265,181,266,182,266,184,267,185,267,187,268,189,268,191,268,192,268,194,268,196,267,198,267,199,266,201,266,203,265,204,264,205,263,206,262,207,261,208,260,209,259,210,257,210,256,210,255,211" HREF="../?article137" TARGET="_self"><AREA SHAPE=POLY COORDS="342,191,340,191,339,191,337,190,335,190,334,189,332,188,331,187,330,186,329,184,328,183,327,181,326,180,326,178,325,176,325,174,325,172,325,170,325,168,326,167,326,165,327,163,328,162,329,160,330,159,331,158,332,157,334,156,335,155,337,154,339,154,340,154,342,153,344,154,345,154,347,154,349,155,350,156,351,157,353,158,354,159,355,160,356,162,357,163,358,165,358,167,358,168,359,170,359,172,359,174,358,176,358,178,358,180,357,181,356,183,355,184,354,186,353,187,351,188,350,189,349,190,347,190,345,191,344,191,342,191" HREF="../?article154" TARGET="_self"><AREA SHAPE=POLY COORDS="382,192,380,192,378,192,377,192,375,191,374,190,372,189,371,188,370,187,369,186,368,184,367,183,367,181,366,179,366,177,365,175,365,174,365,172,366,170,366,168,367,166,367,165,368,163,369,162,370,160,371,159,372,158,374,157,375,156,377,156,378,155,380,155,382,155,383,155,385,155,386,156,388,156,389,157,391,158,392,159,393,160,394,162,395,163,396,165,397,166,397,168,397,170,398,172,398,174,398,175,397,177,397,179,397,181,396,183,395,184,394,186,393,187,392,188,391,189,389,190,388,191,386,192,385,192,383,192,382,192" HREF="../?article141" TARGET="_self"><AREA SHAPE=POLY COORDS="466,151,465,151,464,150,462,150,461,149,460,149,459,148,458,147,457,145,457,144,456,143,455,141,455,140,454,138,454,136,454,134,454,133,454,131,454,129,454,127,455,126,455,124,456,122,457,121,457,120,458,119,459,118,460,117,461,116,462,115,464,115,465,115,466,114,467,115,469,115,470,115,471,116,472,117,473,118,474,119,475,120,476,121,476,122,477,124,477,126,478,127,478,129,478,131,478,133,478,134,478,136,478,138,477,140,477,141,476,143,476,144,475,145,474,147,473,148,472,149,471,149,470,150,469,150,467,151,466,151" HREF="../?article135" TARGET="_self"><AREA SHAPE=POLY COORDS="146,173,144,173,142,173,141,172,139,172,138,171,136,170,135,169,134,168,133,167,132,166,131,164,130,163,129,161,129,160,129,158,129,157,129,155,129,153,129,152,130,150,131,149,132,148,133,146,134,145,135,144,136,143,138,142,139,142,141,141,142,141,144,140,146,140,147,140,149,141,151,141,152,142,154,142,155,143,156,144,158,145,159,146,160,148,160,149,161,150,162,152,162,153,162,155,163,157,162,158,162,160,162,161,161,163,160,164,160,166,159,167,158,168,156,169,155,170,154,171,152,172,151,172,149,173,147,173,146,173" HREF="../?article147" TARGET="_self"></MAP><IMG SRC="../IMG/jpg/plan_rdc_ecole.resized.jpg" NAME="Image1" ALIGN=LEFT WIDTH=585 HEIGHT=780 BORDER=0 USEMAP="#menu">
___________________________________________________________

Le problème, c'est que cela fonctionne dans l'interface privé, mais pas sur le site publique...

Avez-vous une idée, voire une solution ?

Cordialement,

jonathan

Avez-vous une idée, voire une solution ?

Ben oui, mets des url absolues : elles fonctionneront partout.
--
Philippe

2008/12/9 Jonathan Tessé :

Bonjour,
J'aimerais rendre cliquable une image dans un de mes articles.
J'ai inséré ce code dans mon article :
_____________________________________________________
<MAP NAME="menu"><AREA SHAPE=POLY
COORDS="138,701,137,701,137,701,136,700,135,700,134,700,133,699,132,698,131,697,130,696,130,695,129,693,128,692,128,690,127,688,127,687,126,685,126,683,126,681,126,678,126,676,127,675,127,673,128,671,128,669,129,668,130,666,130,665,131,664,132,663,133,662,134,661,135,661,136,661,137,661,137,660,138,660,138,660,139,661,140,661,140,661,141,661,142,662,143,663,144,664,145,665,146,666,147,668,147,669,148,671,149,673,149,675,149,676,149,678,150,681,149,683,149,685,149,687,149,688,148,690,147,692,147,693,146,695,145,696,144,697,143,698,142,699,141,700,140,700,140,700,139,701,138,701,138,701"
HREF="../?article144" TARGET="_self"><AREA SHAPE=POLY
COORDS="373,667,372,667,370,667,369,666,368,666,366,665,365,664,364,663,363,662,362,661,361,659,361,658,360,656,359,655,359,653,359,651,359,649,359,648,359,646,359,644,360,643,361,641,361,640,362,638,363,637,364,636,365,635,366,634,368,633,369,633,370,632,372,632,373,632,375,632,376,632,377,633,379,633,380,634,381,635,382,636,383,637,384,638,385,640,386,641,386,643,387,644,387,646,387,648,387,649,387,651,387,653,387,655,386,656,386,658,385,659,384,661,383,662,382,663,381,664,380,665,379,666,377,666,376,667,375,667,373,667"
HREF="../?article138" TARGET="_self"><AREA SHAPE=POLY

.....

COORDS="146,173,144,173,142,173,141,172,139,172,138,171,136,170,135,169,134,168,133,167,132,166,131,164,130,163,129,161,129,160,129,158,129,157,129,155,129,153,129,152,130,150,131,149,132,148,133,146,134,145,135,144,136,143,138,142,139,142,141,141,142,141,144,140,146,140,147,140,149,141,151,141,152,142,154,142,155,143,156,144,158,145,159,146,160,148,160,149,161,150,162,152,162,153,162,155,163,157,162,158,162,160,162,161,161,163,160,164,160,166,159,167,158,168,156,169,155,170,154,171,152,172,151,172,149,173,147,173,146,173"

HREF="../?article147" TARGET="_self"></MAP><IMG
SRC="../IMG/jpg/plan_rdc_ecole.resized.jpg" NAME="Image1" ALIGN=LEFT
WIDTH=585 HEIGHT=780 BORDER=0 USEMAP="#menu">
___________________________________________________________

Le problème, c'est que cela fonctionne dans l'interface privé, mais pas sur
le site publique...

Avez-vous une idée, voire une solution ?

Quand tu es sur le site public le chemin
SRC="../IMG/jpg/plan_rdc_ecole.resized.jpg" ne devrait-il pas être
SRC="IMG/jpg/plan_rdc_ecole.resized.jpg" puisque spip.php est à la
racine ? Par contre tu ne la verras pas dans l'admin ...

[envoyer la totalité de ton code est un peu lourd, non ?]

--
@plus

Hiện nay, Jacques ở Hà Nội

Pour les lyonnais++ spip-lyon@rezo.net http://spip-party.net/-Lyon-

Jonathan Tessé a écrit :

Bonjour,
J'aimerais rendre cliquable une image dans un de mes articles.
J'ai inséré ce code dans mon article :
_____________________________________________________
<MAP NAME="menu"><AREA SHAPE=POLY
COORDS="138,701,137,701,685,126,683,138,701" HREF="../?article144"
TARGET="_self">
___________________________________________________________

Le problème, c'est que cela fonctionne dans l'interface privé, mais
pas sur le site publique...
Avez-vous une idée, voire une solution ?
Cordialement,

jonathan

salut,
utilise les modèles : Utiliser les modèles - SPIP
ainsi tu peux ajouter le "name" et "usemap" sur ton image avec des
raccourcis spip et ajouter ton code map ensuite dans le texte de l'article
genre, <img52|mon_modele> <map...> ... </map>

sinon, quelques petites remarques sur ton code "map" :
- pense à ordonner les <area> de manière logique (alphabétique ou
autre), c'est plus facile quand on cherche "en aveugle" ou qu'on suit
les liens avec le clavier
- pense aussi à y ajouter les attributs alt et title (redondants), c'est
toujours mieux d'avoir une alternative aux images et une infobulle
complémentaire ... car pour l'instant, tes liens n'ont aucune
signification (on ne sait jamais, un robot pourrait passer par là et
indexer le contenu)

a+
--
Stéphanie

Jonathan Tessé a écrit :

Bonjour,
J'aimerais rendre cliquable une image dans un de mes articles.
J'ai inséré ce code dans mon article :
_____________________________________________________
<MAP NAME="menu"><AREA SHAPE=POLY
COORDS="138,701,137,701,685,126,683,138,701" HREF="../?article144"
TARGET="_self">
___________________________________________________________

Le problème, c'est que cela fonctionne dans l'interface privé, mais
pas sur le site publique...
Avez-vous une idée, voire une solution ?
Cordialement,

jonathan
    

… et j’ai oublié :slight_smile:
le href = « .?article144 »
pas de …/ puisque dans spip « tout est comme à la racine »

Jonathan Tessé a écrit :

Bonjour,
J'aimerais rendre cliquable une image dans un de mes articles.
J'ai inséré ce code dans mon article :

Avez-vous une idée, voire une solution ?

spipcarto ?