CSS Hilight Table Rows with Alert

[Total: 0    Average: 0/5]

Moving the mouse over the table rows makes them highlight.

Head Code:

<style type="text/css">
body {
  color: #000;
  background-color: #EEE;
}
.wrap{
  border: #000 solid 2px;
  background-color: #AAA;
  padding : 3px;
  border-spacing : 0;
  width: 400px;
  margin: 2em auto;
}
.c1,.c2 { height: 2em; width 400px;}
.c1 {background-color: #ACF; }
.c2 {background-color: #FCA; }
.col1 { display : inline; width: 100px; text-align:center;}
.col2 { display : inline; width: 100px; text-align:center;}
.col3 { display : inline; width: 200px; text-align:center;}
.explain { background-color: #DEF; text-align: center; margin-top: 7px;
border: #004 solid 2px ;padding: 3px; width: 420px; margin: 0 auto;}
#iam_1:hover, #iam_2:hover, #iam_3:hover, #iam_4:hover {
background-color:#FFA; }
#iam_1:active, #iam_2:active, #iam_3:active, #iam_4:active {
background-color:#FAF; }
</style>
<script>
function click(num)
{
  alert("You choose Item #"+num);
}
</script>

Body Code:

<div class=explain>Example of CSS to highlight and place content.<BR />Also
this will call a function that generates an alert when you click on a
row.</div>
<div class=wrap>
  <div id=iam_1 class=c1 onclick='click(1)'>

    <div class=col1>A-one</div>
    <div class=col2>A-two</div>
    <div class=col3>A-three</div>
  </div>
  <div id=iam_2 class=c2 onclick='click(2)'>
    <div class=col1>B-one</div>
    <div class=col2>B-two</div>

    <div class=col3>B-three</div>
  </div>
  <div id=iam_3 class=c1 onclick='click(3)'>
    <div class=col1>C-one</div>
    <div class=col2>C-two</div>
    <div class=col3>C-three</div>
  </div>

  <div id=iam_4 class=c2 onclick='click(4)'>
    <div class=col1>D-one</div>
    <div class=col2>D-two</div>
    <div class=col3>D-three</div>
  </div>
</div>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *