سلام به دوستان طراح وب.در اداره از من خواستند که یک سری ارتباطات اون ها رو به صورت شکیل با Power Point به صورت اسلاید ایجاد کنم.من هم جوگیر شدم و گفتم چرا اسلاید و من طراحی وب بلدم و قدیما کارکردم و یه چیز شیک درست میکنم.اونها میخوان ارتباطات یه سری سایت و شعبه رو روی نقشه نشون بدن.من اول خواستم از Arc GIS for Web استفاده کنم.ولی دیدم چون GIS کار نکردم و کار با نقشه در وب برام سخته تصمیم گرفتم همین طوری ساده باشه ولی کمی Interactive باشه و کمی صفحه پویا و متحرک باشه.شکل یک دیاگرام از نقاطی که اونها به من دادند که درست کنم ، اینه :
من هم به کمک HTML و CSS و کتابخانه jQuery فقط یک سایت از اون دیاگرام رو طراحی کردم.میخوام اگر کاربر بر روی اون سایت مخابراتی کلیک کنه ، بره به صفحه دیگه و محل جغرافیایی اون سایت رو روی نقشه نشون بده .سر سوزن ذوقی که داشتم روی طراحی یک نماد برای سایت مخابراتی (دکل مخابراتی)گذاشتم و کلی هم دردسر داشت.خواستم بدونم راه سریعتر و بهتری وجود نداره !؟ اصلاً راه رو درست رفتم !؟ باید باقی نقاط رو هم درست کنم و برای فلش ها هم یه فلش متحرکی چیزی مثل این درست کنم !؟
من کدهایی که برای این دکل مخابراتی زدم اینها هستند.این که سریعترین راه رو میخوام علت اینه که من کارهای برنامه نویسی رو بوسیدم گذاشتم کنار.و چون جوگیر شدم و همچنین دستور رییس کل واحدمون بود تصمیم گرفتم دوباره طراحی وب انجام بدم.وگرنه هیچ وقت سراغ طراحی وب نمیومدم.چون که معتقدم یا برنامه نویسی یا شبکه.نمیشه هر دو تارو یادگرفت و انجام داد.من الان میخوام زودتر تموم شه سراغ مطالعات شبکه ام برم.لطفاً کمک کنید.
خودتون استادید.ولی میگم برای کسانی که مثل من دانششون کمه.اگر میخواهید نتیجه کدها رو توی مرورگر ببینید.باید این کدها رو توی یه فایل htm ذخیره کنید و نیز کتابخانه jquery-1.7.2.min.js را کنار فایل html بزارید.
<html> <head> <meta charset="UTF-8" /> <style type="text/css"> .st1{fill:#00FFFF;} .station:hover{cursor:pointer} .station{fill:#ffffff} .station-name{font-family:'b titr';font-size:38px;fill:#ffffff} body{background: #002000;} </style> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> s=true; window.onload=function() { setInterval(f,2000); } function f() { $("#r6").hide(1000); $("#r6").show(); $("#r12").hide(1000); $("#r12").show(); $("#r5").show(); $("#r5").hide(1200); $("#r11").show(); $("#r11").hide(1200); $("#r4").show(); $("#r4").hide(1400); $("#r10").show(); $("#r10").hide(1400); $("#r3").show(); $("#r3").hide(1600); $("#r9").show(); $("#r9").hide(1600); $("#r2").show(); $("#r2").hide(1800); $("#r8").show(); $("#r8").hide(1800); $("#r1").show(); $("#r1").hide(2000); $("#r7").show(); $("#r7").hide(2000); } </script> </head> <body lang="fa" dir="rtl"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve"> <g class="station" id="station" onclick="stationStatus()"> <circle class="st1" cx="960.8" cy="388.7" r="8"/> <rect x="957.9" y="396.7" width="5.3" height="18.5"/> <path d="M960.8,399.3c-5.9,0-10.6-4.8-10.6-10.6s4.8-10.6,10.6-10.6c5.9,0,10.6,4.8,10.6,10.6S966.7,399.3,960.8,399.3zM960.8,383.4c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3c2.9,0,5.3-2.4,5.3-5.3C966.1,385.8,963.7,383.4,960.8,383.4z"/> <g id="r"> <rect id="r1" x="976.8" y="385.7" class="st1" width="5.3" height="5.7"/> <rect id="r2" x="989.6" y="380.7" class="st1" width="5.3" height="16"/> <rect id="r3" x="1002.7" y="375.8" class="st1" width="5.3" height="25.9"/> <rect id="r4" x="1016.6" y="370.1" class="st1" width="5.3" height="37.3"/> <rect id="r5" x="1029.7" y="365.1" class="st1" width="5.3" height="47.3"/> <rect id="r6" x="1042.5" y="359.8" class="st1" width="5.3" height="58.3"/> <rect id="r7" x="939.1" y="385.7" class="st1" width="5.3" height="5.7"/> <rect id="r8" x="926" y="380.7" class="st1" width="5.3" height="16"/> <rect id="r9" x="913.2" y="375.8" class="st1" width="5.3" height="25.9"/> <rect id="r10" x="899.7" y="370.1" class="st1" width="5.3" height="37.3"/> <rect id="r11" x="886.5" y="365.1" class="st1" width="5.3" height="47.3"/> <rect id="r12" x="873" y="359.8" class="st1" width="5.3" height="58.3"/> </g> <path d="M985.1,510.1l2.2,17l5.3-0.7l-12.9-97.7h4.8v-5.3h-21.3V418h-5.3v5.3h-21.3v5.3h5.2L929,526.4l5.3,0.7l2.2-17l24.3-10.2L985.1,510.1z M967.7,497l14.9-6.3l1.7,13.3L967.7,497z M943.8,454.7l17-7.3l17,7.3l0.6,4.3l-18.9,7.8l-16.3-7.7L943.8,454.7zM944.6,448.5l1-7.7l8.4,3.6L944.6,448.5z M977,448.5l-9.4-4l8.4-3.6L977,448.5z M979.1,464.5l1.6,12.3l-14.8-6.9L979.1,464.5zM952.8,469.5l-11.6,4.8l1.3-9.6L952.8,469.5z M940.4,480.4l18.9-7.8l22.3,10.5l0.3,2.1l-21,8.9l-21-8.9L940.4,480.4z M974.4,428.7l0.9,6.6l-14.5,6.2l-14.5-6.2l0.9-6.6H974.4z M937.3,504l1.7-13.3l14.9,6.3L937.3,504z"/> <g> <rect x="923.5" y="524.7" width="16" height="5.3"/> <rect x="982.1" y="524.7" width="16" height="5.3"/> </g> <text transform="matrix(1 0 0 1 1030 570)" class="station-name">Site Test</text> </g> </svg> </body> </html>
این پست در تاریخ {{ dateString(new Date(post.deleteDate)) }} توسط {{ post.deletedByUser }} حذف شده است.
دلیل حذف: {{ post.deleteReason ?? 'نامشخص' }}
زمان پاسخ گویی روز های شنبه الی چهارشنبه ساعت 9 الی 18
فقط به موضوعات مربوط به محصولات آموزشی و فروش پاسخ داده می شود