righe che cambiano colore al passaggio mouse

**ultimo292** · 04-12-2006, 12:09

Salve ragazzi, devo realizzare una tabella con le righe che cambiano colore al passaggio del mouse e con questa deve cambiare colore anche la scritta al suo interno.

Mi mandate qualche esempio gia funzionante....GRAZIE A TUTTI X OGNI INTERVENTO

**whisher** · 04-12-2006, 12:35

Ciao.

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">

tr.over { background-color:#FFCC99; color:#FF0033}

tr.out { background-color:#66FF66; color:#339900}

</style>

<script language="JavaScript" type="text/JavaScript">

function init()

{

        var nav=document.getElementById('target');

        if(nav && nav.getElementsByTagName('tr')[0])

        {

            var tr = nav.getElementsByTagName('tr');

            for(var i=0;i<tr.length;i++)

            {

                    addEvent(tr[i],'mouseout',trOut,false);

                    addEvent(tr[i],'mouseover',trOver,false);

            }

        }

};

function cssjs(a,o,c1,c2)

{

    switch (a)

    {

        case 'swap':

        o.className=!cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);

        break;

        case 'add':

        if(!cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}

        break;

        case 'remove':

        var rep=o.className.match(' '+c1)?' '+c1:c1;

        o.className=o.className.replace(rep,'');

        break;

        case 'check':

        return new RegExp('\b'+c1+'\b').test(o.className)

        break;

    }

};

function addEvent(elm, evType, fn, useCapture){

        if (elm.addEventListener)

        {

            elm.addEventListener(evType, fn, useCapture);

            return true;

        } else if (elm.attachEvent) {

            var r = elm.attachEvent('on' + evType, fn);

            return r;

        } else {

            elm['on' + evType] = fn;

        }

    }

function getTarget(e){

        var target = window.event ? window.event.srcElement : e ? e.target : null;

        if (!target){return false;}

        return target;

    }

function trOver(e)

{

    var trTarget = getTarget(e);

    cssjs('swap',trTarget.parentNode,'over','out');

}

function trOut(e)

{ 

    var trTarget = getTarget(e);

      cssjs('swap',trTarget.parentNode,'out','over');

}

addEvent(window,'load',init, false);

</script>



</head>

<body>

<table  id="target" width="100%"  border="0" cellspacing="0" cellpadding="0">

  <tr class="out">

    <td>PIPPO</td>

    <td>CAIO</td>

    <td>SEMP</td>

  </tr>

  <tr class="out">

    <td>PIPPO</td>

    <td>CAIO</td>

    <td>SEMP</td>

  </tr>

  <tr class="out">

    <td>PIPPO</td>

    <td>CAIO</td>

    <td>SEMP</td>

  </tr>

  <tr class="out">

    <td>PIPPO</td>

    <td>CAIO</td>

    <td>SEMP</td>

  </tr>

  <tr class="out">

   <td>PIPPO</td>

    <td>CAIO</td>

    <td>SEMP</td>

  </tr>

</table>



</body>

</html>

**stiffa** · 04-12-2006, 12:38

fatto cosi in velocità....

Codice PHP:




 

<html> 

 <head>

 <script language = "javascript" type="text/javascript">



function changeColor(){

    document.getElementById('miotr').style.color="red";

     document.getElementById('miotr').style.background="blue";

}

function changeBackColor(){

    document.getElementById('miotr').style.color="black";

     document.getElementById('miotr').style.background="white";

}

</script>

</head>

<body>

<table border="1" width="500" height="300">

<tr id="miotr"><td  onmouseover="changeColor();" onmouseout="changeBackColor();">



ciao a tutti

</td></tr></table>

</table>

</body>

</html>

**ultimo292** · 04-12-2006, 12:55

grazie di cuore a tutti e due...

Discussione: righe che cambiano colore al passaggio mouse

Strumenti discussione

Ricerca discussione

Visualizza

righe che cambiano colore al passaggio mouse

......

Permessi di invio