Avatar billede fagghunter Nybegynder
10. april 2005 - 15:33 Der er 10 kommentarer og
1 løsning

Skift bgbilled i td ved mouseover

ey :)

jeg leder efter et css script hvor baggrundsbilledet skifter når jeg har laver en mouseover på et link :) Det skal bruges til en menu!

/FagGHuNTeR aka SiZanX
Avatar billede hyberpreprocessor Nybegynder
10. april 2005 - 15:35 #1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title> 608243 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
   
    a
    {
      display: block;
      color: black;
      width: 80px;
      height: 20px;
      background: yellow;
    }

    a:hover
    {
      background: red;
    }

    </style>
  </head>
  <body>

  <a href="">Link 1</a><br /
  <br />
  <a href="">Link 1</a><br /
  <br />
  <a href="">Link 1</a><br /
  <br />

  </body>
</html>
Avatar billede hyberpreprocessor Nybegynder
10. april 2005 - 15:36 #2
Hvis du vil skifte backgrounden i andre objekter end selv linket, skal der bruges javascript.

Sig til hvis det er det du gerne vil.
Avatar billede fagghunter Nybegynder
10. april 2005 - 15:44 #3
Det er det vidst :) for det med block virker ikke på måde jeg vil have det på, jeg skal skifte bgimage i en td i en tabel :D
Avatar billede hyberpreprocessor Nybegynder
10. april 2005 - 15:50 #4
okay.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title> 608243 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">

    function wop(elm,direction)
    {
      var td = document.getElementById(elm);
      if(direction == 1)
      {
        td.style.background = "red";
      }
      else
      {
        td.style.background = "white";
      }
    }

    </script>
  </head>
  <body>
    <table border="1">
      <tr>
        <td id="link1">
          <a href="" onmouseover="wop('link1',1)" onmouseout="wop('link1',0)">Link 1</a><br />
        </td>
        <td id="link2">
          <a href="" onmouseover="wop('link2',1)" onmouseout="wop('link2',0)">Link 2</a><br />
        </td>
        <td id="link3">
          <a href="" onmouseover="wop('link3',1)" onmouseout="wop('link3',0)">Link 3</a><br />
        </td>
        <td id="link4">
          <a href="" onmouseover="wop('link4',1)" onmouseout="wop('link4',0)">Link 4</a><br />
        </td>
      </tr>
    </table>
  </body>
</html>
Avatar billede fagghunter Nybegynder
10. april 2005 - 16:06 #5
det virker fint med alm. farver, men det virker ikke med baggrundsbilleder..
Avatar billede hyberpreprocessor Nybegynder
10. april 2005 - 16:11 #6
joo, det gør det , hvis du gør det rigtigt :)

    function wop(elm,direction)
    {
      var td = document.getElementById(elm);
      if(direction == 1)
      {
        td.style.background = "url(image1.jpg)";
      }
      else
      {
        td.style.background = "url(image2.jpg)";
      }
    }
Avatar billede fagghunter Nybegynder
10. april 2005 - 16:20 #7
Det virker stadig ikke:

    <script type="text/javascript">

    function wop(elm,direction)
    {
      var td = document.getElementById(elm);
      if(direction == 1)
      {
        td.style.background = "url(images/bar.gif)";
      }
      else
      {
        td.style.background = "url(images/bar.jpg)";
      }
    }

    </script>
      <!--
      Her starter menuen
-->
        <td height="25" background="design/images/bar.jpg" bgcolor="#FFFFFF" class="menu" align="center">
        <table width="180"  border="0" cellspacing="0" cellpadding="0" height="100%">
        <tr>
        <td width="50" id="link1"><strong><a href="index.php" onmouseover="wop('link1',1)" onmouseout="wop('link1',0)" class="menu">Home</a></strong> </td>
        <td width="80" id="link2"><strong><a href="user.php?mode=user&action=list" onmouseover="wop('link2',1)" onmouseout="wop('link2',0)" class="menu">Members</a></strong></td>
        <td width="55"><strong>ClanWars</strong></td>
        </tr>
        </table>
        </td>
        <!--
        Her slutter den
-->
Avatar billede hyberpreprocessor Nybegynder
10. april 2005 - 16:28 #8
Avatar billede fagghunter Nybegynder
10. april 2005 - 16:30 #9
thx :) det virker nu :D et svar hvis du vil have points :D
Avatar billede hyberpreprocessor Nybegynder
10. april 2005 - 16:32 #10
Jo tak :)
Avatar billede hyberpreprocessor Nybegynder
10. april 2005 - 16:35 #11
Og tak for points :~)
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