ترفندهاي طراحي وب

You are here: خانه

ترفندها

Javascript Hacks

fix ie hover

حتما شما هم توجه شديد كه همه مرورگرهاي دنيا براي تغيير رنگ يك كنترل هنگام قرار گرفتن موس روي اون از خاصيت hover كه در مشخصات CSS قرار ميگيره پشتيباني ميكنند به غير از ...

خوب ديگه هميشه اوني كه گند ميزنه به همه چيز چيه : IE
خوب مفهوم نوشته هاي بالا چيه ؟
اين بدين معناست كه شما وقتي بخواهيد با رد شدن موس از روي يك سطر از جدول رنگ اون تغيير كنه و بعدش دوباره به رنگ قبليش برگرده در همه ي مرورگرها ميتونيد فقط از اين استفاده كنيد :

<!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=utf-8" />
<title>Untitled Document</title>
 
 
<style type="text/css">
<!--
 
.nav:hover,
.hover {
    background-color: #BBC5EC;
}
 
table tr.nav:hover th,
table tr.hover th {
    background-color: #999999;
}
-->
</style>
</head>
 
<body>
<table border="1">
 <tr class="nav">
   <td onclick="">1111</td>
    <td>111</td>
    <td>111</td>
    <td>111</td>
  </tr>
  <tr class="nav">
   <td>222</td>
    <td>222</td>
    <td>222</td>
    <td>222</td>
  </tr>
  <tr class="nav">
   <td>333</td>
    <td>333</td>
    <td>333</td>
    <td>333</td>
  </tr>
</table>
</body>
</html>

اما ميشه اين كد رو براي هماهنگ بودن با همه ي مرورگرها دستكاري نكرد و عوضش يه تيكه كد جاوا اسكريپت براي ايجاد هماهنگي نوشت

كد قبلي رو بدون تغيير قسمت HTML و حتي CSS تكرار ميكنيم و فقط با كمك جاوااسكريپت مشكل در IE رو حل ميكنيم :

<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function ieHover() 
{
    var rows = document.getElementsByTagName('tr');
    for ( var i = 0; i < rows.length; i++ ) 
  {
        if ( navigator.appName == 'Microsoft Internet Explorer' ) 
    {
            rows[i].onmouseover = function() 
      {
                this.className += ' hover';
            }
            rows[i].onmouseout = function() 
      {
                this.className = this.className.replace( ' hover', '' );
            }
        }
    }
}
window.onload=ieHover;
</script>
 
<style type="text/css">
<!--
 
.nav:hover,
.hover {
    background-color: #BBC5EC;
}
 
table tr.nav:hover th,
table tr.hover th {
    background-color: #999999;
}
-->
</style>
</head>
 
<body>
<table border="1">
 <tr class="nav">
   <td onclick="">1111</td>
    <td>111</td>
    <td>111</td>
    <td>111</td>
  </tr>
  <tr class="nav">
   <td>222</td>
    <td>222</td>
    <td>222</td>
    <td>222</td>
  </tr>
  <tr class="nav">
   <td>333</td>
    <td>333</td>
    <td>333</td>
    <td>333</td>
  </tr>
</table>
</body>
</html>