تغییر عکس هنگام mouseover

o_real_love · Apr 18, 2010

سلام
من میخوام یه عکس بذارم
وقتی با موس رفتم روش عکس عوض بشه
مثل لینک های اصلی که بیشتر سایت ها دارن
یکی هم اینکه روی یک div وقتی رفتم عکسی که کار گذاشتم نشون داده بشه
( دیو عکس نداره -وقتی با موس رفتم روش میخوام یهعکس بعنوان پسزمینه نمایش داده بشوددددددد )

o_real_love · Apr 18, 2010

یعنی هیچ کسی نیست جواب بده؟؟؟
یک اعتراض دارم:
این بخش css اصلا فعالیت خوبی نداره؟؟؟

o_real_love · Apr 19, 2010

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

کد:

[LEFT]<!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>
<style type="text/css">
#pic {
width : 100px;
height : 20px;
background-image : url(foo.png);
}

#pic:hover {
background-image : url(bar.png);
} 
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image hover</title>
</head>

<body>
<div id="pic">
</div>
</body>

</html>
[/LEFT]

eAmin · Apr 19, 2010

خب چرا جستجو نمی کنید؟
فکر نمی کنید قبل از شما بارها و بارها این سوال پرسیده شده، و کسی ( از جمله خود بنده ) میل به دادن پاسخ دوباره رو نداره؟
در ضمن برای IE هم می تونید از این تاپیک کمک بگیرید.

موفق باشید.

pouya saadeghi · Apr 19, 2010

راه بهتری که مشکلie هم نداره اینه که بکگراند رو برای a بذاریم نه برای div (معمولا تغییر بکگراند رو برای لینک ها استفاده میکنیم دیگه!)

-----------
مثال

HTML:

HTML:

<a id="mylink" href="http://twitter.com" target="_blank"></a>

(حالا لینک چه متن داشته باشه چه نداشته باشه ، فرق نمیکنه)

اگه بخوایم از 2 عکس استفاده کنیم ،بعضی مرورگر ها، عکس دوم رو لود نمیکنن!
برای حل این مشکلمیتونیم هر دو عکس رو در یک تصویر ذخیره کنیم.
مثل این:

خوب ، حالا با کد زیر ، (یا مشابه اون) مکان بکگراند رو عوض می کنیم(2 عدد آخر به ترتیب، مقادیر left و top هستند)

CSS:

HTML:

#mylink{ float:left;width:126px; height:99px; 
background:url(my_image.gif) 0 -99px;}


#mylink:hover{width:126px; height:99px; 
background:url(my_image.gif) 0 0;}

همین!