• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
ایمان احمدی

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

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

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

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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


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

ویرایش شده در توسط RedPlus
3

به اشتراک گذاری این پست


لینک به پست

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

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


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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

حالا اين به صورت خيلي ساده نشون ميده اگه خواستي با 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>

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

نمونه:

لینک حذف شد!

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

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

ویرایش شده در توسط isk
1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

ویرایش شده در توسط isk
0

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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


<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
1

به اشتراک گذاری این پست


لینک به پست

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

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


<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 رو تو ابزارک اجرا کرد؟؟؟

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

0

به اشتراک گذاری این پست


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

بصورت:


<style>
...

</style>

2

به اشتراک گذاری این پست


لینک به پست

بصورت:


<style>
...

</style>

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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


<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 هست اون متن در تول تیپ بیاد

ممنون

ویرایش شده در توسط ایمان احمدی
0

به اشتراک گذاری این پست


لینک به پست

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

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


.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 را اضافه کنید

3

به اشتراک گذاری این پست


لینک به پست

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

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


.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 روش اعمال نشده.

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

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

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

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

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

سپاس

ویرایش شده در توسط ایمان احمدی
0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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


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

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

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


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