تغییر نام کلاس بدون اتلاف وقت

سلام من این کد را برای تغییر کلاس یک div نوشتم ولی تغییر با کمی تاخیر(1تا 2 ثانیه) انجام میشه اون هم فقط برای بار اول. اگر دوستان اطلاعی دارند لطفاً راهنمایی بفرمایند:

<div id="mainpage" class="mainpage" ><a class="mainpage" onmouseover="document.getElementById('mainpage').c  lassName='mainpage2'"onmouseout="document.getEleme  ntById('mainpage').className='mainpage'" href="http://www.xxx.com" >صفحه اصلی</a></div>

این هم css مربوطه:

div.mainpage{

background:transparent url(pictures/li_common_bg.gif) no-repeat ;

 width:164px;

 height:56px;

 margin-bottom: 8px;

 

 }

div.mainpage2 {

width:164px;

 height:56px;

 margin-bottom: 8px;

background:transparent url(pictures/li_home_bg.gif) no-repeat ;

}

 

سلام.

شما از این توابع استفاده کنید، و اول کلاس رو حذف و دوباره کلاس جدید رو به المنت مربوطه اختصاص بدید:
http://snipplr.com/view/3561/addclas...lass-hasclass/

function hasClass(ele,cls) {

	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));

}

 

function addClass(ele,cls) {

	if (!this.hasClass(ele,cls)) ele.className += " "+cls;

}

 

function removeClass(ele,cls) {

	if (hasClass(ele,cls)) {

    	var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');

		ele.className=ele.className.replace(reg,' ');

	}

}

 

//call the functions

addClass(document.getElementById("test"), "test");

removeClass(document.getElementById("test"), "test")

if(hasClass(document.getElementById("test"), "test")){//do something};

دوست عزیز من کد شما رو چک کردم هیچ مشکلی نداشت وقتی روی لینک رفتم بلافاصله کلاس استایل div عوض شد.
البته من دسترسی به عکس زمینه این مثال نداشتم اما دقیق تر بگید مشکل چیه تا راهنماییتون کنم.
ضمنا وقتی در یک کلاسی که جایگزین کلاس دیگری میشه فقط یک background عوض میشه نوشتن کلاسی به اون طولانی لازم نیست کلاس دومتون رو اینجوری تصحیح کنید:
div.mainpage2
{
background:transparent url(pictures/li_home_bg.gif) no-repeat ;
}

ممکن که این اتلاف وقت بخاطر حجم css یا حجم تصویر background باشد؟در تست روی لوکال این اشکال خودشو نشون نداد ولی وقتی رفت روی سرور این مشکل بروز پیدا کرد.بنابراین دوستانی که تمایل به تست دارند لطفاً روی سرور این کار را انجام دهند.

سلام .
من نمونه کد ذیل را پیشنهاد می کنم :

کد HTML:

---


.button {
    DISPLAY: block; FONT-WEIGHT: 700; FONT-SIZE:12px; VERTICAL-ALIGN: middle; WIDTH: 135px; COLOR: #000000; FONT-FAMILY: Tahoma,Arial; HEIGHT: 30px; TEXT-ALIGN: center; TEXT-DECORATION: none;
}
.button A {
    PADDING-RIGHT: 6px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: 700; FONT-SIZE: 12px; BACKGROUND: url(ButtonALL3.jpg) #72bed5 no-repeat 50% top; VERTICAL-ALIGN: middle; COLOR: #006699! important; PADDING-TOP: 0px; FONT-FAMILY: Tahoma,Arial; HEIGHT: 30px; TEXT-ALIGN: center; TEXT-DECORATION: none;
}
.button A:active {
    PADDING-RIGHT: 6px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: 700; FONT-SIZE: 12px; BACKGROUND: url(ButtonALL3.jpg) #72bed5 no-repeat 50% top; VERTICAL-ALIGN: middle; COLOR: #006699! important; PADDING-TOP: 0px; FONT-FAMILY: Tahoma,Arial; HEIGHT: 30px; TEXT-ALIGN: center; TEXT-DECORATION: none;
}
.button A:visited {
    PADDING-RIGHT: 6px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: 700; FONT-SIZE: 12px; BACKGROUND: url(ButtonALL3.jpg) #72bed5 no-repeat 50% top; VERTICAL-ALIGN: middle; COLOR: #006699! important; PADDING-TOP: 0px; FONT-FAMILY: Tahoma,Arial; HEIGHT: 30px; TEXT-ALIGN: center; TEXT-DECORATION: none;
}

.button A:hover {
    FONT-WEIGHT: 400; FONT-SIZE: 10px; BACKGROUND: url(ButtonALL3.jpg) #3399cc no-repeat 50% bottom; VERTICAL-ALIGN: middle; COLOR: #990000! important; PADDING-TOP: 0px; FONT-FAMILY: Tahoma,Arial; HEIGHT: 30px; TEXT-DECORATION: none;
}

---

این طوری تصویر شما یکبار لود شده و می توانید از آن استفاده نمائید .
البته این یک مثال برای Roll Over است که برای شما نیز کاربرد دارد .

موفق باشید .

نقل قول:

---

نوشته شده توسط ameysams

ممکن که این اتلاف وقت بخاطر حجم css یا حجم تصویر background باشد؟در تست روی لوکال این اشکال خودشو نشون نداد ولی وقتی رفت روی سرور این مشکل بروز پیدا کرد.بنابراین دوستانی که تمایل به تست دارند لطفاً روی سرور این کار را انجام دهند.

---

خب از اول می گفتید دوست عزیز!!

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

نقل قول:

---

نوشته شده توسط Amin eHelp

خب از اول می گفتید دوست عزیز!!

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

---

برنامه در مرحله پایانی است حالا اگر بخواهم از CSS Sprite استفاده کنم باید وقت زیادی برای اون صرف کنیم روش دیگری به ذهن شما نمی رسد؟مثلاً اگر همون اول تمام تصاویر background را لود کنیم این مشکل حل میشه.حالا چجوری همون اول تصاویر را لود کنیم؟؟
با تشکر

البته فکر نمی کنم وقت شما رو زیاد بگیره.
ولی شما می تونید با استفاده از JavaScript تصاویر مورد نطر رو pre-load کنید، با جستجو کردن در گوگل به این جوابتون می رسید.

نظر دوستان در مورد این روش چیه؟آیا عیب و نقص مهمی داره؟

div.mainpage{

background:transparent url(pictures/li_home_bg.gif) no-repeat ;

background:transparent url(pictures/li_common_bg.gif) no-repeat ;

 width:164px;

 height:56px;

 margin-bottom: 8px;

 

 }

div.mainpage2 {

background:transparent url(pictures/li_home_bg.gif) no-repeat ;

}