رفتن به مطلب

ساخت فلش برای ورد پرس


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

سلام

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

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

لینک به ارسال

خودتون هم میتونید با برنامه ها این کار انجام بدید

و آدرس مقصد وارد کنید در هر باتوم(دکمه)

  • امتیاز 1
لینک به ارسال

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


<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
لینک به ارسال

سلام

همونطور که آقای فخار فرمودن شما فقط کافی هست از خاصیت ایمیج مپ استفاده کنید.

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


http://www.maschek.hu/imagemap/
http://www.image-maps.com/PHP_Map_Image.php
http://www.kolchose.org/simon/ajaximagemapcreator

ویرایش شده توسط sajjadnajafi
  • امتیاز 1
لینک به ارسال

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

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

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

لینک به ارسال

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

  • امتیاز 2
لینک به ارسال

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

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

tooltip wp-persia.html

لینک به ارسال

خط 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
}

لینک به ارسال

خط 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
}

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

لینک به ارسال

در ضمن کد تول تیپ را اینطوری که الان گذاشتید نگذارید

بخش داخل


<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
لینک به ارسال

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

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


dmweb-sidebar1

ممنون

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

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

پیداش کردم

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

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

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>

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

لینک به ارسال

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

  • امتیاز 2
لینک به ارسال

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

  • امتیاز 1
لینک به ارسال

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

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

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

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

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

لینک به ارسال

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

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

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

tooltip wp-persia.html

امتحان کنید

  • امتیاز 1
لینک به ارسال

tooltip wp-persia.html

امتحان کنید

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

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

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

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

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

2سوال آخر:

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

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

لینک به ارسال

نه به جی کوئری احتیاجی نداره

برای اینکه لینک بیاد باید در کدها تغییراتی بدید یعنی لینک های فعلی را به div تبدیل کنید و بعد جایی که توضیحات فعلی است رو لینک بگذارید

البته با توجه به فضای کمی که داره اینکار ممکنه خیلی جالب نباشه

  • امتیاز 2
لینک به ارسال
×
×
  • اضافه کردن...