ممكن شرح كيف يمكن عمل هذا المثال

#13 يونيو 2011 في 15:45 صاحب الموضوع

http://www.mredy.com/?&l=ar

ممكن شرح كيف يمكن عمل مثل هذه الخريطة والروابط حيث أنه بمجرد وقوف الماوس فوق الرابط يتم تأشير المدينة وبالعكس

#23 يونيو 2011 في 22:32

div : خلفيتها هى الخريطة باللون البرتقالى http://www.mredy.com/images/iraq.jpg

بها div آخر له الخلفية : http://www.mredy.com...select_iraq.png

به وسم map محدد عليه روابط بشكل كل جزء من الخريطة و كل area لها

onmouseover : لتحرك خلفية div الداخلية ليظهر الجزء المحدد بلون آخر

onmouseout : لتتحرك الخلفية للجزء الشفاف ثانية

يمكنك فحص الخريطة بإضافة firebug لبرنامج فايرفوكس لتفهم اكثر

الخريطة مصممة بذكاء حقيقة لم اعهده مع المواقع العربية

<div style="width:371px;margin-right:30px;float:right;background:url(images/iraq.jpg) bottom no-repeat;">
<div id="country" style="float: right; background-position: 0px 0px;" class="map_iraq">
<img width="371" height="409" usemap="#iraq" src="images/map.gif">
</div>
<map name="iraq">
<area onmouseout="hide_country(60)" onmouseover="show_country(60, -371)" id="link_60" href="http://www.mredy.com/?mod=search&lo=kom_60&l=ar&search=1" coords="176,1,167,12,162,11,161,14,164,20,165,23,175,32,182,28,186,29,190,24,189,22,194,23,194,26,203,28,205,23,203,22,205,18,210,20,220,12,217,7,212,14,207,10,204,13,203,9,200,11,195,6,193,7,186,1,181,5,176,1" alt="" shape="poly"><area onmouseout="hide_country(61)" onmouseover="show_country(61, -742)" id="link_61" href="http://www.mredy.com/?mod=search&lo=kom_61&l=ar&search=1" coords="210,21,215,28,216,31,219,30,222,35,218,39,215,37,194,58,193,61,188,63,189,67,192,67,191,70,187,73,187,78,182,81,179,79,176,80,169,88,169,95,173,103,172,104,154,104,153,109,144,110,143,111,141,108,138,109,135,109,128,104,120,102,118,100,117,102,113,98,109,97,109,88,113,82,113,77,118,72,115,54,117,50,119,40,123,34,137,34,160,13,164,20,164,23,175,32,182,28,186,29,190,24,190,23,193,23,194,26,202,29,206,23,203,21,206,18,210,21" alt="" shape="poly"><area onmouseout="hide_country(62)" onmouseover="show_country(62, -1113)" id="link_62" href="http://www.mredy.com/?mod=search&lo=kom_62&l=ar&search=1" coords="218,7,219,7,224,11,224,14,221,18,223,24,226,23,228,20,232,20,237,15,245,24,245,29,242,32,249,38,248,45,245,47,243,46,240,48,239,46,236,46,231,51,232,55,235,55,236,57,234,59,233,61,237,64,243,72,241,73,233,73,231,70,229,73,227,72,223,74,218,72,215,74,215,76,212,76,209,71,201,77,202,79,203,80,200,84,196,87,193,90,189,88,188,84,188,82,189,80,187,78,188,73,192,70,191,67,188,66,189,63,193,61,194,58,215,37,218,39,223,35,218,29,216,30,216,28,210,21,221,12,218,7" alt="" shape="poly"><area onmouseout="hide_country(63)" onmouseover="show_country(63, -1484)" id="link_63" href="http://www.mredy.com/?mod=search&lo=kom_63&l=ar&search=1" coords="188,88,184,88,182,91,184,93,185,99,190,107,195,106,200,112,210,118,215,124,218,120,219,116,224,110,223,105,226,105,230,104,234,96,233,94,236,92,236,90,233,88,234,87,235,83,237,82,237,78,233,77,233,73,231,71,229,73,226,71,223,74,219,72,216,72,214,76,211,75,208,72,202,78,204,80,200,85,193,90,188,88" alt="" shape="poly"><area onmouseout="hide_country(64)" onmouseover="show_country(64, -1855)" id="link_64" href="http://www.mredy.com/?mod=search&lo=kom_64&l=ar&search=1" coords="248,45,245,48,243,46,241,46,240,48,238,46,236,47,232,50,232,54,236,55,237,57,234,59,234,61,239,65,243,71,242,72,233,73,233,76,236,78,236,82,235,83,235,86,234,87,234,89,237,90,237,92,233,94,234,96,230,104,225,105,229,109,239,110,240,111,240,113,238,115,239,119,241,119,244,117,246,119,245,121,249,124,248,128,248,132,254,128,256,126,257,123,263,116,263,112,267,107,269,108,269,113,268,116,269,117,271,115,270,112,273,110,276,110,283,104,280,103,281,100,278,96,277,90,278,86,280,84,283,84,289,80,287,78,284,80,283,77,280,75,277,77,274,77,271,79,268,75,262,69,259,71,257,69,257,61,255,59,256,55,254,51,251,52,250,50,248,45" alt="" shape="poly"><area onmouseout="hide_country(65)" onmouseover="show_country(65, -2226)" id="link_65" href="http://www.mredy.com/?mod=search&lo=kom_65&l=ar&search=1" coords="208,177,211,174,211,170,214,170,216,166,213,162,218,158,216,153,212,152,215,146,221,142,222,138,223,136,222,131,225,130,227,132,230,128,229,124,234,123,235,120,240,119,238,115,241,112,239,109,229,109,225,105,223,105,224,110,219,117,215,124,208,117,202,113,195,107,190,107,184,100,185,93,181,90,184,88,188,88,188,79,186,78,183,82,180,80,176,79,169,88,169,94,173,102,172,105,164,104,154,104,151,124,159,130,167,124,166,137,168,138,168,144,180,163,188,163,191,166,200,166,204,171,204,175,206,177,208,177" alt="" shape="poly"><area onmouseout="hide_country(66)" onmouseover="show_country(66, -2597)" id="link_66" href="http://www.mredy.com/?mod=search&lo=kom_66&l=ar&search=1" coords="267,107,269,109,268,115,268,116,262,124,264,127,264,132,257,131,256,134,252,135,253,141,257,141,258,143,256,146,256,150,252,152,253,154,249,157,251,159,254,158,256,161,256,163,258,166,257,168,261,172,261,175,267,172,267,176,266,179,270,180,267,184,265,185,263,188,260,188,259,190,251,199,229,190,223,195,221,194,219,191,218,188,218,184,221,181,220,176,218,177,216,180,212,174,212,170,215,169,217,166,214,163,218,158,217,156,215,152,213,151,216,146,222,142,222,138,223,130,227,132,231,128,230,124,235,123,235,120,242,120,244,118,245,119,245,121,250,125,247,127,248,132,255,128,256,127,256,123,264,116,264,112,267,107" alt="" shape="poly"><area onmouseout="hide_country(67)" onmouseover="show_country(67, -2968)" id="link_67" href="http://www.mredy.com/?mod=search&lo=kom_67&l=ar&search=1" coords="108,97,113,99,116,102,119,100,120,103,128,105,134,110,138,109,141,107,143,111,144,110,153,110,151,124,159,130,167,124,166,134,166,137,168,138,167,144,180,163,185,162,191,166,200,166,203,171,204,175,206,178,209,178,210,181,207,181,206,184,209,188,206,190,204,187,199,188,196,184,193,184,193,188,195,191,197,190,201,195,199,198,200,200,200,206,192,202,186,203,177,210,166,214,185,239,175,244,172,244,163,256,161,261,157,273,154,280,149,285,149,292,144,299,118,271,87,251,63,231,19,214,24,208,23,205,15,207,14,199,17,197,13,161,96,124,108,107,108,97" alt="" shape="poly"><area onmouseout="hide_country(68)" onmouseover="show_country(68, -3339)" id="link_68" href="http://www.mredy.com/?mod=search&lo=kom_68&l=ar&search=1" coords="209,177,211,174,216,180,219,176,221,177,221,180,218,184,218,188,215,190,211,188,208,188,206,183,208,181,211,182,211,181,209,177" alt="" shape="poly"><area onmouseout="hide_country(69)" onmouseover="show_country(69, -3710)" id="link_69" href="http://www.mredy.com/?mod=search&lo=kom_69&l=ar&search=1" coords="218,188,220,193,217,194,218,198,215,198,214,202,217,202,216,206,224,207,225,211,229,212,230,215,233,220,238,224,224,234,222,232,220,233,222,236,217,239,210,233,205,237,203,235,204,229,206,230,206,227,206,220,202,215,201,214,204,209,203,206,200,206,199,197,201,195,199,192,197,189,196,190,193,188,193,184,195,185,198,187,203,188,206,190,209,188,215,190,218,188" alt="" shape="poly"><area onmouseout="hide_country(70)" onmouseover="show_country(70, -4081)" id="link_70" href="http://www.mredy.com/?mod=search&lo=kom_70&l=ar&search=1" coords="268,184,275,190,274,194,269,193,269,197,273,197,270,200,276,204,277,202,282,202,289,208,283,219,282,225,280,228,281,230,282,233,280,235,280,237,286,239,284,247,280,245,269,246,266,244,259,247,253,247,254,242,250,239,249,236,245,232,245,229,243,227,238,223,233,219,228,211,226,210,224,207,217,206,216,201,215,201,215,198,218,198,217,194,220,192,223,196,229,190,251,199,260,191,259,188,263,188,266,184,268,184" alt="" shape="poly"><area onmouseout="hide_country(71)" onmouseover="show_country(71, -4452)" id="link_71" href="http://www.mredy.com/?mod=search&lo=kom_71&l=ar&search=1" coords="166,214,183,234,201,227,204,228,206,227,206,221,201,214,204,208,197,205,190,203,184,205,176,210,166,214" alt="" shape="poly"><area onmouseout="hide_country(72)" onmouseover="show_country(72, -4823)" id="link_72" href="http://www.mredy.com/?mod=search&lo=kom_72&l=ar&search=1" coords="144,299,175,332,187,319,188,313,195,299,207,288,208,282,213,268,209,267,204,261,205,258,208,258,209,252,211,250,208,245,208,241,211,239,214,239,214,237,209,232,205,237,203,236,203,229,206,229,206,228,199,228,183,234,186,238,175,245,172,245,163,256,155,278,149,285,148,292,144,299" alt="" shape="poly"><area onmouseout="hide_country(73)" onmouseover="show_country(73, -5194)" id="link_73" href="http://www.mredy.com/?mod=search&lo=kom_73&l=ar&search=1" coords="238,224,244,229,245,232,250,236,249,239,254,242,254,247,255,249,256,262,252,261,248,258,242,258,240,256,233,256,227,257,230,261,230,263,226,263,227,269,224,270,225,274,221,274,216,268,209,267,204,261,205,258,209,259,209,253,211,249,208,245,209,241,212,239,215,237,217,240,222,237,220,234,222,232,225,235,238,224" alt="" shape="poly"><area onmouseout="hide_country(74)" onmouseover="show_country(74, -5565)" id="link_74" href="http://www.mredy.com/?mod=search&lo=kom_74&l=ar&search=1" coords="176,332,203,362,267,372,274,368,280,329,278,310,273,300,247,294,248,289,250,284,254,285,254,282,251,282,251,279,255,274,250,273,256,268,254,265,256,263,256,262,252,261,247,258,242,258,239,255,233,256,232,256,229,257,228,258,230,261,230,264,226,264,226,269,224,271,225,274,221,275,216,268,214,268,208,283,208,288,205,290,194,301,188,313,188,319,176,332" alt="" shape="poly"><area onmouseout="hide_country(75)" onmouseover="show_country(75, -5936)" id="link_75" href="http://www.mredy.com/?mod=search&lo=kom_75&l=ar&search=1" coords="256,248,260,247,266,244,269,247,273,246,277,246,277,248,274,249,278,256,278,261,284,272,290,277,290,279,288,280,290,285,304,285,303,294,301,298,300,302,299,304,300,307,294,307,292,305,289,307,284,307,278,310,273,301,248,294,248,291,249,287,251,284,254,284,254,282,252,282,251,279,255,273,251,273,256,268,256,266,254,265,255,263,256,248" alt="" shape="poly"><area onmouseout="hide_country(76)" onmouseover="show_country(76, -6307)" id="link_76" href="http://www.mredy.com/?mod=search&lo=kom_76&l=ar&search=1" coords="289,208,306,226,313,224,317,229,316,231,320,236,320,240,323,242,324,246,325,247,325,250,329,251,330,256,322,272,322,281,313,279,304,284,290,284,289,280,291,277,284,271,279,261,279,255,274,249,277,248,277,246,281,245,283,247,286,242,285,239,280,236,281,234,282,231,280,228,283,226,283,219" alt="" shape="poly"><area onmouseout="hide_country(77)" onmouseover="show_country(77, -6678)" id="link_77" href="http://www.mredy.com/?mod=search&lo=kom_77&l=ar&search=1" coords="274,368,285,357,298,333,305,329,320,329,329,335,332,332,336,332,343,338,350,337,345,331,345,326,340,320,338,321,337,320,338,316,331,312,333,304,333,290,321,290,322,281,317,281,315,280,312,280,304,285,304,294,301,299,300,308,294,308,292,306,288,308,284,308,279,309,279,318,279,337,274,368" alt="" shape="poly">
</map>
</div>

تم تعديل هذه المشاركة بواسطة Blaze Boy في 3 يونيو 2011 في 22:33