ahadto 806 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 سلام دوستانآیا میشه برای یه عکس استایلی تعریف کرد که وقتی موس روش میره عکس محو بشه و یه متن جاش نشون بده؟کلاس عکسی که می خوام اینجور بشه توی استایل اینه:.ads-top نقل قول لینک به ارسال
isk 4447 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 http://www.backslash.gr/demos/contenthover-jquery-plugin/ 3 نقل قول لینک به ارسال
ahadto 806 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 این کد رو گذاشتم توی استایل:.contenthover { padding:20px 20px 10px 20px; }.contenthover, .contenthover h3, contenthover a { color:#fff; }.contenthover h3, .contenthover p { margin:0 0 10px 0; line-height:1.4em; padding:0; }.contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }.contenthover a.mybutton:hover { background:#34742d }$('#d1').contenthover({ overlay_background:'#000', overlay_opacity:0.8});این رو هم جایی که می خواستم به کار بردم اما کار نکرد:<img id="d1" alt="" src="عکس" width="600" height="120" /><div class="contenthover"><h3>Lorem ipsum dolor</h3>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat.<a class="mybutton" href="#">Lorem ipsum</a></div> نقل قول لینک به ارسال
Mohammad 1620 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 (ویرایش شده) باید فایل js زیر رو در پوسته فراخوانی کنید:http://www.backslash.gr/demos/contenthover-jquery-plugin/jquery.contenthover.jsقسمت زیر رو در یک فایل js جدید قرار بدید و فراخوانی کنید نه در css :$('#d1').contenthover({ overlay_background:'#000', overlay_opacity:0.8}); ویرایش شده فروردین 92 توسط Mohammad 3 نقل قول لینک به ارسال
isk 4447 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 src نشانی عکس است نه کلمه عکس و برای هر افکت باید یکی از چی کوئوری ها فراخوانی بشه - بهتر اینه که همه ی جی کوئوری ها رو در یک فایل و با هش های متفاوت قرار بدید 3 نقل قول لینک به ارسال
ahadto 806 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 باید فایل js زیر رو در پوسته فراخوانی کنید:http://www.backslash.gr/demos/contenthover-jquery-plugin/jquery.contenthover.jsقسمت زیر رو در یک فایل js جدید قرار بدید و فراخوانی کنید نه در css :$('#d1').contenthover({ overlay_background:'#000', overlay_opacity:0.8});میشه یه کم ساده تر توضیح بدید که چجور می تونم این فایل رو فراخوانی کنم و اون قسمت دوم رو وقتی توی فایل جدید گذاشتم آدرس رو چجوری و کجا به کار ببرم؟src نشانی عکس است نه کلمه عکس آره متوجه بودم برای هر افکت باید یکی از چی کوئوری ها فراخوانی بشه - بهتر اینه که همه ی جی کوئوری ها رو در یک فایل و با هش های متفاوت قرار بدیداینو دیگه اصلا متوجه نشدم نقل قول لینک به ارسال
Mohammad 1620 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 (ویرایش شده) اینجوری:مثلا فایل contenthover.js رو در پشه js مسیر پوسته بریزید بعد به این صورت فراخوانی کنید: قبل از تگ </header><script type="text/javascript" src="<?php bloginfo('template_directory') ?>/js/contenthoverjs" ></script>بعد یه فایل دلخواه تو همون مسیر بساز و قسمت دو رو قرار بده توش و مثل بالا فراخوانی کن. ویرایش شده فروردین 92 توسط Mohammad 3 نقل قول لینک به ارسال
ahadto 806 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 فایلها رو آپ کردم توی پوشه js قالب و بعد هم این دو تا رو گذاشتم قسمت هد در فایل هدر:<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/js/contenthover.js" ></script><script type="text/javascript" src="<?php bloginfo('template_directory') ?>/js/11.js" ></script>و سی اس اس رو هم گذاشتم استایل و اون یکی رو هم به کار بردم اما باز هم کار نکرد! نقل قول لینک به ارسال
Mohammad 1620 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 html رو چطوری وارد کردی؟ نقل قول لینک به ارسال
ahadto 806 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 مثل دمو:<img id="d1" src="http://feghahat.com/0012.png" width="620" height="110" /><div class="contenthover"> <h3>Lorem ipsum dolor</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p> <p><a href="#" class="mybutton">Lorem ipsum</a></p></div> نقل قول لینک به ارسال
Mohammad 1620 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 قسمت دوم رو بین کد زیر قرار بده:jQuery(document).ready(function($){}); 2 نقل قول لینک به ارسال
ahadto 806 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 باز هم نشد!این آدرسه، یه چک کنید بی زحمت:http://mobser.ir/sdfadad/ نقل قول لینک به ارسال
isk 4447 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 کدها که کاملاً درست هستند - احتمالاً فراخوانی ها و جای گذاری های شما ایراد دارههمون کد ها در پلاگین زیر قرار گرفته:http://wordpress.org/extend/plugins/wp-slide-up-box/ 5 نقل قول لینک به ارسال
ahadto 806 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 ببینید نمی خواستم کار به جی کوئری و این چیزها بکشه، توی آدرس زیر قسمت Example 3 - Text in Transparent Box نگاه کنید:http://www.w3schools.com/css/css_image_transparency.aspاینجا یه عکسه که متن روشه، آیا نمیشه یه تغییراتی توی همین کد داد که وقتی موس بره روش عکس کمرنگ شه و اون فونت نشون داده بشه؟ نقل قول لینک به ارسال
isk 4447 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 اینکه می فرمایید نمی خواهید از جی کوئوری و یا اینچنین چیزهایی استفاده کنید بهتون توصیه می کنم اگر واقعاً براتون مقرون به صرفه هست کمی در مورد event ها مطالعه کنید و از پایه شروع کنیدبه هر حال در یکی از تاپیک ها حدود 1 ماه پیش سوال مشابهی رو به روش اچ تی ام ال جواب دادم - اگر مایل بودید بگردید و پیدا کنید - متاسفانه الان نمی دونم کجاست 3 نقل قول لینک به ارسال
isk 4447 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 پاسخ از استاد فخار1. این کدها ربطی به کدها و راهنمایی دوستان ندارد و کلا راهی متفاوت است برای استفاده اش باید همه تغییرات قبلی را به شکل اول برگردونید2. این کدها را در style.css بگذارید.imgbox {position:relative;display:inline-block;width:200px;height:200px;}.imgbox .myimg {opacity:1;filter:alpha(opacity=1);-moz-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;-webkit-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}.imgbox:hover .myimg {opacity:0;filter:alpha(opacity=0);}.imgbox .imgboxtext {position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;filter:alpha(opacity=0);-moz-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out;-webkit-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}.imgbox:hover .imgboxtext {opacity:1;filter:alpha(opacity=1);}3. عکس ها را در کدهایی شبیه کدهای زیر جاسازی کنید<div class="imgbox"><img src="address.jpg" class="myimg" /><div class="imgboxtext">text</div></div> 4 نقل قول لینک به ارسال
ahadto 806 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 یه مشکل!من عکس رو با کد زیر به کار بردم و در ابعاد 600 در 330 استفاده کردم، اما کلا ریخته به هم:<div class="imgbox"><img class="myimg" alt="" src="http://mobser.ir/up/2012/11/f1.jpg" width="660" height="330" /><div class="imgboxtext">متن تستی</div></div>این هم آدرس:http://mobser.ir/شیبسی/ نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 در خط 4 و 5 کدهای css مقدار width:200px;height:200px;را تغییر دهید به ابعاد عکس 3 نقل قول لینک به ارسال
ahadto 806 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 اون دو تا خط رو حذف کردم، فک کنم اینطوری بهتره، چون هر جایی می تونیم اندازه رو خودمون تعیین کنیم ولی اینجوری فقط برا یک عکس قابل استفاده است نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 اون دو تا خط رو حذف کردم، فک کنم اینطوری بهتره، چون هر جایی می تونیم اندازه رو خودمون تعیین کنیم ولی اینجوری فقط برا یک عکس قابل استفاده استبهم ریختگی حروف در محلی که گفتید بخاطرfloat: right;line-height:0;}است این تکه کد را در فایل style.css جستجو کنید و حذفش کنید در ضمن در دو سه خط پایینی هم همین اندازه لحاظ شده که می تونیدline-height:0;را از همشون حذف کنید در مورد ابعادی که حذف کردید این ابعاد را باید در موارد مختلف بگذارید می تونید روی خود لایه اعمال کنید ولی اگر نباشند با توجه به اینکه لایه حروف بر راساس اون لایه قرار گرفته در مرورگر ie تکست ها دیده نمی شوند 2 نقل قول لینک به ارسال
ahadto 806 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 بهم ریختگی حروف در محلی که گفتید بخاطرfloat: right;line-height:0;}است این تکه کد را در فایل style.css جستجو کنید و حذفش کنید در ضمن در دو سه خط پایینی هم همین اندازه لحاظ شده که می تونیدline-height:0;را از همشون حذف کنیددر مورد ابعادی که حذف کردید این ابعاد را باید در موارد مختلف بگذارید می تونید روی خود لایه اعمال کنید ولی اگر نباشند با توجه به اینکه لایه حروف بر راساس اون لایه قرار گرفته در مرورگر ie تکست ها دیده نمی شوندآره درست شد، فقط یه سوال دیگه اینکه توی اون آدرسی که بهتون دادم برای اون متن زمینه یه border گذاشتم که چسبیده به متن، برای اینکه اون متن یه چند پیکسل از اطراف اون بردر زرد رنگ فاصله بگیره چیکار باید کنم؟ نقل قول لینک به ارسال
Mohammad 1620 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 padding: 5px; 3 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .