سلام دوستان
چه طور می تونم با html یه کلید بسازم؟ به کمک سه تا عکس
اولی عادی
دومی وقتی با موس روش میری
سومی وقتی روش کلیک می کنی...
یا اگه راه دیگه ای هم هست بگید...
Printable View
سلام دوستان
چه طور می تونم با html یه کلید بسازم؟ به کمک سه تا عکس
اولی عادی
دومی وقتی با موس روش میری
سومی وقتی روش کلیک می کنی...
یا اگه راه دیگه ای هم هست بگید...
[HTML]<img src="URL.jpg" onmouseenter="<!--code-->" />نقل قول:
<img src="URL.jpg" onclick="<!--code-->" />[/HTML]
ولی چی کار میخای بکنی؟به جای <!--code--> با جاوا هر چی بنویسی کار میکنه.
اما بعضی مرورگرا جاوا روشون فعال نیست مثل اپرا...
می خوام کلید بسازم با سه تا عکس... واسه صفحه ی استاتیک ورود به سایت.... که بعدش وارد یه ساب دومین میشه که جوملا روش نصبه....
یه بار خواستم با فلش بسازم که بازم چون رو بعضی سیستم ها فلش پلیر نصب نیست منصرف شدم...
می شه در مورد کدی که نوشتی یه کم بیشتر توضیع بدی؟
یه مثال میشه بنویسید؟
وقتی این کارا رو کردی چی بشه؟نقل قول:
یه سایت باز کنه؟یه لینک نشون بده؟اگه مثال میخای بگو دقیقا" چی کار میخای بکنی؟
آره می خوام لینک بشه به یه صفحه ی دیگه مثلا بهکد:http://www.google.com
نه ببین فرض کن سه تا عکس داریم چیزی که تو میخای اینه که عکس اول به حالت عادی بره گوگل.(یعنی همون کلیک)
وقتی با موس رفتیم رو عکس دوم بره گوگل.
و عکس سوم هم وقتی روش کلیک کردیم بره گوگل(مشابه اولی ولی با کد متفاوت)درسته؟
اولن که جاوا نه و جاوا اسکرپت تو هنوز اسمشو یاد نگرفتی؟نقل قول:
ثانیاً دوستمون یه دونه hover button میخواد شما چی داری توضیح میدی؟! شما که میگفتی جاوا اسکرپت بلدی هاور باتون به این معروفی رو چطور تشخیص ندادی؟
چند روش وجود داره برای این نوع دکمه ها. اونی که به چیزی که شما گفتین نزدیکتره استفاده از جاوا اسکرپت هست:نقل قول:
[html]
<a href="#">
<img width="250" src="1.png"
onmouseover="this.src='2.png'"
onmousedown="this.src='3.png'"
onmouseout="this.src='1.png'">
</a>
[/html]
ولی این روش یک اشکال داره اونم اینه که موقعی که ماوس روی تصویر میره یا کلیک میشه، باید تصویر جدید لود بشه. این یعنی که کاربر اگر اینترنتش کند باشه باید یه کم صبر کنه تا تصویر جدید رو ببینه
راه حلش هم پری لود کردن تصاویر هست ولی در کل این روش هر چقدر که ساده هست قدیمی هم هست :دی
راه حل بهترش اینه که شما یک تصویر gif به صورت ترنسپرنت با ابعداد 1 در 1 پیکسل بزارید توی لینک و بهش طول و عرض تصویر اصلی رو بدید. بعد همه تصاویر دکمه رو توی یک تصویر ادغام کنید و به عنوان زمینه اسپیسر (همون gif) استفاده کنید:
فرض من بر این هست که سه تا دکمه رو به این صورت توی تصویر image.png ادغام کردید که تصویر اصلی بالا هست، تصویری که موقع قرار گرفتن ماوس نمایش داده میشه وسط و اون یکی تصویر هم پایین قرار داده
[html]
<a href="#">
<img src="spacer.gif" height="100" width="100" style="background: url(image.png) top center no-repeat;"
onmouseover="this.style.backgroundPosition='center center'"
onmousedown="this.style.backgroundPosition='bottom center'"
onmouseout="this.style.backgroundPosition='top center'">
</a>
[/html]
اگر هم اون تصویر موقع کلیک رو حذف کنید به سادگی میشه با سلکتور hover: در css و بدون جاوا اسکرپت دکمه رو طراحی کرد