tabell som byter färg vid onmousover

5 svar · 227 visningar · startad av da97enla 8 okt. 2002

da97enlaMedlem sedan dec. 2001343 inlägg

Frågan8 okt. 2002 11:32#1

Hej

Jag har en meny i en tabell och när man för musen över ändras färgen i cellerna. Jag har olika färger för varje cell. Nu till min fråga, kan man skriva någon slags case sats för detta som jag har gjort nu ser det inte snyggt ut. Det blir väldigt mycket kod!

function mOvera(menya)
{
if(document.getElementById||(document.all && !(document.getElementById))){
menya.style.backgroundColor="#B45072";
}
}
function mOuta(menya){
if(document.getElementById||(document.all && !(document.getElementById))){
menya.style.backgroundColor="#999999";
}
}
function mOverb(menyb){
if(document.getElementById||(document.all && !(document.getElementById))){
menyb.style.backgroundColor="#717DA8";
}
}
function mOutb(menyb){
if(document.getElementById||(document.all && !(document.getElementById))){
menyb.style.backgroundColor="#717DA8";
}
}
function mOverc(menyc){
if(document.getElementById||(document.all && !(document.getElementById))){
menyc.style.backgroundColor="#669999";
}
function mOutc(menyc){
if(document.getElementById||(document.all && !(document.getElementById))){
menyc.style.backgroundColor="#999999";
}

mvh
enla

mikkeXMedlem sedan aug. 2002477 inlägg

8 okt. 2002 12:38#2

Två lösningar (på den första måste du lägga till document.all för att funka på gamla ie):

<script type="text/javascript">
function mOvera(menya,color)
{
if(document.getElementById)
{
obj = document.getElementById(menya);
obj.style.backgroundColor=color;
}
}

</script>

<div id="ett" style="width: 100px; height: 100px;" onmouseover="mOvera('ett','#B45072')" onmouseout="mOvera('ett','#3300FF')";>ett</div>

Eller direkt utan funktion:

<div id="tva" style="width: 100px; height: 100px;" onmouseover="this.style.backgroundColor='black'" onmouseout="this.style.backgroundColor='red'";>ett</div>

Redigerade: fick med liet skräp...

da97enlaMedlem sedan dec. 2001343 inlägg

8 okt. 2002 13:48#3

Ok, så om jag har förstått det hela rätt skulle jag kunna göra så här då:

 
<script type="text/javascript">
function mOver(this,color)
{
if(document.getElementById)
{
obj = document.getElementById(this);
obj.style.backgroundColor=color;
}
}

</script>

<div id="ett" style="width: 100px; height: 100px;" onmouseover="mOvera('ett','#B45072')" onmouseout="this('ett','#3300FF')";>ett</div>

<div id="två" style="width: 100px; height: 100px;" onmouseover="mOvera('två','#CCCCCC')" onmouseout="this('två','#3300FF')";>två</div>

Mha en this-pekare?

Enla

mikkeXMedlem sedan aug. 2002477 inlägg

8 okt. 2002 14:27#4

Inte riktigt, utan så här:

<script type="text/javascript">
function mOvera(menya,color)
{
if(document.getElementById)
{
obj = document.getElementById(menya);
obj.style.backgroundColor=color;
}
}
</script>

<div id="ett" style="width: 100px; height: 100px;" onmouseover="mOvera('ett','#B45072')" onmouseout="mOvera('ett','#3300FF')";>ett</div>
<div id="tva" style="width: 100px; height: 100px;" onmouseover="mOvera('tva','#B45072')" onmouseout="mOvera('tva','#3300FF')";>ett</div>

da97enlaMedlem sedan dec. 2001343 inlägg

8 okt. 2002 14:54#5

Ok, tack så mycket för hjälpen, har inte riktigt förstått det här med thispekare, men det här funkar ju i alla fall. :)

JojoxxMedlem sedan juni 20004 308 inlägg

8 okt. 2002 17:07#6

Man kan säga att this pekar på det aktuella elementet eller objeketet. Använder du det i ett event till en länk är det a-elementet som den syftar på. Använder du det i ett formulär är det form-elementet. Använder du det i ett objekt i ett script är det objektet det syftar på osv.