Søg
Avatar billede ripley Nybegynder
10. oktober 2006 - 10:08 Der er 8 kommentarer og
1 løsning

Links skal være hvide ved mouse-over

Jeg har det problem, at jeg har en mouse-over effekt på TR'er i tabeller, som min kode viser i det nedenstående.
Når der er et <A>-tag i TD'erne har vi balladen .. for så kan jeg ikke få den hvide skrift på.

Er der nogen, der kan hjælpe???

Det skal være sådan at skriften bliver hvid når man holder musen over TR'en, og ikke bare på TD'en som <A> er i, hvis I forstår.

-----------------------------------------------------------------

<HTML>
<Head>
<Script language="javascript">
    aMouseOver=["#006699", "#FFFFFF"];
    aMouseSelected=[ "#F1861E", "#FFFFFF" ];
   
var gSafeOnload = new Array();
function SafeAddOnload(f)
{
    window.onload = SafeOnload;
    gSafeOnload[gSafeOnload.length] = f;
}
function SafeOnload()
{
    for (var i=0;i<gSafeOnload.length;i++){
        gSafeOnload[i]();
       
    }
}

    var oActiveTable = {
    gemtColor : new Array(),
    // hardwired styles for max perfomance
    aHover        : [ "#006699", "#FFFFFF" ],
   
    mInit : function () {
        if (typeof aMouseOver=="object"){oActiveTable.aHover=aMouseOver;}
        // collect active tables
        var aTables = document.getElementsByTagName ( "table" );
        var oTable, i = 0;
        while ( oTable = aTables.item ( i++ )) {
            if ( oTable.className.indexOf("mouseoverActive")>-1 ) {
                oTable.onmouseover    = oActiveTable.mCheck;
                oTable.onmouseout      = oActiveTable.mCheck;
                oTable.onmousedown    = oActiveTable.mCheck;

            }
        }
    },
    mCheck : function ( e ) { // check mouse action
        var e = e ? e : window.event;
        var oNode = e.target ? e.target : e.srcElement;
        while ( oNode.nodeName.toLowerCase () != "tr" &&  oNode.nodeName.toLowerCase () != "table" ) oNode = oNode.parentNode;
       
        if ( oNode.nodeName.toLowerCase () == "table" ) return;
        else var oRow = oNode;
       
        oActiveTable.mUpdate ( oRow, e.type == "mouseover" ? "over" : "out" );
       
    },
    mUpdate : function ( oRow, sAction ) { // update display
        var update = function ( oCell, aColors ) {
            oCell.style.backgroundColor = aColors [ 0 ];
            oCell.style.color = aColors [ 1 ];
        }
        var gem = function ( oCell, aGemaColors,nr ) {
            if (aGemaColors[nr]==null){
                aGemaColors[nr]=new Array(2);
            }
            aGemaColors[nr][ 0 ] = oCell.style.backgroundColor;
            aGemaColors[nr][ 1 ] = oCell.style.color;
        }
        var i = 0, oCell, aColors, aCells = oRow.getElementsByTagName ( "td" );
        while ( oCell = aCells.item ( i )) {
            switch ( sAction ) {
                case "over" :
                                    gem    (oCell, oActiveTable.gemtColor, i);
                    update ( oCell, oActiveTable.aHover );
                    break;
                case "out" :
                    update ( oCell, oActiveTable.gemtColor[i]);
                    break;
            }
            i++;
        }

    }
}
SafeAddOnload(oActiveTable.mInit);
</script>
</head>
<BODY>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="mouseoverActive">
<tr>
<td><A href="">dette er en test</A></td><td>Her er noget skrift</td>
</tr>
</body>
</HTML>
Avatar billede mapoulsen Nybegynder
10. oktober 2006 - 11:35 #1
Jeg har intet svar på dit konkrete spørgsmål, men jeg vil anbefale dig at gøre det på en anden måde. Det er jo en enorm kode for at lave en så lille effekt. En effekt som kan laves utroligt simpelt og kort vha. ren HTML/CSS.

Lad mig giver dig et eksempel (som jeg ikke lige har testet).

Læg følgende ind i din css:

#nav a{
display:block;
padding:10px 20px;
margin:5px;
background:white;
color:blue;
}
#nav a:hover {
background:blue;
color:white;
}

Og skriv så i din html:

<div id="nav">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>

osv.

Og så kan du jo selvfølgelig style disse knapper præcis som du vil have dem.

Det giver typisk også mening at indsætte elementerne i en liste. Det kan du læse mere om her: http://www.alistapart.com/articles/taminglists/
Avatar billede ripley Nybegynder
10. oktober 2006 - 11:43 #2
Fin idé, men jeg skulle måske lige have tilføjet at den ovenstående kode virker på ufattelig mange filer i vores kæmpesystem, så jeg kan ikke umiddelbart kode det om som du foreslår.

Men jeg vil gemme dit forslag til en anden gang, hvor der forhåbentlig bliver tid til at lave det om, for jeg synes også det er utrolig klumpet med så store armbevægelser for så lille en effekt :o)
Avatar billede mclemens Nybegynder
13. oktober 2006 - 09:11 #3
Hvad med denne:







<HTML>
<Head>
<Script language="javascript">
    aMouseOver=["#006699", "#FFFFFF"];
    aMouseSelected=[ "#F1861E", "#FFFFFF" ];





    ahrefover=[ "#006699", "#ffffff" ];
    ahrefout=[ "#ffffff", "#0000ff" ];



 
var gSafeOnload = new Array();
function SafeAddOnload(f)
{
    window.onload = SafeOnload;
    gSafeOnload[gSafeOnload.length] = f;
}
function SafeOnload()
{
    for (var i=0;i<gSafeOnload.length;i++){
        gSafeOnload[i]();
     
    }
}

    var oActiveTable = {
    gemtColor : new Array(),
    // hardwired styles for max perfomance
    aHover        : [ "#006699", "#FFFFFF" ],
 
    mInit : function () {
        if (typeof aMouseOver=="object"){oActiveTable.aHover=aMouseOver;}
        // collect active tables
        var aTables = document.getElementsByTagName ( "table" );
        var oTable, i = 0;
        while ( oTable = aTables.item ( i++ )) {
            if ( oTable.className.indexOf("mouseoverActive")>-1 ) {
                oTable.onmouseover    = oActiveTable.mCheck;
                oTable.onmouseout      = oActiveTable.mCheck;
                oTable.onmousedown    = oActiveTable.mCheck;

            }
        }
    },
    mCheck : function ( e ) { // check mouse action
        var e = e ? e : window.event;
        var oNode = e.target ? e.target : e.srcElement;
        while ( oNode.nodeName.toLowerCase () != "tr" &&  oNode.nodeName.toLowerCase () != "table" ) oNode =

oNode.parentNode;
     
        if ( oNode.nodeName.toLowerCase () == "table" ) return;
        else var oRow = oNode;
     
        oActiveTable.mUpdate ( oRow, e.type == "mouseover" ? "over" : "out" );
     
    },
    mUpdate : function ( oRow, sAction ) { // update display







        var update = function ( oCell, aColors,aColors2 ) {


ahrefs=oCell.getElementsByTagName("a");
for(j=0,j2=ahrefs.length;j<j2;j++){
  ahrefs[j].style.background=aColors2[0];
  ahrefs[j].style.color=aColors2[1];
}



            oCell.style.backgroundColor = aColors [ 0 ];
            oCell.style.color = aColors [ 1 ];
        }
        var gem = function ( oCell, aGemaColors,nr ) {
            if (aGemaColors[nr]==null){
                aGemaColors[nr]=new Array(2);
            }
            aGemaColors[nr][ 0 ] = oCell.style.backgroundColor;
            aGemaColors[nr][ 1 ] = oCell.style.color;
        }
        var i = 0, oCell, aColors, aCells = oRow.getElementsByTagName ( "td" );
        while ( oCell = aCells.item ( i )) {
            switch ( sAction ) {
                case "over" :
                                    gem    (oCell, oActiveTable.gemtColor, i);
                    update ( oCell, oActiveTable.aHover,ahrefover );
                    break;
                case "out" :
                    update ( oCell, oActiveTable.gemtColor[i],ahrefout);
                    break;
            }
            i++;
        }

    }
}

SafeAddOnload(oActiveTable.mInit);
















</script>
</head>
<BODY>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="mouseoverActive">
<tr>
<td><A href="">dette er en test</A></td><td>Her er noget skrift</td>
</tr>
</body>
</HTML>
Avatar billede mclemens Nybegynder
13. oktober 2006 - 10:33 #4
Eller måske denne her :



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

  hov={
    over:["#006699","#fff","#006699","#fff"],
    out:["#fff","#000","#fff","#00f"]
  };

  window.onload=function(){

    tabs=document.getElementsByTagName("table");
    for(i=0,i2=tabs.length;i<i2;i++)if(tabs[i].getAttribute("rel")=="hovtab"){

      trs=tabs[i].getElementsByTagName("tr");
      for(j=0,j2=trs.length;j<j2;j++){

        trs[j].onmouseover=function(){hovit(this,"over");};
        trs[j].onmouseout=function(){hovit(this,"out");};

      }

    }

  }


  function hovit(e,t){
    s=e.style;
    s.background=hov[t][0];
    s.color=hov[t][1];
    a=e.getElementsByTagName("a");
    for(i=0,i2=a.length;i<i2;i++){
      s=a[i].style;
      s.background=hov[t][2];
      s.color=hov[t][3];
    }
  }

</script>

</head><body>


<table width="100%" cellspacing="0" cellpadding="0" border="0" class="mouseoverActive" rel="hovtab">
<tr>
<td><a href="">dette er en test</a></td><td>Her er noget skrift</td>
</tr>
</table>

<br><br><br>

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="mouseoverActive">
<tr>
<td><a href="">dette er en test</a></td><td>Her er noget skrift</td>
</tr>
</table>
</body></html>



... Lægger lige som svar, hvis noget af det kunne bruges ...
. farver i ovenstående script skal nok rettes...

    over:["#tekst-baggrund","#tekst-color","#a-href-baggrund","#a-href-color"],
    out:["#tekst-baggrund","#tekst-color","#a-href-baggrund","#a-href-color"]
Avatar billede mclemens Nybegynder
13. oktober 2006 - 11:14 #5
^ i ovenstående skal rel="hovtab" fjernes og
for(i=0,i2=tabs.length;i<i2;i++)if(tabs[i].getAttribute("rel")=="hovtab"){
rettes til
for(i=0,i2=tabs.length;i<i2;i++){
... såfremt den ikke kun skal påvirke elementer med den nævnte rel attribut...




senere når vi kan nøjes med at kode til IE 7 og andre browsere kan du bruge noget i denne stil ... virker ikke i IE under 7 (prøv FF)... har ikke IE 7 men tror det virker der grundet bedre css understøttelse...



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

.mouseoverActive tr:hover {
  background:#006699;
  color:#fff;
}

.mouseoverActive tr:hover a {
  background:#006699;
  color:#fff;
}

</style>

</head><body>


<table width="100%" cellspacing="0" cellpadding="0" border="0" class="mouseoverActive">
<tr>
<td><a href="">dette er en test</a></td><td>Her er noget skrift</td>
</tr>
</table>

<br><br><br>

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><a href="">dette er en test</a></td><td>Her er noget skrift</td>
</tr>
</table>
</body></html>
Avatar billede ripley Nybegynder
17. oktober 2006 - 10:38 #6
Mærkeligt - jeg skrev lige besked til dig, mclemens - men den kommer ikke igennem!

Jeg skrev at du var genial :o) Din første løsning virkede fint!

Tilbage står jeg med et problem som jeg ikke lige havde forudset: `Jeg har en TR ét sted, der er sortering på - denne TR's baggrundsfarve skal være mørkeblå ved mouse-out, hvor den skal være hvid alle andre steder.
Mon man kan lave en form for undtagelse?
Avatar billede mclemens Nybegynder
17. oktober 2006 - 17:50 #7
Sådan ?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

  hov={
    over:["#069","#fff","#069","#fff"],
    out:["#fff","#000","#fff","#00f"]
  };

  window.onload=function(){
    tabs=document.getElementsByTagName("table");
    for(i=0,i2=tabs.length;i<i2;i++)if(tabs[i].getAttribute("rel")=="hovtab"){
      trs=tabs[i].getElementsByTagName("tr");
      for(j=0,j2=trs.length;j<j2;j++){
        tmp=(tmp=trs[j].style.backgroundColor)?tmp:0;
        assign(trs[j],tmp);
      }
    }
  }

  function assign(a,b){
    a.onmouseover=function(){hovit(this,"over",0);};
    a.onmouseout=function(){hovit(this,"out",b);};
  }

  function hovit(e,t,b){
    s=e.style;
    s.background=b!=0?b:hov[t][0];
    s.color=hov[t][1];
    a=e.getElementsByTagName("a");
    for(i=0,i2=a.length;i<i2;i++){
      s=a[i].style;
      s.background=b!=0?b:hov[t][2];
      s.color=hov[t][3];
    }
  }

</script>

</head><body>


<table width="100%" cellspacing="0" cellpadding="0" border="0" class="mouseoverActive" rel="hovtab">

<tr style="background-color:#008;">
<td><a href="">dette er en test</a></td><td>Her er noget skrift</td>
</tr>

<tr>
<td><a href="">dette er en test</a></td><td>Her er noget skrift</td>
</tr>

</table>

</body></html>
Avatar billede ripley Nybegynder
20. oktober 2006 - 12:50 #8
Tak for hjælpen .. du er en sveske :o)
Kan man sige sådan på eksperten.dk eller er det ikke indenfor rammerne af den normale jargon ;o)

Jeg havde ikke forklaret mig godt nok, så din sidste løsning var helt OK men ikke lige til mit brug .. jeg synes dog jeg må oprette et nyt indlæg da jeg nu har et nyt problem :o)
Avatar billede mclemens Nybegynder
20. oktober 2006 - 20:31 #9
Velbekom, og tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 16:04 Canon printer vil ikke udskrive farver Af mort1 i Printere
I dag 14:50 Hvilket fabrikat af Mesh systemer virker? Af fkj i Wifi
I går 13:45 AJAX kode -javascript Af Asky i Programmeringsværktøjer
I går 11:50 Vælg indstilling - blå skærm med med flere muligheder for fejlretning Af Uvanga i Windows
14/0523:24 Google sheets beregning udfra dato Af rickiegrayholm i Office & Kontorpakker
White papers
Flere white papers »