Ændr bg-farve i 2 divs OnMouseOver
Hej.Jeg er ved at lave en hjemmeside. Menuen har en rollover-effekt, således at baggrundsfarven (og tekst-farven) for hver "menuboks" ændrer farve når man kører musen over... så langt så godt.
Mit spørgsmål er, hvis jeg gerne vil have en lille firkant inde i hver menuboks, som skal ændre farve sammen med resten af menupunktet, hvordan gør jeg det?
Jeg har lagt en eksempel-side ud her: http://www.filipj.frac.dk... så kan i måske se hvad jeg mener, bedre...
Jeg har ikke så meget forstand (meget meget lidt hvis noget overhovedet) på Javascript.. jeg tror det er JS min onmouseover-effekt er lavet med.
I mit html-dokument står der koden:
onmouseout="this.style.backgroundColor='#fff'; this.style.color='#000'"
-- så tænker jeg på om man mon kan ændre det der "This.Style" til "Another.Style" eller noget :-), så man kan lave 2 af sammme action, hvor den ene bare påvirker en anden div? Hvis I forstår
Koden til min (X)HTML-fil som jeg har lagt ud på ovenstående side, ser således ud:
--------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DK Profil - velkommen</title>
<link rel="stylesheet" type="text/css" href="dkp_css_screen1.css">
</head>
<body>
<div align="center">
<div id="container">
<!--topbanner-->
<div id="topbanner">
</div>
<!--logo-->
<div id="logo">
<img src="bill/logo1.gif">
</div>
<!--menu-->
<div class="menu">
<div class="menuboks"
onmouseover="this.style.backgroundColor='#89c66c';this.style.color='#fff'"
onmouseout="this.style.backgroundColor='#fff';this.style.color='#000'"
onclick="location.href='info/index.html';
this.style.backgroundColor='#89c66c'"
style="cursor:pointer;cursor:hand; top: 0px;">
<div class="menufirkant"></div>
<div class="menutekst1">Information</div>
</div>
<div class="menuboks"
onmouseover="this.style.backgroundColor='#89c66c';this.style.color='#fff'"
onmouseout="this.style.backgroundColor='#fff';this.style.color='#000'"
onclick="location.href='info/index.html';
this.style.backgroundColor='#89c66c'"
style="cursor:pointer;cursor:hand; top: 31px;">
<div class="menufirkant"></div>
<div class="menutekst1">Domæner</div>
</div>
<div class="menuboks"
onmouseover="this.style.backgroundColor='#89c66c';this.style.color='#fff'"
onmouseout="this.style.backgroundColor='#fff';this.style.color='#000'"
onclick="location.href='info/index.html';
this.style.backgroundColor='#89c66c'"
style="cursor:pointer;cursor:hand; top: 62px;">
<div class="menufirkant"></div>
<div class="menutekst1">Salgsbetingelser</div>
</div>
<div class="menuboks"
onmouseover="this.style.backgroundColor='#89c66c';this.style.color='#fff'"
onmouseout="this.style.backgroundColor='#fff';this.style.color='#000'"
onclick="location.href='info/index.html';
this.style.backgroundColor='#89c66c'"
style="cursor:pointer;cursor:hand; top: 93px;">
<div class="menufirkant"></div>
<div class="menutekst1">Kontakt</div>
</div>
</div>
</div>
<!--indholdsboks-->
<table class="indholdsboks1" cellspacing="0" cellpadding="0">
<tr height="40">
<td colspan="3"></td>
</tr>
<tr valign="top">
<td width="40">
</td>
<td width="700">
<table width="700" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="270">
</td>
<td>
<!--INDHOLD HERUNDER-->
<table width="300" class="indhold" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
Tekst her tekst her tekst her
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</td>
</tr>
</table>
<!--INDHOLD SLUT-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="40">
</td>
</tr>
<tr height="30">
<td colspan="3"></td>
</tr>
</table>
</div>
</body>
</html>
--------------------------------------------------------------------------
og min CSS-fil ser således ud:
--------------------------------------------------------------------------
body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-color:#111;
}
#container {
border-width: 0px;
width: 700px;
height: 130px;
position: relative;
top: 10px;
}
#topbanner {
border-width: 0px;
width: 100%;
height: 100%;
position: relative;
top: 0px;
background-color: #fff;
}
#logo {
border: 0px;
position: absolute;
top: 60px;
left: 45px;
}
.menu {
width: 180px;
position: absolute;
top: 165px;
left: 45px;
z-index: 1;
}
.menuboks {
height: 30px;
width:100%;
background-color: #fff;
position: absolute;
left: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 12px;
text-align: left;
color: #111;
border-bottom: 1px solid white;
}
.menutekst1 {
position: relative;
top: 8px;
left: 30px;}
.menufirkant {
background-color: #89c66c;
width: 8px;
height: 8px;
position: absolute;
top: 10px;
left: 12px;
}
.indholdsboks1 {
border-width: 0px;
width: 700px;
position: relative;
top: 2px;
background-color: #fff;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 14px;}
.subboks1 {
border-width: 0px;
height: 250px;
background-color: #a3c5a3;
}
.indhold {
border-width: 0px;
border: solid 0px black;
}
.overskrift {
color: #000;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 23px;
text-align: left;}
.mellemrubrik {
color: #111;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 18px;
text-align: left;}
.manchet {
color: #000;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
text-align: left;}
.broedtekst {
color: #000;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
text-align: left;}
.broedtekst-lille {
color: #222;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
line-height: 19px;
text-align: left;}
--------------------------------------------------------------------------
Nogen der kan hjælpe?
Mvh Filip Jakobsen
