ایمان احمدی 4 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 سلامکسی هست اینجا بتونه یه عکس رو تبدیل به فلش کنه که هر قسمتش که میریم یه منو باز بشه و روی هر قسمت اون منو که کلیک میشه یه برگه از برگه های ورد پرس باز بشه؟؟؟خیلی فوری هستش این پروژه لینک به ارسال
Black_Sky 6349 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 خودتون هم میتونید با برنامه ها این کار انجام بدید و آدرس مقصد وارد کنید در هر باتوم(دکمه) 1 لینک به ارسال
imanfakhar 26231 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 نیازی به فلش هم نیست می تونید با کدی شبیه این چیزی که می خواهید را بسازید<map id="ImgMap0" name="ImgMap0"><area alt="" coords="30, 100, 150, 180" href="post1" shape="rect" /><area alt="" coords="100, 230, 230, 310" href="post2" shape="rect" /><area alt="" coords="10, 230, 80, 350" href="post3" shape="rect" /><area alt="" coords="150, 0, 240, 50" href="post4" shape="rect" /></map><img height="360" src="img.jpg" usemap="#ImgMap0" width="240" /> 7 لینک به ارسال
sajjadnajafi 568 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 (ویرایش شده) سلامهمونطور که آقای فخار فرمودن شما فقط کافی هست از خاصیت ایمیج مپ استفاده کنید.ابزارهای آنلاین برای آسون کردن کار ساخت ایمیج مپ:http://www.maschek.hu/imagemap/http://www.image-maps.com/PHP_Map_Image.phphttp://www.kolchose.org/simon/ajaximagemapcreator ویرایش شده مهر 92 توسط sajjadnajafi 1 لینک به ارسال
ایمان احمدی 4 ارسال شده در مهر 92 مالک گزارش بازنشر ارسال شده در مهر 92 فک کنم بد توضیح دادمببینین دوستان یه عکس دارم این عکس با تگ map و area تقسیم بندی شده و هر قسمتش یه لینک داره حالا من میخوام روی هر قسمت که موس میره یه باکس ایجاد بشه مثل کاری که title میکنه ولی یه باکس شکیل تر وقتی این باکس ظاهر شد حاوی چند تا لینک باشه یا یه سری توضیحات چند تا از دوستان گفتن با tooltip انجام بدم این کار رو کردم تو بخش ابزارک ظاهر نمیشه ولی تو فایل html میاد. من میخوام اینکار تو ابزارک انجام بشه.امید وارم منظورمو رسونده باشم. لینک به ارسال
imanfakhar 26231 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 باز هم نیازی به فلاش نیست شما باید tooltip را با جی کوئری بسازید و بجای تصویر از یک div با ابعاد تصویر و زمینه بک گراند تصویر استفاده کنید 2 لینک به ارسال
ایمان احمدی 4 ارسال شده در مهر 92 مالک گزارش بازنشر ارسال شده در مهر 92 باز هم نیازی به فلاش نیست شما باید tooltip را با جی کوئری بسازید و بجای تصویر از یک div با ابعاد تصویر و زمینه بک گراند تصویر استفاده کنیداین اون فایل html است که با تولتیپ درست کردم به صورتی تکی کار میکنه ولی درون ابزارک خیرtooltip wp-persia.html لینک به ارسال
ایمان احمدی 4 ارسال شده در مهر 92 مالک گزارش بازنشر ارسال شده در مهر 92 دوستان کسی نیست کمک کنه؟؟؟ لینک به ارسال
Black_Sky 6349 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 اسپم نديدپاسخ شما ظرف 24 ساعت پاسخ داده خواهد شد 1 لینک به ارسال
imanfakhar 26231 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 خط 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} لینک به ارسال
ایمان احمدی 4 ارسال شده در مهر 92 مالک گزارش بازنشر ارسال شده در مهر 92 خط 8 تا 18 کدهای tooltip.js را پاک کنید و بجای sidebar در کد زیر نام کلاس سایدبار خود را قرار دهید و جایگزین اون کدها کنید $body = $('.sidebar'), $el;// Ensure chaining worksreturn 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}چطور می تونم نام کلاس سایدبار رو پیدا کنم؟؟؟ لینک به ارسال
imanfakhar 26231 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 اگر سایتتون http://www.osvehmedical.com/ است کلاس سایدبارتون dmweb-sidebar1 3 لینک به ارسال
imanfakhar 26231 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 در ضمن کد تول تیپ را اینطوری که الان گذاشتید نگذارید بخش داخل <style type="text/css"></style> را به فایل style.css قالب اضافه کنید بخش <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]-->به header.php و <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>را به ابزارک متن سایدبار و <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />و </head><body> و </body></html>رو هم حذف کنید 2 لینک به ارسال
ایمان احمدی 4 ارسال شده در مهر 92 مالک گزارش بازنشر ارسال شده در مهر 92 (ویرایش شده) اگر سایتتون http://www.osvehmedical.com/ استکلاس سایدبارتون dmweb-sidebar1ممنونفقط فایلی به نام tooltip.js ندارم دوتا فایل آپ کردم که نامهایشان :jquery.min.js و jquery172.min.jsکدوم یکی رو ادیت کنم؟پیداش کردم ویرایش شده مهر 92 توسط ایمان احمدی لینک به ارسال
ایمان احمدی 4 ارسال شده در مهر 92 مالک گزارش بازنشر ارسال شده در مهر 92 متاسفانه تو بخش ابزارک کار نمیکنه مراحلی که رفتم به شکل زیر هستش:1- این کد tooltip.js:// IIFE to ensure safe use of $(function( $ ) { // Create plugin $.fn.tooltips = function(el) { var $tooltip, $body = $('dmweb-sidebar1'), $el;// Ensure chaining worksreturn 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'); ?>" /><?phpremove_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"> <?phpecho 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>بازم ممنون که راهنمایی میکنی لینک به ارسال
imanfakhar 26231 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 شاید تداخل جی کوئری داشته باشه کدی که در header.php گذاشتید را بردارید و به ابتدای کد داخل ابزارک اضافه کنید و تست بگیرید 2 لینک به ارسال
isk 4447 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 استاد جی کوئری ها تداخل نداره - مشکل از اینه که jquery172 همون جی کوئری 1.7.2 هستش با این تفاوت که من برای پلت های شخصی خودم خیلی شخصی سازیش کردم 1 لینک به ارسال
ایمان احمدی 4 ارسال شده در مهر 92 مالک گزارش بازنشر ارسال شده در مهر 92 شاید تداخل جی کوئری داشته باشه کدی که در header.php گذاشتید را بردارید و به ابتدای کد داخل ابزارک اضافه کنید و تست بگیریدبازم مشکل حل نشدلازمه بهتون دسترسی بدم چک کنید؟؟؟؟استاد جی کوئری ها تداخل نداره - مشکل از اینه که jquery172 همون جی کوئری 1.7.2 هستش با این تفاوت که من برای پلت های شخصی خودم خیلی شخصی سازیش کردمخوب اگه امکان داره بگین چطور باید درستش کنم؟؟؟ لینک به ارسال
imanfakhar 26231 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 بازم مشکل حل نشدلازمه بهتون دسترسی بدم چک کنید؟؟؟؟خوب اگه امکان داره بگین چطور باید درستش کنم؟؟؟tooltip wp-persia.html امتحان کنید 1 لینک به ارسال
ایمان احمدی 4 ارسال شده در مهر 92 مالک گزارش بازنشر ارسال شده در مهر 92 (ویرایش شده) tooltip wp-persia.htmlامتحان کنیدمرسی مشکلم حل شد.فقط میتونم سوال کنم مشکل چی بود و چطوری حل شد؟؟؟آخه ظاهرا یه طوری دیگه شما رفتین جلو و کلا دیگه از تگ map و area استفاده نکردین ویرایش شده مهر 92 توسط ایمان احمدی لینک به ارسال
imanfakhar 26231 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 تگ map یک کم قدیمیه من از div استفاده کردم باقیش هم از خوندن کدها به دستتون می آد 1 لینک به ارسال
ایمان احمدی 4 ارسال شده در مهر 92 مالک گزارش بازنشر ارسال شده در مهر 92 تگ map یک کم قدیمیه من از div استفاده کردمباقیش هم از خوندن کدها به دستتون می آد2سوال آخر:با این روش دیگر احتیاج به اون فایل های جی کوئری نیست؟؟؟اگر بخواهم به جای اینکه او توضیحات بیاد وقتی موس میره رو بخش ها مورد نظر چندتا لینک بیاد. آیا میشه؟؟؟ لینک به ارسال
imanfakhar 26231 ارسال شده در مهر 92 گزارش بازنشر ارسال شده در مهر 92 نه به جی کوئری احتیاجی نداره برای اینکه لینک بیاد باید در کدها تغییراتی بدید یعنی لینک های فعلی را به div تبدیل کنید و بعد جایی که توضیحات فعلی است رو لینک بگذارید البته با توجه به فضای کمی که داره اینکار ممکنه خیلی جالب نباشه 2 لینک به ارسال
پست های پیشنهاد شده