طريقة عرض جي كويري متقدمه هل هناك مثال لها

أساس عمل تلك الخريطة هو استخدام image map لعمل تخطيط وتحديد العناصر في الصورة.

يمكنك عملها عن طريق أخذ صورة عادية لخريطة وبإستخدام أحد أدوات الرسم المتجهي مثل inkscape تحدد حواف القارات بأداة للحصول على أبعاد القارة ومن ثم تحفظها في ملف svg، تأكد من أنك تعمل خطوط مستقيمة دون انحناءات. بعدها يمكنك استخراج الإحداثيات بإستخدام أداة inkscapemap، هذا شرح سريع Create HTML imagemaps using Inkscape.

مثال index.html:

<!DOCTYPE html><head>  <meta charset="utf-8" />  <title>القارات</title>  <style>  area {    cursor: pointer;  }  </style></head><body><!-- begin image map --><img src="continents.png" usemap="#continents_map" alt="" /><map name="continents_map" id="continents_map"><area shape="poly" alt="أمريكا الجنوبية" title="أمريكا الجنوبية" id="map_north_america"href="#" coords="96,125,96,124,97,123,98,123,106,113,123,119,131,127,142,128,141,139,150,143,155,146,163,146,167,150,171,159,162,166,162,175,162,182,161,188,153,189,145,198,143,212,133,219,131,224,129,240,137,235,144,231,149,243,140,241,133,238,142,249,130,246,122,247,118,240,114,235,111,223,109,210,109,197,107,191,110,183,106,178,98,175,95,167,91,160,87,155,86,147,90,142,97,138,93,131,96,125" /><area shape="poly" alt="أمريكا الشمالية" title="أمريكا الشمالية" id="map_south_america"href="#" coords="68,15,73,15,78,16,82,12,99,2,119,6,137,0,162,0,186,0,210,0,225,0,220,2,212,11,208,21,197,20,189,24,181,25,180,38,171,38,165,39,157,36,157,29,155,23,161,14,152,12,142,11,156,21,154,25,143,33,152,48,153,58,141,63,127,67,115,72,110,77,103,81,101,87,98,95,99,100,107,102,113,106,123,109,112,112,106,117,94,105,91,109,89,118,99,125,91,132,74,127,61,115,47,106,42,97,37,88,35,78,32,71,34,65,38,59,43,54,41,47,38,41,28,33,8,55,-5,44,0,40,8,39,11,32,13,24,19,22,26,20,39,13,54,16,68,15" /><area shape="poly" alt="أفريقيا" title="أفريقيا" id="map_africa"href="#" coords="270,82,273,90,278,97,282,105,287,111,289,122,298,121,314,114,306,143,296,146,291,150,288,157,291,164,298,156,313,165,306,176,310,187,291,201,288,189,286,171,283,188,277,196,271,206,259,219,248,209,243,201,241,191,238,182,239,167,236,152,231,137,224,139,217,137,210,137,203,139,198,133,192,129,192,120,187,110,193,103,196,95,200,88,206,83,211,75,220,76,227,74,234,74,242,75,246,82,253,79,261,82,270,82" /><area shape="poly" alt="أوروبا" title="أوروبا" id="map_europe"href="#" coords="297,16,302,15,305,14,308,18,306,24,302,31,306,37,305,42,315,52,309,52,295,46,294,61,298,71,290,67,281,63,272,62,267,64,256,71,264,77,267,83,253,78,252,74,249,83,240,75,237,73,232,70,228,66,224,75,218,75,210,81,206,74,203,69,207,61,212,58,217,54,198,50,207,45,212,43,215,31,209,31,203,32,195,36,194,26,195,17,214,23,221,27,228,30,233,24,238,21,250,16,226,13,235,6,243,-2,261,-1,259,12,264,15,272,15,278,17,283,13,286,5,294,7,304,5,304,9,297,16" /><area shape="poly" alt="آسيا" title="آسيا" id="map_asia"href="#" coords="330,6,322,7,314,9,306,10,307,13,308,21,306,26,303,36,310,44,313,53,300,48,293,59,299,71,292,68,285,66,277,65,269,60,267,69,262,74,265,78,275,78,273,84,276,92,281,99,285,107,289,114,293,125,304,118,313,116,317,108,320,101,326,105,336,107,336,116,341,124,335,130,336,137,340,152,343,130,348,138,362,145,356,126,357,120,359,105,371,109,375,121,371,132,373,143,379,152,389,164,405,168,420,164,428,165,431,156,426,154,437,153,433,150,432,142,430,128,430,108,412,106,409,111,410,119,405,123,398,132,400,119,399,113,400,104,415,101,416,90,417,86,424,95,430,88,438,87,441,77,441,70,444,59,433,53,425,46,415,40,415,37,429,41,434,52,455,57,446,40,451,38,469,23,452,20,443,14,432,14,421,13,391,9,360,9,330,6" /><area shape="poly" alt="أستراليا" title="أستراليا" id="map_astralia"href="#" coords="439,143,450,144,462,146,466,159,477,174,454,162,455,165,465,178,470,195,458,209,453,215,439,232,434,221,434,208,422,207,411,210,393,216,394,195,401,185,404,175,415,174,423,169,425,156,451,168,441,157,437,152,429,146,439,143" /></map><!-- end image map  -->    <script>function register_map(callback) {    var map = document.getElementById('continents_map');    if( ! map ) { console.log('Error, cannot find ' + map); return; }    for( var i = 0 ; i < map.children.length ; i++ ) {        var id = document.getElementById(map.children.id);        id.addEventListener('click', function(event) {            callback(event.target.id);        });    }};</script><script>function callback(id) {    alert(id);}register_map(callback);</script>    </body></html>

الصورة:

/index.php?app=core&module=attach&section=attach&attach_rel_module=post&attach_id=142465

أنشئ دالة ستنفذ عند الضغط على القارة ومررها لـregister_map هذا:

function callback(id) {
    alert(id);
}

register_map(callback);

example.zip

وهناك تطبقات أخرى على هذا الشأن من أفضلها :

winstonwolf.pl/clickable-maps/world-continents.html

http://jvectormap.com

لقدوجدت طريقة الايت بوكس للاي فريم

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

وقمت بدمجها مع map عن طريق الجي كويري