image map - dynamische Koordinaten bearbeitet von frooast 01.10.2015 13:50 Hallo Freunde, ich stehe vor einem kleinen Problem. Ich habe eine Image Mape, die Polygone für bestimmte Areas besitzt. Da ich diese Seite in Wordpress und somit für mehrere Größen brauche, habe ich sie resizeable gemacht (das Image). Nun kommt das Problem, dass meine Koordinaten nicht mit verändert werden... Ich habe mich sehr damit beschäftigt und verschiedene vorschläge von google ausprobiert, jedoch ohne Erfolg.... Kann mir einer zufällig helfen? ~~~html <script src="/Scripts/modernizr-2.6.2.js"></script> <script src="/js/jquery.ImageMapResize.js"></script> <style> body { font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 20px; } div { width: 100%; } img[usemap] { border: none; height: auto; max-width: 100%; width: auto; } </style> <body> <div id="mapping-area"> <img src="vorschau.jpg" width="100%" height="1000" border="0" usemap="#map" /> <map name="map"> <area shape="poly" coords="649,299,637,306,631,306,631,311,616,312,610,308,622,296,627,281,625,274,614,275,608,273,603,279,599,277,581,277,577,261,569,251,565,256,565,268,550,268,542,282,532,283,529,299,516,315,506,311,496,313,492,324,484,319,476,319,462,335,456,336,454,328,440,331,427,329,413,317,388,316,383,318,375,306,362,301,354,302,352,296,339,295,337,299,329,296,323,301,322,308,312,315,299,316,297,322,286,324,278,319,267,323,262,330,262,343,247,342,241,345,224,345,210,339,211,330,201,327,189,313,183,300,175,296,170,303,162,304,145,294,129,292,133,276,139,275,142,269,150,267,159,260,160,249,173,248,174,238,177,232,172,224,163,223,158,215,150,213,152,203,150,194,153,187,160,185,165,180,169,180,176,183,180,179,171,175,175,169,188,161,192,159,211,160,218,164,218,171,224,176,230,171,235,175,240,175,243,181,250,177,251,167,257,158,263,156,269,146,268,143,261,146,258,144,277,130,289,131,298,132,318,127,328,126,332,133,335,131,337,132,341,122,350,111,360,106,366,103,375,87,383,78,385,75,389,63,396,62,397,67,4 09,69,444,69,448,73,441,76,419,76,416,75,404,75,398,82,386,83,382,87,372,102,374,109,379,109,381,102,388,99,395,86,404,86,413,80,420,80,428,84,432,84,435,89,442,87,448,78,462,70,464,81,470,86,471,94,474,98,477,107,486,108,490,114,499,116,503,126,513,127,517,129,518,136,521,142,521,143,528,144,528,136,544,133,552,125,559,129,563,137,568,141,567,148,561,156,567,164,577,166,582,174,582,179,576,185,574,190,576,195,581,201,587,204,592,207,598,210,607,214,617,215,625,214,622,188,607,188,598,193,588,190,581,194,578,188,587,184,587,172,583,165,592,164,597,170,602,170,602,159,594,152,586,150,586,158,579,158,577,153,571,157,567,155,572,147,571,139,566,136,563,127,571,126,577,138,605,154,611,162,628,177,627,179,627,188,630,209,629,212,632,215,633,223,636,225,638,235,643,243,643,260,656,298" href="http://www.google.de" /> <area shape="poly" coords="501,437,503,445,510,446,512,442,517,442,523,435,528,439,529,450,541,461,549,464,545,470,546,475,552,475,562,480,561,488,556,491,557,500,547,506,546,495,537,495,530,491,518,489,518,496,513,497,508,492,503,496,501,489,493,491,488,488,480,495,473,490,473,477,480,470,477,464,479,452,483,450,488,455,489,447,501,437" href="http://www.apple.com" /> <area shape="poly" coords="262,361,260,366,251,368,251,380,240,386,227,389,221,393,210,386,201,388,186,385,177,397,159,398,151,405,154,428,172,445,182,448,176,457,180,471,176,483,193,498,185,505,194,525,185,535,190,542,179,554,179,563,147,563,131,570,126,578,130,586,133,600,127,606,127,621,138,637,140,651,161,653,176,659,172,665,177,674,179,694,206,700,228,701,236,712,246,722,239,731,229,736,233,744,242,745,245,765,272,761,280,766,284,778,304,777,319,790,341,790,352,796,356,785,358,776,358,765,349,761,345,749,342,744,345,734,341,728,341,715,345,715,347,705,341,693,346,686,346,672,352,667,365,667,379,663,383,656,393,658,401,656,412,657,417,650,427,652,442,644,454,652,458,651,464,651,481,639,481,623,467,603,453,597,446,597,441,590,432,588,416,577,413,581,399,581,387,572,381,575,371,564,356,551,348,534,352,527,353,513,358,506,354,483,361,470,354,468,344,468,338,459,341,444,350,441,351,430,347,417,355,412,350,397,337,397,334,389,317,392,302,385,302,380,291,376,286,369,277,368" href="http://www.wikipedia.de" /> <area shape="poly" coords="223,346,230,355,247,352,259,360,265,360,277,367,285,367,291,375,302,379,303,384,316,391,332,387,334,388,337,395,351,396,356,411,349,417,352,428,351,441,342,445,340,458,344,466,355,466,363,469,356,482,360,507,354,514,353,527,351,534,356,548,382,573,386,569,398,579,411,579,415,575,432,586,442,587,445,595,450,595,466,600,483,624,483,640,466,652,473,661,485,663,484,670,489,681,487,690,482,697,484,702,498,701,515,694,528,700,533,707,540,706,561,710,575,706,587,705,604,700,616,672,632,673,647,678,654,670,669,665,675,668,681,662,695,665,702,652,699,639,684,628,684,615,678,607,695,586,692,571,701,560,692,550,692,534,696,528,691,519,675,516,674,504,671,485,681,480,681,465,685,457,677,446,662,441,651,425,630,408,611,405,612,397,617,390,617,374,642,359,647,352,649,339,648,327,650,321,655,314,653,299,639,306,631,307,632,312,615,313,608,309,620,296,626,281,623,276,614,278,608,275,605,280,599,278,581,279,578,276,577,265,570,252,567,256,566,268,552,270,542,284,533,284,530,300,517,317,506,312,497 ,314,494,325,490,325,485,320,476,320,463,335,457,337,453,329,441,332,427,330,413,318,389,317,383,319,374,307,362,302,354,303,351,297,340,296,338,301,330,297,324,300,323,309,311,316,300,317,298,323,284,326,279,320,268,323,263,330,263,344,247,343,243,346,240,346" href="http://www.amazon.de" /> <area shape="poly" coords="361,766,367,768,379,768,386,773,389,778,390,786,402,785,402,791,406,800,405,805,389,805,381,814,373,814,355,820,355,828,357,832,351,836,356,849,363,851,357,860,346,860,336,864,339,872,331,874,324,877,325,864,319,859,308,869,304,879,314,891,311,898,315,906,319,917,336,922,347,922,361,946,369,946,372,930,393,905,415,903,431,894,449,902,461,896,461,882,482,882,490,867,498,868,511,855,525,861,533,840,583,833,584,823,601,820,630,805,647,802,653,794,641,786,630,784,638,769,650,776,665,772,678,782,677,794,688,799,682,810,703,819,712,808,711,799,726,774,735,740,739,732,736,714,730,705,730,688,720,681,701,676,694,665,681,663,676,669,669,666,654,671,647,679,631,673,617,673,604,701,587,706,575,707,561,711,540,707,532,707,528,701,516,695,498,701,484,702,481,697,486,691,488,680,482,669,484,664,473,663,465,651,455,653,442,646,429,653,418,651,413,658,402,657,393,659,383,656,380,664,366,668,352,667,348,673,347,684,343,693,347,703,346,715,342,717,342,726,346,735,343,744,350,760" href="#bubbles" title="Bubbles" alt="Bubbles" /> </map> </div> <script> $(document).ready(function () { $('#sampleShapes').ImageMapResize({ origImageWidth: "797" }); }); </script> ~~~
image map - dynamische Koordinaten bearbeitet von Matthias Apsel 01.10.2015 14:21 Hallo Freunde, ich stehe vor einem kleinen Problem. Ich habe eine Image Mape, die Polygone für bestimmte Areas besitzt. Da ich diese Seite in Wordpress und somit für mehrere Größen brauche, habe ich sie resizeable gemacht (das Image). Nun kommt das Problem, dass meine Koordinaten nicht mit verändert werden... Ich habe mich sehr damit beschäftigt und verschiedene vorschläge von google ausprobiert, jedoch ohne Erfolg.... Kann mir einer zufällig helfen? ~~~html <script src="/Scripts/modernizr-2.6.2.js"></script> <script src="/js/jquery.ImageMapResize.js"></script> <style> body { font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 20px; } div { width: 100%; } img[usemap] { border: none; height: auto; max-width: 100%; width: auto; } </style> <body> <div id="mapping-area"> <img src="vorschau.jpg" width="100%" height="1000" border="0" usemap="#map" /> <map name="map"> <area shape="poly" coords="649,299,637,306,631,306,631,311,616,312,610,308,622,296,627,281,625,274,614,275,608,273,603,279,599,277,581,277,577,261,569,251,565,256,565,268,550,268,542,282,532,283,529,299,516,315,506,311,496,313,492,324,484,319,476,319,462,335,456,336,454,328,440,331,427,329,413,317,388,316,383,318,375,306,362,301,354,302,352,296,339,295,337,299,329,296,323,301,322,308,312,315,299,316,297,322,286,324,278,319,267,323,262,330,262,343,247,342,241,345,224,345,210,339,211,330,201,327,189,313,183,300,175,296,170,303,162,304,145,294,129,292,133,276,139,275,142,269,150,267,159,260,160,249,173,248,174,238,177,232,172,224,163,223,158,215,150,213,152,203,150,194,153,187,160,185,165,180,169,180,176,183,180,179,171,175,175,169,188,161,192,159,211,160,218,164,218,171,224,176,230,171,235,175,240,175,243,181,250,177,251,167,257,158,263,156,269,146,268,143,261,146,258,144,277,130,289,131,298,132,318,127,328,126,332,133,335,131,337,132,341,122,350,111,360,106,366,103,375,87,383,78,385,75,389,63,396,62,397,67,4 09,69,444,69,448,73,441,76,419,76,416,75,404,75,398,82,386,83,382,87,372,102,374,109,379,109,381,102,388,99,395,86,404,86,413,80,420,80,428,84,432,84,435,89,442,87,448,78,462,70,464,81,470,86,471,94,474,98,477,107,486,108,490,114,499,116,503,126,513,127,517,129,518,136,521,142,521,143,528,144,528,136,544,133,552,125,559,129,563,137,568,141,567,148,561,156,567,164,577,166,582,174,582,179,576,185,574,190,576,195,581,201,587,204,592,207,598,210,607,214,617,215,625,214,622,188,607,188,598,193,588,190,581,194,578,188,587,184,587,172,583,165,592,164,597,170,602,170,602,159,594,152,586,150,586,158,579,158,577,153,571,157,567,155,572,147,571,139,566,136,563,127,571,126,577,138,605,154,611,162,628,177,627,179,627,188,630,209,629,212,632,215,633,223,636,225,638,235,643,243,643,260,656,298" href="http://www.google.de" /> <area shape="poly" coords="501,437,503,445,510,446,512,442,517,442,523,435,528,439,529,450,541,461,549,464,545,470,546,475,552,475,562,480,561,488,556,491,557,500,547,506,546,495,537,495,530,491,518,489,518,496,513,497,508,492,503,496,501,489,493,491,488,488,480,495,473,490,473,477,480,470,477,464,479,452,483,450,488,455,489,447,501,437" href="http://www.apple.com" /> <area shape="poly" coords="262,361,260,366,251,368,251,380,240,386,227,389,221,393,210,386,201,388,186,385,177,397,159,398,151,405,154,428,172,445,182,448,176,457,180,471,176,483,193,498,185,505,194,525,185,535,190,542,179,554,179,563,147,563,131,570,126,578,130,586,133,600,127,606,127,621,138,637,140,651,161,653,176,659,172,665,177,674,179,694,206,700,228,701,236,712,246,722,239,731,229,736,233,744,242,745,245,765,272,761,280,766,284,778,304,777,319,790,341,790,352,796,356,785,358,776,358,765,349,761,345,749,342,744,345,734,341,728,341,715,345,715,347,705,341,693,346,686,346,672,352,667,365,667,379,663,383,656,393,658,401,656,412,657,417,650,427,652,442,644,454,652,458,651,464,651,481,639,481,623,467,603,453,597,446,597,441,590,432,588,416,577,413,581,399,581,387,572,381,575,371,564,356,551,348,534,352,527,353,513,358,506,354,483,361,470,354,468,344,468,338,459,341,444,350,441,351,430,347,417,355,412,350,397,337,397,334,389,317,392,302,385,302,380,291,376,286,369,277,368" href="http://www.wikipedia.de" /> <area shape="poly" coords="223,346,230,355,247,352,259,360,265,360,277,367,285,367,291,375,302,379,303,384,316,391,332,387,334,388,337,395,351,396,356,411,349,417,352,428,351,441,342,445,340,458,344,466,355,466,363,469,356,482,360,507,354,514,353,527,351,534,356,548,382,573,386,569,398,579,411,579,415,575,432,586,442,587,445,595,450,595,466,600,483,624,483,640,466,652,473,661,485,663,484,670,489,681,487,690,482,697,484,702,498,701,515,694,528,700,533,707,540,706,561,710,575,706,587,705,604,700,616,672,632,673,647,678,654,670,669,665,675,668,681,662,695,665,702,652,699,639,684,628,684,615,678,607,695,586,692,571,701,560,692,550,692,534,696,528,691,519,675,516,674,504,671,485,681,480,681,465,685,457,677,446,662,441,651,425,630,408,611,405,612,397,617,390,617,374,642,359,647,352,649,339,648,327,650,321,655,314,653,299,639,306,631,307,632,312,615,313,608,309,620,296,626,281,623,276,614,278,608,275,605,280,599,278,581,279,578,276,577,265,570,252,567,256,566,268,552,270,542,284,533,284,530,300,517,317,506,312,497 ,314,494,325,490,325,485,320,476,320,463,335,457,337,453,329,441,332,427,330,413,318,389,317,383,319,374,307,362,302,354,303,351,297,340,296,338,301,330,297,324,300,323,309,311,316,300,317,298,323,284,326,279,320,268,323,263,330,263,344,247,343,243,346,240,346" href="http://www.amazon.de" /> <area shape="poly" coords="361,766,367,768,379,768,386,773,389,778,390,786,402,785,402,791,406,800,405,805,389,805,381,814,373,814,355,820,355,828,357,832,351,836,356,849,363,851,357,860,346,860,336,864,339,872,331,874,324,877,325,864,319,859,308,869,304,879,314,891,311,898,315,906,319,917,336,922,347,922,361,946,369,946,372,930,393,905,415,903,431,894,449,902,461,896,461,882,482,882,490,867,498,868,511,855,525,861,533,840,583,833,584,823,601,820,630,805,647,802,653,794,641,786,630,784,638,769,650,776,665,772,678,782,677,794,688,799,682,810,703,819,712,808,711,799,726,774,735,740,739,732,736,714,730,705,730,688,720,681,701,676,694,665,681,663,676,669,669,666,654,671,647,679,631,673,617,673,604,701,587,706,575,707,561,711,540,707,532,707,528,701,516,695,498,701,484,702,481,697,486,691,488,680,482,669,484,664,473,663,465,651,455,653,442,646,429,653,418,651,413,658,402,657,393,659,383,656,380,664,366,668,352,667,348,673,347,684,343,693,347,703,346,715,342,717,342,726,346,735,343,744,350,760" href="#bubbles" title="Bubbles" alt="Bubbles" /> </map> </div> <script> $(document).ready(function () { $('#sampleShapes').ImageMapResize({ origImageWidth: "797" }); }); </script> ~~~
nicht angemeldet
