ایمان احمدی

ممنون یکی از دوستان اینو برام طراحی کرد. سپاس

افزونه اونقدر ها هم ساده نیست.

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

عزیز منم واسه همین اینجا مطرح کردم دیگه.

کسی نیست درست کنه؟؟؟؟؟؟؟؟

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

http://forum.wp-parsi.com/tutorials/article/401-%d8%aa%d9%85%d8%b1%db%8c%d9%86%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%a7%d9%81%d8%b2%d9%88%d9%86%d9%87-%db%8c%da%a9/

http://forum.wp-parsi.com/tutorials/article/402-%d8%aa%d9%85%d8%b1%db%8c%d9%86%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%a7%d9%81%d8%b2%d9%88%d9%86%d9%87-%d8%af%d9%88/

http://forum.wp-parsi.com/tutorials/article/405-%d8%aa%d9%85%d8%b1%db%8c%d9%86%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa-%d8%a7%d9%81%d8%b2%d9%88%d9%86%d9%87-%d8%b3%d9%87/

دوست عزیز متاسفانه وقتش را ندارم

همچین هم ساده نیست

باید کد رهیگری بده

بعد کد قابل جستجو باشه

بعد آرشیو داشته باشه

بعد مدیریت داشته باشه

قابلیت نشون دادن وضعیت داشته باشه

قابلیت انتخاب دپارتمان رو داشته باشه

پس بهتره افزونه رو دانلود کنی

اول ساخت ایران :

http://wordpress.org...em/screenshots/

حالا دیگر افزونه ها:

http://wordpress.org...ts/screenshots/

http://wordpress.org...ins/tags/ticket

http://wordpress.org...ts/screenshots/

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

الباقی رو هم دیدم بازم کاره منو راه نمیندازه

سلام

دوستان یه افزونه میخوام با مشخصات زیر:

یه فرم که از کاربر اسم و ایمیل و شماره تماس و متن شکایت رو میگیره و بعد از ارسال اطلاعات یه کد رهگیری میده.

مدیر توی بخش مدیریت شکایت ها رو میبینه و می تونه وضعیتشون رو تغییر بده و احیانن یه متنی به عنوان جوابیه بنویسه

کاربر هر وقت خواست با ایمیل و کد رهگیری که داره از وضعیت شکایت و احیانن متنی که مدیر به عنوان جوابیه نوشته آگاه میشه.

دوستان دقیقا یه نمونه مثل همونی که تو سایت هست میخوام یعنی وقتی موس روی یه عنوان در سمت چپ قرار میگیرد عکس آناتومی همون بخش رو هایلایت می کند.

سلام به همگی

کسی میتونه مثل این صفحه طراحی کنه؟؟

تگ map یک کم قدیمیه من از div استفاده کردم

باقیش هم از خوندن کدها به دستتون می آد

2سوال آخر:

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

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

tooltip wp-persia.html

امتحان کنید

مرسی مشکلم حل شد.

فقط میتونم سوال کنم مشکل چی بود و چطوری حل شد؟؟؟آخه ظاهرا یه طوری دیگه شما رفتین جلو و کلا دیگه از تگ map و area استفاده نکردین

شاید تداخل جی کوئری داشته باشه کدی که در header.php گذاشتید را بردارید و به ابتدای کد داخل ابزارک اضافه کنید و تست بگیرید

بازم مشکل حل نشد

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

استاد جی کوئری ها تداخل نداره - مشکل از اینه که jquery172 همون جی کوئری 1.7.2 هستش با این تفاوت که من برای پلت های شخصی خودم خیلی شخصی سازیش کردم

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

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

1- این کد tooltip.js:

// IIFE to ensure safe use of $
(function( $ ) {
  // Create plugin
  $.fn.tooltips = function(el) {
    var $tooltip,
			 $body = $('dmweb-sidebar1'),
		 $el;
// Ensure chaining works
return this.each(function(i, el) {
		 $el = $(el).attr("data-tooltip", i);
		 // Make DIV and append to page
		 var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo("dmweb-sidebar1");
	  // Position right away, so first appearance is smooth
	  var linkPosition = $el.position();
	  $tooltip.css({
	    top: linkPosition.top - $tooltip.outerHeight() - 25,
	    left: linkPosition.left - $tooltip.width() - 20
	  });
	  $el
	  // Get rid of yellow box popup
	  .removeAttr("title")
	  // Mouseenter
	  .hover(function() {
	    $el = $(this);
	    $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']');
	    // Reposition tooltip, in case of page movement e.g. screen resize					   
	    var linkPosition = $el.position();
	    $tooltip.css({
		  top: linkPosition.top - $tooltip.outerHeight() - 25,
		  left: linkPosition.left - $tooltip.width() - 20
	    });
	    // Adding class handles animation through CSS
	    $tooltip.addClass("active");
	    // Mouseleave
	  }, function() {
	    $el = $(this);
	    // Temporary class for same-direction fadeout
	    $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']').addClass("out");
	    // Remove all classes
	    setTimeout(function() {
		  $tooltip.removeClass("active").removeClass("out");
		  }, 300);
	    });
	  });
    }
})(jQuery);

2- اینم کد header.php :

<?php global $wp_locale;
if (isset($wp_locale)) {
$wp_locale->text_direction = 'rtl';
} ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset') ?>" />
<title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
<!-- Created by Artisteer v4.1.0.59861 -->
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php
remove_action('wp_head', 'wp_generator');
if (is_singular() && get_option('thread_comments')) {
wp_enqueue_script('comment-reply');
}
wp_head();
?>
<script type="text/javascript" src="http://osvehmedical.com/jquery172.min.js"></script>
<!--[if !IE | (gt IE 8)]><!-->
<script src="http://osvehmedical.com/tooltips.js"></script>
<script>
$(function() {
$("#page-wrap area[title]").tooltips();
});
</script>
<!--<![endif]-->
</head>
<body <?php body_class(); ?>>
<div id="dmweb-main">
<?php if(theme_has_layout_part("header")) : ?>
<header class="dmweb-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>"><?php get_sidebar('header'); ?></header>
<?php endif; ?>
<nav class="dmweb-nav">
    <div class="dmweb-nav-inner">
    <?php
echo theme_get_menu(array(
   'source' => theme_get_option('theme_menu_source'),
   'depth' => theme_get_option('theme_menu_depth'),
   'menu' => 'primary-menu',
   'class' => 'dmweb-hmenu'
  )
);
get_sidebar('nav');
?>
	    </div>
    </nav>
<div class="dmweb-sheet clearfix">
		    <div class="dmweb-layout-wrapper">
			    <div class="dmweb-content-layout">
				    <div class="dmweb-content-layout-row">
					    <?php get_sidebar(); ?>
					    <div class="dmweb-layout-cell dmweb-content">

3- کد که در استایل پوسته گذاشتم:

.tooltip, .arrow:after {background: #000000;border: 2px solid #ffffff;}
.tooltip {
pointer-events: none;
opacity: 0;
display: inline-block;
position:relative;
padding: 5px 10px;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
margin-top:10px;
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 {}


.dmweb-content-layout .dmweb-sidebar1
{
position:relative;
overflow:visible
   -webkit-border-radius:20px 0 0;
   -moz-border-radius:20px 0 0;
   border-radius:20px 0 0;
   border-left:1px solid #B4CCD0;
   margin:0 auto;
   width: 300px;
}

4-کدی که در ابزارک گذاشتم:

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

<div align="right" id="page-wrap">
<img align="right" src="http://www.osvehmedical.com/wp-content/uploads/50--70--OSVE.png" width="229" height="605" usemap="#anatomi"  />
<map name="anatomi">

<area  shape="circle" coords="55,122,13" alt="Clavical"
href=http://www.osvehmedical.com/clavicle/
title="برای نمایش محصولات مربوط به کتف کلیک نمایید" target="_new" />
<area shape="rect" coords="171,123,198,189" alt="Humeral Shaft" title="برای نمایش محصولات بخش Humeral Shaft کلیک کنید" href=http://www.osvehmedical.com/humeral-shaft/ target="_new" />

<area shape="rect" coords="26,129,44,168" alt="Proximal Humerus" href=http://www.osvehmedical.com/proximal-humerus/ title="برای نمایش محصولاتproximal-humeru کلیک نمایید " target="_new" />
<area shape="rect" coords="180,202,206,248" alt="Distal Humerus"  href=http://www.osvehmedical.com/distal-humerus-2/
title="برای نمایش محصولات Distal Humerus کلیک نمایید " target="_new" />
<area shape="rect" coords="206,239,224,278" alt="Proximal Redius" href=http://www.osvehmedical.com/proximal-redius/ title="برای نمایش محصولات Proximal Redius کلیک کنید"
target="_new"/>

<area shape="rect" coords="193,282,221,306" alt="Radial Shaft" href=http://www.osvehmedical.com/radial-shaft/ title="برای نمایش محصولات Radial Shaft کلیک کنید"  target="_new"/>
<area shape="rect" coords="192,312,209,333" alt="Distal Radius" href=http://www.osvehmedical.com/distal-radius/ title="برای نمایش محصولات Distal Radius کلیک کنید"  target="_new"/>
<area shape="rect" coords="60,288,104,308" alt="Pelvis" href=http://www.osvehmedical.com/pelvis/ title="برای نمایش محصولات Pelvis کلیک کنید"  target="_new"/>
<area shape="rect" coords="133,302,160,368" alt="Proximal Femur" href=http://www.osvehmedical.com/proximal-femur/ title="برای نمایش محصولات Proximal Femur کلیک کنید"  target="_new"/>
<area shape="rect" coords="44,308,68,389" alt="Femoral Shaft" href=http://www.osvehmedical.com/femoral-shaft/  title="برای نمایش محصولات Femoral Shaft کلیک کنید"  target="_new"/>
<area shape="rect" coords="126,381,153,447" alt="Distal Femur" href=http://www.osvehmedical.com/distal-femur/  title="برای نمایش محصولات Distal Femur کلیک کنید"  target="_new"/>
</map>
</div>

بازم ممنون که راهنمایی میکنی

اگر سایتتون http://www.osvehmedical.com/ است

کلاس سایدبارتون

dmweb-sidebar1

ممنون

فقط فایلی به نام tooltip.js ندارم دوتا فایل آپ کردم که نامهایشان :jquery.min.js و jquery172.min.js

کدوم یکی رو ادیت کنم؟

پیداش کردم

خط 8 تا 18 کدهای tooltip.js را پاک کنید و بجای sidebar در کد زیر نام کلاس سایدبار خود را قرار دهید و جایگزین اون کدها کنید

	 $body = $('.sidebar'),
	 $el;
// Ensure chaining works
return this.each(function(i, el) {

	 $el = $(el).attr("data-tooltip", i);
	 // Make DIV and append to page
	 var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo(".sidebar");

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

.sidebar {
position:relative;
overflow:visible
}

چطور می تونم نام کلاس سایدبار رو پیدا کنم؟؟؟

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

باز هم نیازی به فلاش نیست شما باید tooltip را با جی کوئری بسازید و بجای تصویر از یک div با ابعاد تصویر و زمینه بک گراند تصویر استفاده کنید

این اون فایل html است که با تولتیپ درست کردم به صورتی تکی کار میکنه ولی درون ابزارک خیر

tooltip wp-persia.html

فک کنم بد توضیح دادم

ببینین دوستان یه عکس دارم این عکس با تگ map و area تقسیم بندی شده و هر قسمتش یه لینک داره حالا من میخوام روی هر قسمت که موس میره یه باکس ایجاد بشه مثل کاری که title میکنه ولی یه باکس شکیل تر وقتی این باکس ظاهر شد حاوی چند تا لینک باشه یا یه سری توضیحات چند تا از دوستان گفتن با tooltip انجام بدم این کار رو کردم تو بخش ابزارک ظاهر نمیشه ولی تو فایل html میاد. من میخوام اینکار تو ابزارک انجام بشه.

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

سلام

کسی هست اینجا بتونه یه عکس رو تبدیل به فلش کنه که هر قسمتش که میریم یه منو باز بشه و روی هر قسمت اون منو که کلیک میشه یه برگه از برگه های ورد پرس باز بشه؟؟؟

خیلی فوری هستش این پروژه

آقا اون مشکلم حل شد فقط الان تنها مشکلم اینه که تو سی اس اس position:relative; کردم فقط مونده margin هر چی میزارم درست نمیشه یعنی روی هر لینکی میرم تکست باکس یه جای دیگه ظاهر میشه.

این دوتا گزینه تو کلاس .tooltip تغییر میدم.

ممنون میشم اگه کمکم کنید

فایل html رو ضمیمه کردم یه نگاه بندازین دوستان

tooltip wp-persia.html

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

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

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

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

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

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

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

سپاس

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

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

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

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

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

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

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

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

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

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

contact form 7 ؟

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

میشه بیشتر راهنمایی کنید

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

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

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

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

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

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