12 پست در این موضوع

سلام من کارآموز html هستم فردی از من خواست تا یک نقشه ای درست کنم که وقتی موس رو روی شهر مورد نظر میاریم اون شهر هایلایت شه میخواستم بدونم چجوری باید اینکارو بکنم؟

حالا اگه اون نشد میخوام ببینم لااقل چجوری مثل این سایته درست کنم ؟

World Country Region, State, Province

تو این سایت بعد از انتخاب کشور و شهر شهر مورد نظر قرمز میشه من کد نقشه گوگل رو پیدا کردم اما هر کاری میکنم نمیتونم اون قسمت انتخاب کشور و شهر و درست کنم اگه میشه کمکم کنید

کد گوگل :

<script

src="http://maps.googleapis.com/maps/api/js">

</script>

<script>

function initialize()

{

var mapOpt = {

center:new google.maps.LatLng(51.508742,-0.120850),

zoom:5,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("googleMap"),mapOpt);

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="googleMap" style="width:75%;height:500px;"></div>

Share this post


Link to post
Share on other sites
با قابلیت image map توی دریم ویور

اگه دریم ویور ندارید میتونید از این سایت استفاده کنید:

Easy Imagemap Generator

dreamweaver دارم مشکلی نیست .

میشه یکم واضح تر بگید ؟ من از دیروز شروع کردن به برنامه نویسیه html قبلا #c بودم

اگه میشه کمک وضح تر بگید ممنون میشم

Share this post


Link to post
Share on other sites

وارد این سایت بشید

عکس مورد نظر رو آپلود کنید

دور قسمتی که میخواید انتخاب کنید تک تک کلید کنید متوجه میشید چه شکلیه

پایین یه کد html میده بهتون

همونو استفاده کنید

Share this post


Link to post
Share on other sites
وارد این سایت بشید

عکس مورد نظر رو آپلود کنید

دور قسمتی که میخواید انتخاب کنید تک تک کلید کنید متوجه میشید چه شکلیه

پایین یه کد html میده بهتون

همونو استفاده کنید

خیلی ممنون

Share this post


Link to post
Share on other sites
وارد این سایت بشید

عکس مورد نظر رو آپلود کنید

دور قسمتی که میخواید انتخاب کنید تک تک کلید کنید متوجه میشید چه شکلیه

پایین یه کد html میده بهتون

همونو استفاده کنید

خب من اینکارو کردن poly شهر هارم گرفتم چیکار کنم تا وقتی موس میاد توی اون مختصات رنگ اون قسمت عوض بشه؟ یا تو پریویو یک عکس دگ کوچیک باز بشه؟

Share this post


Link to post
Share on other sites

این که بخواید یه عکس دیگه کوچیک باز بشه باید کدنویسی بشه

خیلی سخت نیست ولی به صورت متنی نمیشه توضیح داد.

رنگ هم بخواد عوض بشه من تابحال همچین قابلیتی ندیدم

Share this post


Link to post
Share on other sites
این که بخواید یه عکس دیگه کوچیک باز بشه باید کدنویسی بشه

خیلی سخت نیست ولی به صورت متنی نمیشه توضیح داد.

رنگ هم بخواد عوض بشه من تابحال همچین قابلیتی ندیدم

خب همینو میگم اگه نمیشه رنگو عوض کرد چه کدی باید بزنم که وقتی موس توی اون مختصات اومد یک تصویر کوچیک کنار موس باز بشه ؟؟ که بعد تصویررنگ شده تو اون قسمت کوچک لود بشه

Share this post


Link to post
Share on other sites

اها من فکر کردم نحوه ساخت ایمیج مپ رو میخواید بدونید

با یه سرچ نحوه هایلایت کردن رو پیدا کردم یه پلاگین جی کوئریه که باید اضافه کنید به صفحه تون

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.logopark-development.com/bitrix/templates/iex/js/jquery.maphilight.min.js?14347037166299"></script>
<script type="text/javascript">$(function() {
$('.map').maphilight({fade: false});
});</script>

کد بالا رو به تگ head اضافه کنید.

به جای ClassName یه کلاس دلخواه بدید. مثلا map

بعد توی عکستون هم یه کلاس اضافه کنید

مثلا

<img src="../img.png">

بشه این:

<img src="../img.png" class="map">

Share this post


Link to post
Share on other sites

البته اول باید تقسیم بندی نقشه رو انجام بدید و به عکسی که تو کد html اون سایت بهتون داده کلاس رو اضافه کنید

موفق باشید

Share this post


Link to post
Share on other sites
البته اول باید تقسیم بندی نقشه رو انجام بدید و به عکسی که تو کد html اون سایت بهتون داده کلاس رو اضافه کنید

موفق باشید

خیلی ممنون بالاخره تونستم درستش کنم بازم دستتون درد نکنه !!!!

اینم فایلش : اگه خواستید نظرتونو بگید !

Map

Share this post


Link to post
Share on other sites
اها من فکر کردم نحوه ساخت ایمیج مپ رو میخواید بدونید

با یه سرچ نحوه هایلایت کردن رو پیدا کردم یه پلاگین جی کوئریه که باید اضافه کنید به صفحه تون

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.logopark-development.com/bitrix/templates/iex/js/jquery.maphilight.min.js?14347037166299"></script>
<script type="text/javascript">$(function() {
$('.map').maphilight({fade: false});
});</script>

کد بالا رو به تگ head اضافه کنید.

به جای ClassName یه کلاس دلخواه بدید. مثلا map

بعد توی عکستون هم یه کلاس اضافه کنید

مثلا

<img src="../img.png">

بشه این:

<img src="../img.png" class="map">

خیلی ممنون بالاخره تونستم درستش کنم بازم دستتون درد نکنه !!!!

اینم فایلش : اگه خواستید نظرتونو بگید !

Map

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری