nicht angemeldet
image map - dynamische Koordinaten
Matthias Scharwies
Gunnar BittersmannHallo 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?
<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>
-
Servus!
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...
Google mal nach svg repsonsive image map
Ein Tutorial ist in Vorbereitung: SVG/Anwendung und Praxis/responsive Imagemaps
Herzliche Grüße
Matthias Scharwies
-
@@Matthias Scharwies
Google mal nach
Du meinst: Suche mal nach.
Letztens hattest du noch http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG parat.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Servus!
ja, sorry!
Der Link ist aber im (noch nicht fertigen) Artikel drin, ich muss mir über's Wochenende mal ein schönes Beispiel überlegen.
Herzliche Grüße
Matthias Scharwies
-
-
-
Hallo,
[....] 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....
Schau dir mal dieses Script an: http://maddesigns.de/responsive-imagemap-2194.html
-
@@Sara
Schau dir mal dieses Script an: http://maddesigns.de/responsive-imagemap-2194.html
Und meinen Kommentar dazu.
Und ich hab ihn gefragt. ;-)
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
@@frooast
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...
Erstelle ein SVG, dessen
viewBoxin Pixeln genau so groß ist wie das Bild. Dann kannst du die Formen und Koordinaten derareas übernehmen und perxlink:hrefim SVG verlinken.Lege das SVG mit den clickbaren Flächen über das Bild (bzw. binde das Bild mit ins SVG ein) und sorge dafür, dass beides gleichermaßen skaliert.
$(document).ready(function () { $('#sampleShapes').ImageMapResize({ origImageWidth: "797" }); });Das ist nicht der Weg, den du gehen solltest.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.