Javascript befehle aneinandereihen?

Wie kann ich zwei hoverfunktionen von javascript in einem li zusammen benutzen?

HTML:

!DOCTYPE html>

<html lang="de-DE">

    <head>

        <link rel="stylesheet" type="text/css" href="Layout.css">

        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Javascript Startseite</title>

        <script src="Main.js"></script>

    </head>

    <body>

        <div class="header">

            <h1>Weltreligionen</h1>

        </div>

        <div class="topnav">

            <ul>

                <li><a href="Startseite.html" onmouseover="changeColor(this)" onmouseout="changeColor(this)">Startseite</a></li>

                <li onmouseover="changeBgColor(this,'rgb(173, 216, 230)')" onmouseout="changeBgColor(this,'rgb(151, 189, 202)')"; onmouseover="changeColor(this)" onmouseout="changeColor(this)">Christentum

                    <ul>

                        <li id="dropdown-content"><a href="Ursprung-Christentum.html">Ursprung</a></li>

                        <li id="dropdown-content"><a href="Verbreitung-Christentum.html">Verbreitung</a></li>

                        <li id="dropdown-content"><a href="Lehre-Christentum.html">Lehre</a></li>

                    </ul>

                </li>

</ul>

</div>

</body>

</html>

javascript:

function changeColor(obj) {

    if (obj.style.color == 'black') {

        obj.style.color = 'white';

    } else {

        obj.style.color = 'black';

    }

}

function changeBgColor(obj, colorName) {

    obj.style.backgroundColor = colorName;

}

function dropdownContent() {

    var element = document.getElementById("dropdown-content");

     

    if(element.style.visibility == "hidden"){

        element.style.visibility = "visible";

    } else {

        element.style.visibility = "hidden";

    }   

}

Vielen Dank im Vorraus!

LG Leonardo

               

PC, Computer, Programm, HTML, Programmieren, JavaScript, Code, codieren
Hilfe bei HTML Website?

Warum liegt der Text unter den Grafiken nicht direkt unter der Grafik, sondern in der Mitte der Zeile?

Musterlösung:

Meine Lösung:

Mein Code:

<!DOCTYPE html>
<html>
 <head>
     <title>Leonardo's Website</title>
     <style>
th {
  border: 2px solid #B8AD97;
  text-align: center;
  padding: 9px;
}
td {
  border: 0px;
  padding: 1px;
}
.top {
  border-collapse: collapse;
  size: 250;
  background-color:#857658;
}
.bottom {
  border-collapse: collapse;
  size: 669px;
  background-color:beige
}
.textontop{
  text-align: center;
  margin-top: 0px;
}     
.textatcenter{
  text-align: center;
}
  </style>
 </head>
 <body style="background-color:beige">
  <h3>Beispiele für Smileys <img src="smiley.gif"></h3>
    <table class="top">
        <tr>
            <th>:-((</th>
            <th>sehr traurig</th>
        </tr>
        <tr>
          <th>;-)</th>
          <th>Augenzwinkern</th>
        </tr>
        <tr>
          <th>:-|</th>
          <th>kein Kommentar</th>
        </tr>
    </table>
    <table class="bottom">
      <tr>
        <td><img src="audi.jpg"></td>
        <td><h3 class="textatcenter">Meine kleine Autosammlung</h3></td>
        <td><img src="bmw.jpg"></td>      
      </tr>
      <tr>
        <td><h3 class="textontop">Audi TT</h3></td>
        <td><img src="porsche.jpg"></td>
        <td><h3 class="textontop">BMW Z3</h3></td>
      </tr>
      <tr>
        <td> </td>
        <td><h3 class="textontop">Porsche 911</h3></td>
        <td> </td>
      </tr>
    </table>
</body>
</html>

Danke im Voraus

LG Leonardo

Hilfe bei HTML Website?
PC, Computer, Website, Technik, HTML, Programmieren, CSS, Code, Informatik, Technologie