Hallo zusammen.
Ich habe ein Problem.
Ich habe 3 Buttons. Beim Hover über einer dieser Button soll ein entsprechendes Bild in einem <div> angezeigt werden. Das ganze habe ich über JavaScript wie folgt gemacht.
Nur leider geht das nicht. Da ich mich noch nicht so mit JavaScript auskenne hoffe ich ihr könnt mir Helfen.
Hier der HTML Code:
HTML
<div id="buttonwrapper">
<table>
<tr>
<td> <div id="button1" onmouseover="ncislabackground()" onmouseout="back()"> </div> </td>
<td> <div id="button2" onmouseover="ncisbackground()" onmouseout="back()"> </div> </td>
<td> <div id="button3" onmouseover="ncisnobackground()" onmouseout="back()"> </div> </td>
</tr>
</table>
<script type="text/javascript">
if (!window.Weite && document.body && document.body.offsetWidth) {
window.onresize = neuAufbau;
Weite = Fensterweite();
Hoehe = Fensterhoehe();
}
wrapperwidth = document.getElementById('buttonwrapper').offsetWidth;
navwidth = document.getElementById('button1').offsetWidth;
endergebnis = (wrapperwidth - (3 * navwidth))/4;
wrapperheight = document.getElementById('buttonwrapper').offsetHeight;
navheight = document.getElementById('button1').offsetHeight;
endergebnis2 = (wrapperheight - navheight)/2;
document.getElementById("button1").setAttribute("style","margin-top: "+ endergebnis2 + "px; margin-left: "+ endergebnis + "px;");
document.getElementById("button2").setAttribute("style","margin-top: "+ endergebnis2 + "px; margin-left: "+ endergebnis + "px;");
document.getElementById("button3").setAttribute("style","margin-top: "+ endergebnis2 + "px; margin-left: "+ endergebnis + "px;");
function ncisbackground () {
document.getElementById("topscreen").style.backgroundImage = "url('../Bilder/header.jpg')";
}
function ncislabackground () {
document.getElementById("topscreen").style.backgroundImage = "url('../Bilder/header.jpg')";
}
function ncisnobackground () {
document.getElementById("topscreen").style.backgroundImage = "url('../Bilder/header.jpg')";
}
function back () {
document.getElementById("topscreen").style.backgroundImage = "url('../Bilder/blank.jpg')";
}
</script>
</div>
Im CSS Code habe ich :hover eingebaut um zu schauen ob sich da was ändert. Da dies auch nicht passiert und die Background colors der buttons nicht geändert wird bin ich ratlos.
CSS
#topscreen {
position:relative;
width:60%;
height:200px;
margin:40px 40px 40px 40px;
margin-left:20%;
margin-right:20%;
background-color:white;
background-image: url("../Bilder/header.jpg");
}
#buttonwrapper {
position:absolute;
height:400px;
width:80%;
left:10%;
background-color:black;
display: block;
}
#button1, #button2, #button3 {
height:150px;
width:150px;
background-color:white;
display:block;
margin:0px auto;
margin-left:0;
float:left;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
#button1:hover {
background-color:green;
}Hoffe Ihr könnt mir Helfen.
Freundliche Grüsse
BlueFire