ابتدا یه تصویر باشه و هنگامی که موس روی اون تصویر قرار گرفت یه تصویر دیگه بیاد

AYANDEHSAZ · Jan 14, 2012

سلام دوستان

با عرض معذرت من یه کد خیلی ساده html می خوام . ولی من که html بلد نیستم . :cry:

کد رو هم با سرچ کردن پیدا نکردم . :sad:

من یه کد html ( یا php ) نیاز دارم که در ابتدا یه تصویر باشه و هنگامی که موس روی اون تصویر قرار گرفت یه تصویر دیگه ( تصویر دومی ) رو نشون بده و هنگامی موس دوباره از روی تصویر برداشته شد دوباره تصویر اول رو نشون بده . تقریبا مثله کاری که button ها انجام میدن . فکر نکنم کد پیچیده ای باشه .

لطفا هر کی می تونه کمک کنه دریغ نکنه .

خیلی ممنون :rose:

oldooz · Jan 14, 2012

http://www.w3schools.com/jsref/event_onmouseover.asp
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover

AYANDEHSAZ · Jan 14, 2012

سلام

کد واقعا خوبی بود ولی وقتی که از این کد دو بار در قالب استفاده می کنم دیگه برای هیچ کدوم کار نمی کنه.

برای رفع این مشکل چی کار کنم ؟

مثلا کد ما اینه :

HTML:

<html>
<body>

<img src="image_w3default.gif" name="mousetest" onMouseOver="document.images['mousetest'].src='image_w3default2.gif'"
onMouseOut="document.images['mousetest'].src='image_w3default.gif'" width="234" height="91" />

</body>
</html>

حالا اگه دو بار این کد رو تکرار کنیم دیگه کار نمی کنه مثله زیر :

HTML:

<html>
<body>

<img src="image_w3default.gif" name="mousetest" onMouseOver="document.images['mousetest'].src='image_w3default2.gif'"
onMouseOut="document.images['mousetest'].src='image_w3default.gif'" width="234" height="91" />

</body>
</html>


<html>
<body>

<img src="image_w3default.gif" name="mousetest" onMouseOver="document.images['mousetest'].src='image_w3default2.gif'"
onMouseOut="document.images['mousetest'].src='image_w3default.gif'" width="234" height="91" />

</body>
</html>

vahidd.com · Jan 15, 2012

مدل html/css این کد:

کد:

<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style>
.vahidd{

    background-image:url('آدرس تصویر اول');
}
div.vahidd:hover{

    background-image:url('آدرس تصویر دوم');

}

</style>
</head>

<body>
<div class="vahidd">&nbsp;&nbsp;</div>

</body>

</html>

AYANDEHSAZ · Jan 15, 2012

سلام

ممنون از اینکه کد رو قرار دادید. ولی :

کد مشکل داره . چون هم نصفه نشون میده و به جای یک تصویر ، تعداد بی نهابت از اون تصویر رو در یک خط نشون میده .

لطفا تصحیح کنید خیلی بهش نیاز دارم

eAmin · Jan 15, 2012

دوست عزیز جستجو کنید، در اینمورد بارها بحث شده.
برای آموزش html هم میتونید از سایتی که دوستمون معرفی کرد استفاده کنید، چون در انجمن های تخصصی وقتی سوال میپرسید باید یک پیش زمینه ای درمورد اون داشته باشید.

موفق باشید.

talesh · Jan 22, 2012

سلام خسته نباشید دوست عزیز AYANDEHSAZ این کد html وcss ببخشید که دیر شد

css

#logo {
position: absolute;
display: block;
top: 30px;
right: 5px;
height: 120px;
width: 250px;
margin-top:12px;
}
#logo a {
display: block;
height: 120px;
width: 250px;
background: url(images/logo.gif) 0 0 no-repeat ;
clear: left;

}
#logo a:hover{
background:url(images/logo1.gif)no-repeat ;

}

html

<div id="logo"> </div>