مشکل با hover روی یک hyperlink

[elmira_63]

با سلام
من توی یکی از صفحات سایتم از hyper link استفاده کردم و با css بهش خاصیت background و دادم و وقتی که موس روش قرار می گیره این background عوض میشه با استفاده از hover توی css .
حالا مشکلی که دارم اینه که چون حجم این عکسی که وقتی موس روی اون hyperlink قرار میگیره به عنوان background ست میشه حدودا یک کیلو بایته وقتی برای اولین بار موس روش قرار میگیره تقریبا یکی دو ثانیه طول میکشه تا عکس دوم ست بشه ولی برای دفعات بعد مشکل حل میشه چون یه بار لود شده این عکس .
حالا من سایت رو up میکنم که خودتون بهتر متوجه بشین http://www.iran-job.com

[Nightbat]

http://www.pageresource.com/jscript/jpreload.htm

[z_bluestar]

من با javaScript این کـار رو انجام دادم این مشکل رو هم نداشت .

[ali_zzr]

این مشکل راه حل جاوا اسکریپت داره ولی قدیمی شده.
شما باید از CSS Sprites استفاده کنید.به این صورت که فایلهای بکگراند رو در یک فایل بگذارید .( 2 تا عکس روی هم) و از خصوصیت background-position در حال hover استفاده کنید.یعنی در واقع شما یک فایل دارید که در حالت عادی از یک قسمتش و در حالت hover از یک قسمت دیگه اش استفاده میکنید.


.myclass
{
background-image: url(image_url);
}
.myclass:hover
{
background-image: url(image_url);background-position : 0 30px;
}

اگر متوجه نشدید بگید بیشتر توضیح بدم

[elmira_63]

این مشکل راه حل جاوا اسکریپت داره ولی قدیمی شده.
شما باید از CSS Sprites استفاده کنید.به این صورت که فایلهای بکگراند رو در یک فایل بگذارید .( 2 تا عکس روی هم) و از خصوصیت background-position در حال hover استفاده کنید.یعنی در واقع شما یک فایل دارید که در حالت عادی از یک قسمتش و در حالت hover از یک قسمت دیگه اش استفاده میکنید.


.myclass
{
background-image: url(image_url);
}
.myclass:hover
{
background-image: url(image_url);background-position : 0 30px;
}

اگر متوجه نشدید بگید بیشتر توضیح بدم
ممنون ولی اگه اشتباه نکنم منظورتون اینه که همون عکس رو با رفتن موس جابجا کنم ولی من می خوام عکس عوض بشه

[Nightbat]

لینکی که بهت دادم راه حل رو توضیح می ده، به این صورت که عکس هم با صفحه لود می شه، و وقتی hovor بشه لود شده و بدون وقفه نمایش داده میشه.

[ali_zzr]

ممنون ولی اگه اشتباه نکنم منظورتون اینه که همون عکس رو با رفتن موس جابجا کنم ولی من می خوام عکس عوض بشه

دقیقا همون عکس نیست.یک فایل عکس هست که هردو عکس روی هم قرار دارند.و وقتی جابجا میشوند در واقع بکگراند المان مورد نظر جابجا میشود

[salehbagheri]

مشكل اصليتون اينه كه تصاوير در ابعاد كوچك رو نبايد به صورت jpg استفاده كنيد. چون به نسبت gif يا png حجم بالاتري رو در بر ميگيره.

تصوير شما با پسوند gif چيزي به حدود 1/4 يا بيشتر حجم تصوير توليدي رو كاهش ميده...

اندازه تصوير دكمه شما با پسوند jpg در حدود 1500 بايت هست اما با پسوند gif در حدود 300 بايت ميشه...

[kamranafshar33]

به این آدرس برین شاید مشکلتون حل شد دوست من.

http://cssonly.blogsky.com/pages/link/

[elmira_63]

ممنون مشکلم با این کد javascript حل شد



if (document.images) {
pic1on = new Image;
pic1on.src = "Image/Button/Dakheli.gif";
pic1off = new Image;
pic1off.src = "Image/Button/Dakheli1.gif";
}
if (document.images) {
pic2on = new Image;
pic2on.src = "Image/Button/Khareji.gif";
pic2off = new Image;
pic2off.src = "Image/Button/Khareji1.gif";
}
if (document.images) {
pic3on = new Image;
pic3on.src = "Image/Button/Zaban.gif";
pic3off = new Image;
pic3off.src = "Image/Button/Zaban1.gif";
}
if (document.images) {
pic4on = new Image;
pic4on.src = "Image/Button/fani.gif";
pic4off = new Image;
pic4off.src = "Image/Button/Fani1.gif";
}
function lightup(imgName) {
if (document.images) {
imgOn = eval(imgName + "on.src");
document[imgName].src = imgOn;
}
}
function turnoff(imgName) {
if (document.images) {
imgOff = eval(imgName + "off.src");
document[imgName].src = imgOff;
}
}


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



<ahref="Home.aspx"onmouseover="lightup('pic1')"onmouseout="turnoff('pic1')">
<imgsrc="Image/Button/Dakheli1.gif"name="pic1"width="110"height="35"border="0"></a>



اینم سایت http://www.iran-job.com

[احمد سامعی]

سلام دوستان
چطور می شه از همون روش جاوا برای لود عکس های hover استفاده کرد ؟ یعنی با چه دستوری عکس های دوم رو هم همزمان لود صفحه لود کنیم و منتظر نمونیم کاربر روی لینک نگه داره بعد عکس لود بشه

چون عکس های من حجمش زیاد هست و نمی تونم کم کنم نمی خوام از روش css استفاده کنم
با تشکر

در ضمن المیرا عزیز لازم نیست این همه کد طولانی بنویسی کافی از کد زیر استفاده کنید:


function SetMemu(e)
{
document.getElementById(e).style.backgroundImage= "url('../../images/" + e + ".png')";
}

<a href="Home.aspx" onmouseover="SetMenu('pic1')" onmouseout="SetMenu('pic2')">

pic1.png و pic2.png هم نام عکساتون می شه

[salehbagheri]

چون عکس های من حجمش زیاد هست و نمی تونم کم کنم نمی خوام از روش css استفاده کنم

از CSS Sprites چيزي ميدونيد؟

به اينجا مراجعه كنيد (تصوير ششم)
http://barnamenevis.org/forum/showpost.php?p=1004294&postcount=41

هيچ نيازي به JavaScript نيست. چون خود كدهاي جاوا اسكريپت باعث سنگين شدن صفحه ميشه.