Danschi: mit hover bilder Tauschen ?

Hallo, und zwar geht es um folgendes..

Ich muss im Kurs ein CSS "Script" schreiben, dass es ermöglicht, durch HOVERn eines Wortes in einem Text, ein Bild, das in keinerlei Verbindung zum Text steht, durch ein anderes ersetzen. Ich würde an beiden Codes gerne so wenig wie möglich verändern.

HTML:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta charset="utf-8" />  
    <title></title>  
</head>  
<script type="text/javascript">  
    function methover() {  
  
        document.bereichspic.src = "images/"+document.;  
  
    }  
  
</script>  
<body>  
    <div id="content_team">  
  
        <div id="team-wrap">  
            <h2>Team</h2>  
            <h3 id="leitung" onmouseover="methover();">Leitung</h3><br />  
            <h3 id="metall">Metall</h3><br />  
            <h3 id="gastro">Gastronomie</h3><br />  
            <h3 id="glas">Glas</h3><br />  
            <h3 id="edv">EDV</h3><br />  
        </div>  
        <div id="info-wrap">  
            <div id="info-inner">  
                <!-- <div id="img-wrap"> -->  
                <img src="images/nopic.png" id="bereichspic" />  
                <!-- </div> -->  
                <hr id="linezy" />  
            </div>  
        </div>  
    </div>  
</body>  
</html>

CSS:

body  
{  
  
margin: 0;  
  
}  
  
h2 {  
  
    color: #339900  
  
}  
  
#team-wrap {  
  
    position: relative;  
    height: 100%;  
    width: 100%;  
    background-color: lightgrey;  
    visibility: visible;  
  
}  
  
#content_team {  
  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    top: 0px;  
    left: 0px;  
  
}  
  
#info-wrap {  
  
    position:absolute;  
    top: 5%;  
    right: 5%;  
    height: 90%;  
    width: 45%;  
    border-style: dashed;  
  
}  
  
#info-inner {  
  
    position:relative;  
    height: 100%;  
    width: 100%;  
  
}  
  
#bereichspic {  
  
    position: absolute;  
    width: 200px;  
    height: 200px;  
    right: calc((100% - 200px) / 2);  
    top: 5%;  
  
}  
  
#linezy {  
  
    position:absolute;  
    top: calc(5% + 210px);  
    width: 100%;  
  
}  
  
#leitung:hover {  
  
  
  
}  
  
  
  

Danke im Vorraus,
Mit freundlichen Grüßen,

Dani ;)

  1. EDIT: es darf KEIN Javascript beinhalten!

  2. Om nah hoo pez nyeetz, Danschi!

    Ich muss im Kurs ein CSS "Script" schreiben, dass es ermöglicht, durch HOVERn eines Wortes in einem Text, ein Bild, das in keinerlei Verbindung zum Text steht, durch ein anderes ersetzen.

    Schön. Aber ich kann weder eine Frage entdecken noch kann ich erkennen, dass du dich bereits mit dem Problem beschäftigt hast.

    Danke im Vorraus,

    Gerrn, aber SELFHTML ist kein Hausaufgabenservice.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bucht und Buchtitel.

    1. Om nah hoo pez nyeetz, Danschi!

      Ich muss im Kurs ein CSS "Script" schreiben, dass es ermöglicht, durch HOVERn eines Wortes in einem Text, ein Bild, das in keinerlei Verbindung zum Text steht, durch ein anderes ersetzen.

      Schön. Aber ich kann weder eine Frage entdecken noch kann ich erkennen, dass du dich bereits mit dem Problem beschäftigt hast.

      Danke im Vorraus,

      Gerrn, aber SELFHTML ist kein Hausaufgabenservice.

      Matthias

      Sachliche antworten würde ich herzlichst willkommen heißen ;)

      1. Hallo,

        Om nah hoo pez nyeetz, Danschi!

        Ich muss im Kurs ein CSS "Script" schreiben, dass es ermöglicht, durch HOVERn eines Wortes in einem Text, ein Bild, das in keinerlei Verbindung zum Text steht, durch ein anderes ersetzen.

        Schön. Aber ich kann weder eine Frage entdecken noch kann ich erkennen, dass du dich bereits mit dem Problem beschäftigt hast.

        Sachliche antworten würde ich herzlichst willkommen heißen ;)

        Wenn du nicht nur sachliche Antworten möchtest, sondern hilfreiche, solltest Du die Tipps befolgen. Du wirst erstaunt sein, wie weit Dich eine Self-Diskussion bringen kann, wenn du bereit bist auch mitzuwirken!

        Viele Grüße,
        Marc.

        --
        Und immer schön
        validieren (http://validator.w3.org/)
  3. Hallo,

    CSS kennt die <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm@title=Pseudoklasse :hover>. Wenn ein Element diesen Status hat, kannst du es bzw. verwandte Elemente formatieren. Das kann z.B. zum Einblenden von Kindelementen genutzt werden, die standardmäßig ausgeblendet sind:

    <div class="einElement">  
      Hey!  
      <div class="einKindelement">  
        Ho!  
      </div>  
    </div>
    
    .einElement .einKindelement { display: none; }  
    .einElement:hover .einKindelement { display: block; }
    

    display ist natürlich nur eine Eigenschaft, die geändert werden kann. Du kannst auch z.B. background-image setzen/ändern, falls du beim Hover ein Bild anzeigen willst.

    CSS kann im Gegensatz zu JavaScript nicht gänzlich andere Elemente formatieren, wenn bei einem Element ein Hover passiert. Hier ist man auf die Möglichkeiten der Selektoren beschränkt. Das zu formatierende Element muss ein Kind, ein Nachfahre oder ein Geschwister sein. Im obigen Beispiel ist es ein Kind (genutzt wird der Nachfahrens-Kombinator).

    http://wiki.selfhtml.org/wiki/CSS/Selektoren

    Mathias