رفتن به مطلب

استفاده از event در تگ <area>


پست های پیشنهاد شده

سلام دوستان یه مشکلی دارم خیلی هم فوری باید حل بشه لطفا کمکم کنید

چطوری وقتی موس روی بخشی از تگ <area> می برم یک منو(یه چیزی که توضیحاتو بشه داد در مورد اون قسمت عکس)ظاهر بشه

به عبارتی من یه عکس دارم که با تگ <area> و <map> به قسمتهای مختلفش لینک دادم حالا می خوام وقتی موس روی هر بخش که میره و می خواد کلیک کنه یه باکسی ظاهر بشه که توش توضیحاتی بزارم.

امید وارم منظورمو رسونده باشم.

فقط دوستان لطف کنن کمک کنن خیلی حیاتی مرسی :wub::unsure::wub:

لینک به ارسال

سلام توي لينكي كه ميده

به اين صورت ي تايتل هم اضافه كن


<a href="http://www.google.com" title="google"> my site <a>

ویرایش شده توسط RedPlus
لینک به ارسال

سلام توي لينكي كه ميده

به اين صورت ي تايتل هم اضافه كن


<a href="http://www.google.com" title="google"> my site <a>

title و دادم اون مدلی نه. میخوام موقعه ای که موس میره روش یه باکس بهتر ظاهر بشه. مثب وقتی میری رو منو زیر منو ظاهر میشه

لینک به ارسال

حالا اين به صورت خيلي ساده نشون ميده اگه خواستي با css هم ميشه زيبا سازي كرد

tolltip خودت ي سرچي بزني متوجه ميشي

لینک به ارسال

حالا اين به صورت خيلي ساده نشون ميده اگه خواستي با css هم ميشه زيبا سازي كرد

tolltip خودت ي سرچي بزني متوجه ميشي

این کد هستش میتونی یه نمونه پیاده کنی؟؟



<img class="aligncenter" alt="" src="http://www.osvehmedical.com/wp-content/uploads/50--70--OSVE.png" usemap="#anatomi" />
<map name="anatomi">
<area alt="clavical" coords="55,122,13" shape="circle" href="http://www.osvehmedical.com/clavicle/" target="_new" title="Clavicle, Please Click Here" />
<area alt="balayzano" coords="126,381,153,447" shape="rect" href="http://google.com" />
<area alt="balayzano" coords="149,567,9" shape="circle" href="http://yahoo.com" />
<area coords="133,452,148,502" shape="rect" /> <area coords="129,516,147,553" shape="rect" /> </map>

لینک به ارسال

نمونه:

لینک حذف شد!

بر روی پرچم های روی نقشه کلیک کنید

در همین انجمن افزونه رو قرار دادم

ویرایش شده توسط isk
لینک به ارسال

مسشه لینک افزونه را بدین؟؟؟یا بگین چی باید سرچ کنم

ویرایش شده توسط isk
لینک به ارسال

اگر همین مد نظرتونه پیدا می کنم همینجا میذارم

آره یه همچین چیزی میخوام فقط این افزونه تو ابزارکم کار میکنه؟

لینک به ارسال

اگر همین مد نظرتونه پیدا می کنم همینجا میذارم

آره یه همچین چیزی میخوام فقط این افزونه تو ابزارکم کار میکنه؟

اخه من این کارو میخوام تو بخش "متن" در ابزارک ها پیاده کنم اگر بخوای بهتر متوجه بشی این لینک سایت سمت راست سایت عکس یه آناتومی هستش روی کتف سمت چپ که میری یه لینک دادم بهش اونجا میخوام این tooltip بیاد.

لینک به ارسال

برای این مثالی که دادید نیازی به اون افزونه که گفتم ندارید - از تولتیپ استفاده کنید

تولتیپ های مبتنی بر تایتل اینجا به کار میان


<img src="any address to image file" width="500" height="500" alt="Any Alternative Text" usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="10,10,20,20" alt="Alt1" href="Any Link" title="Its important that your title brings here, Such as HASAN">
</map>

برای ایجاد تولتیپ هم در اینجا مثلاً 2 روش معرفی شده:


http://forum.wp-parsi.com/topic/12370-%D8%AA%D8%B9%D8%B1%DB%8C%D9%81-%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AA%DA%AF-title-%D9%85%D9%88%D8%AC%D9%88%D8%AF-%D8%AF%D8%B1-%D9%84%DB%8C%D9%86%DA%A9/page__hl__%D8%AA%D9%88%D9%84%D8%AA%DB%8C%D9%BE#entry97660

ویرایش شده توسط isk
لینک به ارسال

برای این مثالی که دادید نیازی به اون افزونه که گفتم ندارید - از تولتیپ استفاده کنید

تولتیپ های مبتنی بر تایتل اینجا به کار میان


<img src="any address to image file" width="500" height="500" alt="Any Alternative Text" usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="10,10,20,20" alt="Alt1" href="Any Link" title="Its important that your title brings here, Such as HASAN">
</map>

برای ایجاد تولتیپ هم در اینجا مثلاً 2 روش معرفی شده:


http://forum.wp-parsi.com/topic/12370-%D8%AA%D8%B9%D8%B1%DB%8C%D9%81-%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AA%DA%AF-title-%D9%85%D9%88%D8%AC%D9%88%D8%AF-%D8%AF%D8%B1-%D9%84%DB%8C%D9%86%DA%A9/page__hl__%D8%AA%D9%88%D9%84%D8%AA%DB%8C%D9%BE#entry97660

ممنون ولی مشکل من اینه که کد CSS تو ابزارک و قسمت "متن" عمل نمی کنن. چطوری باید کد های CSS رو تو ابزارک اجرا کرد؟؟؟

اگر به سایت یه سر بزنی و به بلوک سمت راست نگاه کنی عکس آناتومی هستش متوجه میشی دوست عزیز

لینک به ارسال
چطوری باید کد های CSS رو تو ابزارک اجرا کرد؟؟؟

بصورت:


<style>
...

</style>

لینک به ارسال

بصورت:


<style>
...

</style>

چند تا آموزش tooltip دیدم همشون با استفاده از JQeury بودن چطوری تو ابزارک از JQeury استفاده می کنند؟؟؟؟ اخه تو همشون باید یه فایل رو آپ می کردم و الباقی ماجرا که تو ابزارک نمیشه.

لینک به ارسال

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


<img class="aligncenter" alt="" src="http://www.osvehmedical.com/wp-content/uploads/50--70--OSVE.png" usemap="#anatomi" />
<map name="anatomi">
<area alt="clavical" coords="55,122,13" shape="circle"
href=http://www.osvehmedical.com/clavicle/ title="Clavical ! Please Click Here" />
<area alt="balayzano" coords="126,381,153,447" shape="rect" href="http://google.com" />
<area alt="balayzano" coords="149,567,9" shape="circle" href="http://yahoo.com" />
<area coords="133,452,148,502" shape="rect" /> <area coords="129,516,147,553" shape="rect" /> </map>

میخوام به جای متنی که در title هست اون متن در تول تیپ بیاد

ممنون

ویرایش شده توسط ایمان احمدی
لینک به ارسال

خب این مراحل رو به ترتیب طی کنید:

در فایل استایل قرار بدید:


.tooltip, .arrow:after {background: #000000;border: 2px solid #ffffff;}
.tooltip {
pointer-events: none;
opacity: 0;
display: inline-block;
position: absolute;
padding: 10px 20px;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
margin-top: 20px;
text-align: right;
font: 14px tahoma;
font-stretch: condensed;
text-decoration: none;
text-transform: none;
box-shadow: 0 0 7px black;
-webkit-box-shadow: 0 0 7px black;
-moz-box-shadow: 0 0 7px black;
}
.arrow {width: 70px;height: 16px;overflow: hidden;position: absolute;left: 50%;margin-left: -35px;bottom: -16px;}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-moz-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.tooltip.active {
opacity: 1;
margin-top: 5px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.tooltip.out {opacity: 0;margin-top: -20px;}
#page-wrap {}

در ابزارک متن قرار دهید:


<div id="page-wrap">
<img src="اینجا نشانی تصویر را وارد نمایید" width="100" height="100" alt="any alternative text" usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="10,10,20,20" alt="Alt1" title="اینجا متنی که مایل به نمایش در تولتیپ هستید بنویسید">
</map>
</div>

در فایل هدر قرار دهید:


<script type="text/javascript" src="..../jquery172.min.js"></script>
<!--[if !IE | (gt IE 8)]><!-->
<script src="..../tooltips.js"></script>
<script>
$(function() {
$("#page-wrap area[title]").tooltips();
});
</script>
<!--<![endif]-->

فایل زیر را اکسترکت کرده و 2 فایل درونش را بر روی هاست خود آپلود کنید و در کد بالا نشانی هر دو را اصلاح کنید:

js.zip

در تگ map بسته به تعداد نقاط مورد نظر خود تگ های area را اضافه کنید

لینک به ارسال

خب این مراحل رو به ترتیب طی کنید:

در فایل استایل قرار بدید:


.tooltip, .arrow:after {background: #000000;border: 2px solid #ffffff;}
.tooltip {
pointer-events: none;
opacity: 0;
display: inline-block;
position: absolute;
padding: 10px 20px;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
margin-top: 20px;
text-align: right;
font: 14px tahoma;
font-stretch: condensed;
text-decoration: none;
text-transform: none;
box-shadow: 0 0 7px black;
-webkit-box-shadow: 0 0 7px black;
-moz-box-shadow: 0 0 7px black;
}
.arrow {width: 70px;height: 16px;overflow: hidden;position: absolute;left: 50%;margin-left: -35px;bottom: -16px;}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-moz-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.tooltip.active {
opacity: 1;
margin-top: 5px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.tooltip.out {opacity: 0;margin-top: -20px;}
#page-wrap {}

سپاس گذارم که جواب میدین دوستان

این کد ها رو تو فایل CSS پوسته گذاشتم

کدی که گفتین در هدر بزارم اونم گذاشتم و آدرس اون دوتا فایل هم که تو روت سایتم آپ کرده بودم اصلاح کردم ولی بازم کار نکرد

نباید تو ابزارک جایی اون کلاسهایی که در CSS تعریف شده را فراخوانی کرد؟؟

وقتی تو تایتل متنم رو میزارم اتفاق خاصی نمیوفته یعنی خیلی ساده داره نشون میده انگار تایتل خود area نمایش داده میشه و CSS روش اعمال نشده.

لینک به ارسال

یه جایی همین ها رو بارگذاری کنید و لینک آنلاین بدید

پ.خ کردم دوست عزیز

لینک به ارسال

بله - css - html - js بدون بک پنل هم قابل تشخیصند

توبتیپ رو نمایش میده - ببینید:

post-865-0-08626800-1380980645_thumb.jpg

فقط باید با css ها جاشو تغییر بدید تا مطابق سلیقتون بشه

لینک به ارسال

بله - css - html - js بدون بک پنل هم قابل تشخیصند

توبتیپ رو نمایش میده - ببینید:

post-865-0-08626800-1380980645_thumb.jpg

فقط باید با css ها جاشو تغییر بدید تا مطابق سلیقتون بشه

با 3تا مرورگر تست کردم هیچ کدوم نمیاره فقط کروم به صورت خیلی معمولی (همون تایتل خود area) نشون میده.

الان من باید چیکار کنم؟؟؟ این چیزی که تو عکس نشون دادی به هیچ عنوان نمی یاد.

لینک به ارسال

شما اینکار رو کردید:

نمیشه بررسی کرد!

مشخصات هاست و یوزر سایت رو پ.خ کردم.

این دوستمون هم مثل اینکه نمیتون جواب بدن به هر دلیلی

اگر شما لازم میدونین به شما بدم مشخصات رو تا ببینین؟

لینک به ارسال

دوست گرامی متاسفم از اینکه بیش از حدی که سایتتون لایق بود براتون وقت گذاشتم و اسکریپت استیبلی براتون ارائه دادم- حتی از سایت خودتون براتون اسکرین شات گرفتم و پیوست کردم - اما حاضر نیستید استایل رو تغییر بدید.

یا شما وب ادمین هستید که وای به حال اون سایت و یا شما طراح سایت هستید که وای به حال کارفرما!

لینک به ارسال

دوست گرامی متاسفم از اینکه بیش از حدی که سایتتون لایق بود براتون وقت گذاشتم و اسکریپت استیبلی براتون ارائه دادم- حتی از سایت خودتون براتون اسکرین شات گرفتم و پیوست کردم - اما حاضر نیستید استایل رو تغییر بدید.

یا شما وب ادمین هستید که وای به حال اون سایت و یا شما طراح سایت هستید که وای به حال کارفرما!

والا من گفتم به هردلیلی نتونستین نگفتم که بلد نیستین احساس کردم سرتون شلوغ نتوستین جواب بدین

منظورم این نبود که شما یاد ندارین یا هر چیزه دیگه که برداشت کردین

در جواب اسکرین شاتتون گفتم نمیاد واسه من اون چیزی که شما نشون دادین . وقتی چیزی نمیاد چطور من ویرایش کنم استایل رو. فکر کنم شما اون جوابی که من دادم مبنی بر اینکه اسکرین شاتتون برای من نمیاد و روی 3تا مرورگز امتحان کردم مشاهده نکردین

نمیدونم شما چرا ناراحت شدین به هرحال من نیتم جسارت نبود

اگر امکانش هست بگین چطور تغییر بدم.

سپاس

ویرایش شده توسط ایمان احمدی
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...