تغییر رنگ تیبلها با رفتن موس بر روی آنها

shetaban

Member
من می خواهم وقتی موس روی هر کدام از تیبلها میره بکگراند اون تیبل تغییر رنگ بدهد
چند راه دارد؟
با css هم می شود؟
بهترین راه کدامه؟
لطفا کد و آموزش کامل بدهید
 

MJ Rayaneh

Well-Known Member
این کد css :
td.off {
background: ccccff;
}
td.on {
background: ccffcc;
}

این هم کد table :

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#C0C0C0" width="100%" id="AutoNumber5" height="892">
<tr>
<td width="100%" height="23" align="center" table. class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'">محتویات سطر</td>
</tr>
</table>
 
آخرین ویرایش:

echessdesign

مدیر انجمن طراحی وب
شما برای این کار می تونی Class تعریف کنی و Class ها رو به Table نسبت بدی:
HTML:
 <html> <head> <style> .echess {color:red;} .design {color:green} </style> </head> <body> <table border="0" width="100%">
	<tr>
		<td class="echess" onmouseover=this.className='echess' onmouseout=this.className='design'>&nbsp;</td>
	</tr>
</table> </body>
 

shetaban

Member
دستتون درد نکنه
فقط باید یک رنگ ملایم تر انتخاب کنم

یک سوال دیگه در مورد css

آندرلاین (زیر خط دار کردن)لینکها و تغییر رنگ آنها وقتی که موس روی متن می رود به چه صورت است؟
 

echessdesign

مدیر انجمن طراحی وب
پیش فرض ، به این صورت عمل کن
HTML:
 <style type="text/css"> a:hover {text-decoration: underline} </style>
با تشکر از توضیحات کامل دوست عزیزمون mjrayaneh
 

shetaban

Member
در مورد تغییر رنگ تیبلها:
من نیاز دارم که هر تیبل رنگ متفاوتی داشته باشد و با رفتن موس بر روی هر تیبل به یک رنگ(متفاوت از تیبل دیگر) در بیاید
برای این کار باید چه تغییری در کد بالا دهم؟
 

MJ Rayaneh

Well-Known Member
برای این کار در قسمت css باید با کپی کردن همون کد بالایی یک کلاس جدید درست کنی. ولی براش به جای td.off و td.off یک نام دیگر انتخاب کنی و به همون ترتیب کلاس تیبل مورد نظرت رو هم تغییر بده.
گرفتی؟!
 

a.gh.n

Member
ببين خودتو نكش!
آموزشش تو مقالات مجيد آنلاين قسمت طراحي وب هست!
 

mehrangol

Member
با سلام
اگه بخواهیم که یک checkbox در هر قسمت تیبل باشه و با گذاشتن تیک checkbox رنگ اون قسمت از تیبل عوض بشه باشد چه کار کرد.البته تمام کاری هایی که گفتید هم انجام بده.

با تشکر مهران
 

tabib_m

Member
اونموقع دیگه باید توی onClick مربوط به چک باکس ، همون کاری رو که قبلا میکردی ، انجام بدی.
البته فقط باید قبلش چک کنی که چک باکس چک خورده یا برعکس، و بر اساس اون تغییر رو انجام بدی:
کد:
<script>
function clicked(idd){
    if(document.getElementById('checkbox'+idd).checked){
        document.getElementById('tr'+idd).class='on';
    }else{
        document.getElementById('td'+idd).class='off';
    }
}
</script>

<table>
    <tr>
        <td>
            <input type='checkbox' id='checkbox1' onClick='clicked(1);'>
        </td>
        <td id='td1'>
            Value1
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='checkbox2' onClick='clicked(2);'>
        </td>
        <td id='td2'>
            Value2
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='checkbox3' onClick='clicked(3);'>
        </td>
        <td id='td3'>
            Value3
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='checkbox4' onClick='clicked(4);'>
        </td>
        <td id='td4'>
            Value4
        </td>
    </tr>
</table>
 

mehrangol

Member
با سلام
از این که به من کمک کردید ممنونم.
کدی که دادید کار نمی کنه.

با تشکر مهران
 

mehrangol

Member
با سلام
من با کمک کد آقای tabib_m و نمونه کد یک سایت دیگه،این کدو نوشتم.

HTML:
<html>
<head>
<title>امتحانی</title>
<style type="text/css"> 

tr.Default { 
background: #FFFFFF; 
} 

</style>

<script language="javascript">
function table(idd,ischecked,ison){
    if(ischecked){
       	 document.getElementById('tr'+idd).style.backgroundColor="#C3D9FF";	
    }else{
    	if(ison){
       		document.getElementById('tr'+idd).style.backgroundColor="InfoBackground";
  	}else{
        		document.getElementById('tr'+idd).style.backgroundColor="#FFFFFF";
    	}
     }
}
function CheckedMark(id){
    if(document.getElementById('checkbox'+id).checked){
     	document.getElementById('checkbox'+id).checked=false;
     }
     else{
     	document.getElementById('checkbox'+id).checked=true;
     }
	
     table(id,document.getElementById('checkbox'+id).checked,true);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body bgcolor="#ECE9D8">


<table width="275" border="0" cellpadding="0" cellspacing="0">
    <tr id="tr1" class="Default" onmouseover="table(1,document.getElementById('checkbox1').checked,true)" onmouseout="table(1,document.getElementById('checkbox1').checked,false)">
        <td width="20">
            <input type='checkbox' id='checkbox1' onClick='table(1,this.checked,true)'>
        </td>
        <td width="85" onClick="CheckedMark('1')">
            Value1-1
        </td>
    <td width="94" onClick="CheckedMark('1')">Value1-2</td>
        <td width="76" onClick="CheckedMark('1')">Value1-3</td>
    </tr>
    <tr id="tr2" class="Default" onmouseover="table(2,document.getElementById('checkbox2').checked,true)" onmouseout="table(2,document.getElementById('checkbox2').checked,false)"> 
        <td>
            <input type='checkbox' id='checkbox2' onClick='table(2,this.checked,true)'>
        </td>
        <td onClick="CheckedMark('2')">
            Value2-1
</td>
    <td onClick="CheckedMark('2')">Value2-2</td>
        <td onClick="CheckedMark('2')">Value2-3</td>
    </tr>
    <tr id="tr3" class="Default" onmouseover="table(3,document.getElementById('checkbox3').checked,true)" onmouseout="table(3,document.getElementById('checkbox3').checked,false)">
        <td>
            <input type='checkbox' id='checkbox3' onClick='table(3,this.checked,true)'>
        </td>
        <td onClick="CheckedMark('3')">
            Value3-1
</td>
    <td onClick="CheckedMark('3')">Value3-2</td>
        <td onClick="CheckedMark('3')">Value3-3</td>
    </tr>
    <tr bgcolor="#E5E5E5" class="Default" id="tr4" onmouseover="table(4,document.getElementById('checkbox4').checked,true)" onmouseout="table(4,document.getElementById('checkbox4').checked,false)">
        <td>
     <input type='checkbox' id='checkbox4' onClick='table(4,this.checked,"true")'>  
	    </td>
        <td onClick="CheckedMark('4')">
            Value4-1
</td>
 <td onClick="CheckedMark('4')">Value4-2</td>
        <td onClick="CheckedMark('4')">Value4-3</td>
 </tr>
</table>
</body>
</html>

گفتم بزارمش شاید بدرد دیگران هم بخوره.فقط می خواستم بدونم این کد مشکلی داره یا نه؟


با تشکر مهران
 

NabiKAZ

Well-Known Member
در راستای این مسئله که همیشه بهتر است بجای جاوااسکریپت از خود css استفاده کنیم. من هم پیشنهاد میکنم از متد hover در 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-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
td:hover {
	background-color: #00c;
}
</style>
</head>

<body>
<table width="200" border="1">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
اینکار مطابق استاندارد های w3c است اما هنوز همه مرورگرها از جمله IE6 از اون پشتیبانی نمیکنند، اما با FF مشکلی نداره. (در مورد hover ، مرورگر IE6 تنها برای المان <a> تعریف شده است)

نبی
 
البته میشه با کمک جاوا اسکریپت همین ویژگی رو روی IE شبیه سازی کرد در حالی که در برگه سبک از همون دستورات استاندارد استفاده کرد

منظورم اینکه مرورگر هایی مثل FF و opera از همون کد استاندارد استفاده میکنن و در IE به طور اتوماتیک یه کد javascript فعال میشه و این جلوه رو شبیه سازی میکنه.
درست همون کاری که من برای صفحه اول فورم خودم انجام دادم

http://forum.persia-cms.com

اگر کد صفحه رو کنترل کنید هیچ کد جاوا اسکریپتی تو صفحه برای تعویض رنگ پس زمینه استفاده نشده
 

NabiKAZ

Well-Known Member
سلام
کاملا درسته .
من هم از این کد جاوا در سایتم استفاده کردم :

http://www.xs4all.nl/~peterned/csshover.html

کافیه لینکی که میده رو ابتدای سایتتون بزارید تا hover برای تمامی المان ها مفهوم پیدا کنه .
واقعا کد قوی و جالبیه.

نبی
 

جدیدترین ارسال ها

بالا