-
پایان فعالیت بخشهای انجمن: امکان ایجاد موضوع یا نوشته جدید برای عموم کاربران غیرفعال شده است
ساخت دکمه در وبلاگ
- شروع کننده موضوع poq
- تاریخ شروع
دوستان این کد رو استفاده کردم . وقتی یه دونه از این کد رو میذارم تو قالب وبلاگ درست کار میکنه ولی وقتی یکی دیگه هم پشتش میارم دیگه هیچ کدومشون کار نمیکنن.
کسی نمیدونه باید چیکار کرد ؟
کسی نمیدونه باید چیکار کرد ؟
کد:
<!-- Script by hscripts.com -->
<!-- copyright of HIOX INDIA -->
<!-- more scripts @ http://www.hscripts.com -->
<script type="text/javascript">
var picture1 = "Your Picture1";
var picture2 = "Your Picture2";
if (document.images) {
image1 = new Image();
image1.src = picture1
image2 = new Image();
image2.src = picture2;
}
function mover(img){
document["change"].src = img.src;
}
function mout(img){
document["change"].src = img.src;
}
</script>
<a href="http://www.hscripts.com" onMouseOver="mover(image1)" onMouseOut="mout(image2)">
<img name="change" src="Your Picture2" border=0></a>
<!-- Script by hscripts.com -->عزیز من اینکاره نیستم . برنامه نویسی بلد نیستم . اونم CSS ! همین جاوا رو هم به زور میفهمم چی نوشته .
همین کد جاوایی که نوشتم رو نمیشه چیزی به اول و آخرش اضافه کرد که وقتی 3-4 تاشو پشت سر هم استفاده میکنیم از کار نیفتن ؟
اون <script/ رو هم نمیشه جابجا کرد وقتی انتقالش میدم به آخر کد دکمه کامل از بین میره .
الان اینو با CSS پیدا کردم . درستم کار میکنه وقتی میذارمش تو head هر جا که ازش استفاده میکنم کامل و صحیح دکمه میاد ولی مساله اینجاست که من دکمه های خودمو دارم نمیخوام این شکلی باشه . میخوام عکس باشه در واقع .
این کد head هست :
این کد head هست :
کد:
<style>
.container {
font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
width: 550px;
margin: 80px auto;
text-align: center;
}
.container > .button { margin: 0 10px; }
.button {
display: inline-block;
vertical-align: top;
position: relative;
overflow: hidden;
min-width: 96px;
line-height: 46px;
padding: 0 24px;
font-size: 14px;
color: white;
text-align: center;
text-decoration: none;
text-shadow: 0 1px #154c86;
background-color: #247edd;
background-clip: padding-box;
border: 1px solid;
border-color: #1c65b2 #18589c #18589c;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
}
.button:before {
content: '';
position: absolute;
top: -25%;
bottom: -25%;
left: -20%;
right: -20%;
border-radius: 50%;
background: transparent;
-webkit-box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.5);
}
.button:hover { background-color: #1a74d3; }
.button:active {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 -1px #154c86;
background: #1f71c8;
border-color: #113f70 #154c86 #1c65b2;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(top, #1a5da5, #3a8be0);
background-image: -moz-linear-gradient(top, #1a5da5, #3a8be0);
background-image: -o-linear-gradient(top, #1a5da5, #3a8be0);
background-image: linear-gradient(to bottom, #1a5da5, #3a8be0);
}
.button:active:before {
top: -50%;
bottom: -125%;
left: -15%;
right: -15%;
-webkit-box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 96px rgba(0, 0, 0, 0.2);
}
.button-green {
text-shadow: 0 1px #0d4d09;
background-color: #1ca913;
border-color: #147b0e #11640b #11640b;
}
.button-green:hover { background-color: #159b0d; }
.button-green:active {
text-shadow: 0 -1px #0d4d09;
background: #189210;
border-color: #093606 #0d4d09 #147b0e;
background-image: -webkit-linear-gradient(top, #126d0c, #20c016);
background-image: -moz-linear-gradient(top, #126d0c, #20c016);
background-image: -o-linear-gradient(top, #126d0c, #20c016);
background-image: linear-gradient(to bottom, #126d0c, #20c016);
}
.button-red {
text-shadow: 0 1px #72100d;
background-color: #cd1d18;
border-color: #9f1713 #891310 #891310;
}
.button-red:hover { background-color: #c01511; }
.button-red:active {
text-shadow: 0 -1px #72100d;
background: #b61a15;
border-color: #5b0d0b #72100d #9f1713;
background-image: -webkit-linear-gradient(top, #921511, #e4201b);
background-image: -moz-linear-gradient(top, #921511, #e4201b);
background-image: -o-linear-gradient(top, #921511, #e4201b);
background-image: linear-gradient(to bottom, #921511, #e4201b);
}
</style>
2nE9
Registered User
- تاریخ عضویت
- 16 آپریل 2013
- نوشته‌ها
- 541
- لایک‌ها
- 93
تازه دارم جاوا اسکریپت یاد میگیرم تقریبا میفهمم کد رو ولی اصلاحشو بلد نیستم .
2nE9
Registered User
- تاریخ عضویت
- 16 آپریل 2013
- نوشته‌ها
- 541
- لایک‌ها
- 93
بااین میشه دکمه رو با CSS ساخت البته میشه کداش کمتر هم باشه ها / ولی برای تغییر عکس میشه از CSS Sprite استفاده کرد که متاسفانه چون بلد نیسید یه مقدار کار سخت میشه اما لینک 2 تا عکس خود رو بدید عکسی که میخواید تو حالت عادی باشه و عکسی که میخواید وقتی موس رفت رو عکس تغییر بکنه این 2 تارو بدید براتون css اش رو مینویسم
دستت طلا داداش . خودم با همون برنامه نویسی دست و پا شکسته ای که بلد بودم یه کد رو تغییر دادم و تونستم صفحه ای که میخوامو بسازم.
الان خیلی عالی اجرا میشه . میخوام تو یه هاست رایگان مثل persiangig آپلودش کنم .
فایل html رو که با اسم index آپلود میکنم . پوشه ی css رو هم که توش یه فایل فقط هست رو هم آپلود میکنم ولی index درست اجرا نمیشه و فایل css رو پیدا نمیکنه .
به نظرتون چجوری باید آدرس دهی بشه ؟ الان که از رو هارد آدرس دهی میکنه و خوب هم اجرا میشه کد آدرسش تو فایل html اینه :
به نظرتون چجوری باید عوضش کنم که بجای پوشه ای که رو هارد کنار html هست فایل css رو از مثلا aaaa.persiangig.com/css/styles.css اجرا کنه ؟
ضمنا این آدرسو جایگزین عبارت جلوی href= هم کردم ولی بازم پیداش نکرد .
الان خیلی عالی اجرا میشه . میخوام تو یه هاست رایگان مثل persiangig آپلودش کنم .
فایل html رو که با اسم index آپلود میکنم . پوشه ی css رو هم که توش یه فایل فقط هست رو هم آپلود میکنم ولی index درست اجرا نمیشه و فایل css رو پیدا نمیکنه .
به نظرتون چجوری باید آدرس دهی بشه ؟ الان که از رو هارد آدرس دهی میکنه و خوب هم اجرا میشه کد آدرسش تو فایل html اینه :
کد:
<link rel="stylesheet" href="css/styles.css" type="text/css" />ضمنا این آدرسو جایگزین عبارت جلوی href= هم کردم ولی بازم پیداش نکرد .
2nE9
Registered User
- تاریخ عضویت
- 16 آپریل 2013
- نوشته‌ها
- 541
- لایک‌ها
- 93
آدرس درون href باید یه چیزی شبیه این باشه مثلا : http://aaaaa.yoursite.com/css/style.css ک درست کار کنه ولی قدیما سرویس persiangig واسه دانلود اینا ازش استفاده میکردیم فکر نکنم بشه روش فایل های html/css بریزی و به صورت سایت نشونشون بده بهتر فایل css اتون رو یه جا دیگه آپلود کنید و مثل عبارت بالا آدرس دهیش رو انجام بدید داخل کد قالبی که استفاده می کنید قطعا کار خواهد کرد
2nE9
Registered User
- تاریخ عضویت
- 16 آپریل 2013
- نوشته‌ها
- 541
- لایک‌ها
- 93
GOOGLE Drive
ممنون ولی نتونستم لینک به خارج پیدا کنم تو گوگل درایو .
حل شد مشکل . کل فایل css رو با فایل html کامباین کردم تو تگ : <style type="text/css"> و همه ی فایلا شد یه فایل . این یه فایل رو هم تو همون پرشین گیگ آپ کردم. وسلام
حل شد مشکل . کل فایل css رو با فایل html کامباین کردم تو تگ : <style type="text/css"> و همه ی فایلا شد یه فایل . این یه فایل رو هم تو همون پرشین گیگ آپ کردم. وسلام
