Avatar billede lund_dk Praktikant
15. juni 2005 - 08:18 Der er 17 kommentarer og
1 løsning

hover and active background image

hej!

Har min alm tabel

<table>
<tr>
  <td>indhold</td>
</tr>
<tr>
  <td>indhold</td>
</tr>
<tr>
  <td>indhold</td>
</tr>
</Table>

Jeg skal så have lavet følgende.
At hvis man kører musen hen over en celle skal et givent baggrundbillede vises. Klikk jeg på cellen så den er "aktiv" skal jeg så gave et andet givent baggrundbillede.
Og ligeledes hvis en celle er "aktiv" og jeg klikker på en anden celle, skal den "aktive" celles baggrundsbillede fjernes og have "aktiv" baggrundbillede på den nye celle jeg klikker på.

Nogen som kan hjælpe mig med dette ?
Avatar billede roenving Novice
15. juni 2005 - 12:07 #1
<script type="text/javascript">
function setActive(elm){
  var par = elm.parentNode;
  while(par.tagName!="TABLE")
    par = par.parentNode;
  var tds = par.getElementsByTagName("TD");
  for(i=0;i<tds.length;i++)
    tds[i].style.backgroundImage = "url(inaktiv.gif)";//eller sæt den til ingenting !-)
  elm.style.backgroundImage = "url(aktiv.gif)";
}
</script>

<table>
<tr>
  <td onmouseover="this.style.backgroundImage='url(hover.gif)';" onclick="setActive(this)">indhold</td>
</tr>

...

</table>
Avatar billede lund_dk Praktikant
15. juni 2005 - 13:31 #2
Lader ikke til at virke :s
Avatar billede lund_dk Praktikant
15. juni 2005 - 13:33 #3
er onclick jeg ikke kan få til at virke
Avatar billede roenving Novice
15. juni 2005 - 13:39 #4
Kan du linke eller på anden måde vise det, du gør ?-)
Avatar billede lund_dk Praktikant
17. juni 2005 - 11:20 #5
Se www.lundwebdesign.net/work/selek
Åbn vinduet
De 3 første celler i menuen til venstre.
Avatar billede roenving Novice
17. juni 2005 - 12:05 #6
Jamen, du sætter jo også den aktives baggrund til det samme som de inaktive !-)

  elm.style.backgroundImage = "url(images/design/hovedmenuBgover.gif)";

-- det er nok ovenstående linje, du skal tilrette !-)

-- der er iøvrigt en hel del kommentarer at knytte til din måde at lave html-kode på:

For det første er det en rimelig måde at gøre sine sider kompatible, at man sætter en fuldt kvalificeret doctype inklusive dtd-link på:

I almindelige dokumenter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

-- og i frameset-dokumenter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

-- det har faktisk været obligatorisk siden 1998 at sætte en doctype på for at kunne kalde det et html-dokument ...

For det andet er det tåbeligt at bruge det rene windows-virkende karaktersæt, når man kan bruge:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

-- som vil virke alle steder !-)

-- også selvom det ser ud til at det er en ting, som kræver IE5.5+ er det en vane, at man grundlæggende bruger så åbne standarder som muligt, når det iøvrigt ikke generer en, men kan give start-hjælpen til andre ting, som skal udvikles på et senere tidspunkt !o]

For det tredje er en type-attribut obligatorisk på style- og script-tags:

<style type="text/css">

og

<script type="text/javascript">

For det fjerde lyder den entydige anbefaling, at man _aldrig_ bruger store bogstaver i tag-navne eller attributter, heller ikke i css, medmindre f.eks. et className er lettere at forstå, fordi man bruger nogle store bogstaver til at opdele ordene ...

For det femte bruger du en del styles, men sætter alligevel (deprecatede, dvs. forældede, som er på vej ud !-) attributter, bare de første linjer af body kan illustrere det:

<body class="MenuBg" style="margin:3px; border-right: 1px solid #002C94;">

<table border="0" cellpadding="0" cellspacing="1" style="width:100%;background:#002C94;height:100%">
    <tr>
        <td style="background:#fff;height:100%;vertical-align:top;">

-- iøvrigt har der aldrig i nogen standard eksisteret en height-attrbut til et table-tag, selvom de fleste browsere har understøttet det i quirks-mode !-)

-- hvis du sætter doctype på, skal du for at udnytte height:100%; tilføje en style i dit style-sheet:

html,body{height:100%;}
Avatar billede lund_dk Praktikant
17. juni 2005 - 12:48 #7
Er vist ikke  helt med, jeg har angivet det således
<script type="text/javascript">
function setActive(elm){
  var par = elm.parentNode;
  while(par.tagName!="TABLE")
    par = par.parentNode;
  var tds = par.getElementsByTagName("TD");
  for(i=0;i<tds.length;i++)
    tds[i].style.backgroundImage = "url(images/design/hovedmenubg.gif)";//eller sæt den til ingenting !-)
  elm.style.backgroundImage = "url(images/design/hovedmenubgAktiv.gif)";
}
</script>

og som jeg har forstået så er
elm.style.backgroundImage = "url(images/design/hovedmenubgAktiv.gif)";
hvor jeg skal angive den aktive baggrund


ved godt mange ting i dokumentet ikke lever op til mange stadarder men meget af det plejer jeg også at rette senere hen når "udkastet" er lavet.
Avatar billede roenving Novice
17. juni 2005 - 12:57 #8
Hvis du starter et projekt uden doctype og senere skal sætte det på, vil det som regel være lettere at starte forfra og kopiere nogle enkelte properties ind i det nye dokument ...

-- og argh, der kommer jo også en mouseout efter klikket, og så ændres den jo tilbage ...

-- i den udgave, jeg kunne kigge på før, var den jo desværre ikke sådan, men det er jo ligegyldigt, når det skal laves anderledes:

<script type="text/javascript">
function setActive(elm){
  var par = elm.parentNode;
  while(par.tagName!="TABLE")
    par = par.parentNode;
  var tds = par.getElementsByTagName("TD");
  for(i=0;i<tds.length;i++){
    tds[i].style.backgroundImage = "url(images/design/hovedmenubg.gif)";
    tds[i].active = false;
  }
  elm.style.backgroundImage = "url(images/design/hovedmenubgAktiv.gif)";
  elm.active = true;
}
</script>

...

<td class="Hovedmenu" onmouseover="this.style.backgroundImage='url(images/design/hovedmenuBgover.gif)';" onmouseout="if(!this.active)this.style.backgroundImage='url(images/design/hovedmenuBg.gif)';" onclick="setActive(this)">
Avatar billede lund_dk Praktikant
17. juni 2005 - 13:28 #9
Har desværre ikke givet nogen anden effekt :(
Avatar billede roenving Novice
17. juni 2005 - 13:29 #10
Kan du ikke uploade det ?-)
Avatar billede lund_dk Praktikant
17. juni 2005 - 13:31 #11
jo da.. done ..
Avatar billede lund_dk Praktikant
17. juni 2005 - 13:34 #12
Har så testet det i firefox der virker det korrekt, men IE virke onlick active ikke
Avatar billede roenving Novice
17. juni 2005 - 13:49 #13
De simple tests, jeg kan lave, viser at properties er korrekte hele tiden ,-(

Prøv på een af dem:

<td class="Hovedmenu" onmouseover="this.style.backgroundImage='url(images/design/hovedmenuBgover.gif)';alert(this.active);" onmouseout="alert(this.active);if(!this.active)this.style.backgroundImage='url(images/design/hovedmenuBg.gif)';" onclick="setActive(this)">
Avatar billede lund_dk Praktikant
17. juni 2005 - 13:54 #14
er lagt op
Avatar billede roenving Novice
17. juni 2005 - 14:10 #15
Hrm, det virker skørt, at IE ikke accepterer at man angiver en ny property på din side, for jeg kunne godt lave nummeret med en simpel side, jeg lige lavede ?-)

-- så det lyder som en lang omvej, hvor hver eneste td skal have et id, og vi så opbevarer tilstanden i et array ...
Avatar billede lund_dk Praktikant
02. august 2005 - 09:08 #16
Nåå roenving, kom ikke så meget videre, men projektet er droppet. Hvis du smider et svar, så får du point som tak for indsatsen :)
Avatar billede roenving Novice
02. august 2005 - 09:14 #17
Oki '-)
Avatar billede roenving Novice
02. august 2005 - 09:32 #18
-- 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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester