Danschi: mit hover bilder Tauschen ?

Beitrag lesen

SELF-Forum

mit hover bilder Tauschen ?

Danschi
– Informationen zu den Bewertungsregeln

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 ;)

Beitrag melden
–
Informationen zu den Bewertungsregeln