[JavaScript] Hintergrundfarbe ändern bei mouseover/out

_zippo^ · 9. August 2010

Hintergrundfarbe ändern bei mouseover/out

servus leute, ich hab mal wieder ein problem, ich versuchs erstmal zu beschreiben:
ich habe in meiner php datei per while schleife datensätze aus einer datenbank geholt und diese werden untereinander in jeweils einem divcontainer gespeichert.
dabei wird per if bedingung immer abwechselnd die hintergrundfarbe des div containers getauscht (bzw die class des div-containers)
das ganze sieht etwa so aus:

PHP:

    <? php  while ( $data = mysql_fetch_array ( $resultset ))     
                   {  
                   if (( $i % 2 ) ==  0 )
                   {  ?>       
                  <div class="einzelnereintrag" onMouseover="this.style.backgroundColor='#818181'" onMouseout="this.style.backgroundColor='#f5f5f5'">
              
                <?php
                  } else if(( $i % 2 )> 0 )
                      {   ?>
                   <div class="einzelnereintrag2"  onMouseover="this.style.backgroundColor='#818181'" onMouseout="this.style.backgroundColor='#f5f5f5'">

das ist jetzt nur der ausschnitt um den es geht unterhalb davon stehen dann halt spaltenweise die daten die aus der db geholt werden und die nötigen geschweifen klammer werden geschlossen, das ganze funktioniert soweit -

jetzt zu meinem eigentlichen problem,
da nach ,,rechts'' hin viele daten kommen und ein scrollbalken existiert möchte ich, dass es eine möglichkeit gibt, die betreffende zeile (also einen kompletten datensatz) zu markieren und wenn man will wieder zu demarkieren

dazu habe ich folgendes javascript gefunden:

Code:

<script type="text/javascript">
function setStyle(obj,e)
 {
 if(e)
 {
 if(obj.id=='clicked')
 {
 obj.id='unclicked';
 resetStyle(obj,true);
 return;
 }
 obj.id='clicked';
 }
 obj.style.backgroundColor = '#818181';
 obj.style.color = '#000000';
 }
 function resetStyle(obj,e)
 {
 if(obj.id=='clicked')
 {
 return;
 }
 obj.style.backgroundColor = 'dedede';
 obj.style.color = '#000000';
 }
 </script>

und die container definitionen aus dem obigen quelltext dann so:

Code:

<div class="einzelnereintrag" onmouseover='setStyle(this,false)' onmouseout='resetStyle(this,false)' onclick='setStyle(this,true)'>

so, das problem wird relativ schnell deutlich - standartmäßig existiert natürlich die abwechselnde färbung der datensätze untereinander, aber sobald ich über einen datensatz mit der maus überfahre und wieder verlasse nimmt er natürlich die #dedede farbe an wodurch der ursprüngliche wechsel der hintergrundfarben verloren geht...

hat jemand eine idee wie ich das problem lösen könnte?
gerne auch ohne javascript...

vielen dank schonmal, bw's sind natürlich drinne

Anzeige

Murdoc · 9. August 2010

AW: on click und mouseover in If bedingungen

id's müssen immer eindeutig sein. d.h. nur ein element in der seite darf die id "clicked" oder "unclicked" haben. versuch es mit einem class-namen.

_zippo^ · 9. August 2010

AW: on click und mouseover in If bedingungen

wie ich deine antworten immer liebe =p
was meinst du mit id muss eindeutig sein, offensichtlich funktioniert das markieren und demarkieren(heißt dat so?) mit mehreren datensätzen, nur der onmouseout scheint das problem zu sein,

an welcher stelle soll ich denn mit class-namen arbeiten, meinst du innerhalb des javascriptes bei z.b.

Code:

obj.id='clicked';

das dann mit den classen namen der div container ergänzen oder wie?
ich hab kein peil von javascript, sei gnädig^^

und danke schonmal

onip · 9. August 2010

AW: on click und mouseover in If bedingungen

was murdoc meint ist, das deine function mehrere elemente mit der id=clicked vergibt,
und genau das ist das problem.
id kann nur einmal vergeben werden!

°EraZoR° · 9. August 2010

AW: on click und mouseover in If bedingungen

http://www.w3schools.com/tags/att_standard_id.asp

Das heißt, dass laut dem Standard des World Wide Web Consortiums eine ID einzigartig sein muss..
Also:
Richtig

HTML:

<div id="test">Richtig</div>
<div id="nochntest">Richtig</div>

jedoch

HTML:

<div id="test">Falsch</div>
<div id="test">Falsch</div>

ist falsch..

Du sollst ganz einfach nur anstatt die ID des Elements zu nutzen die Klasse nutzen..
Die Klasse änderst du in etwa so:

Code:

obj.className = "test";

Dann hat das Objekt die Klasse test..

MfG

_zippo^ · 10. August 2010

AW: on click und mouseover in If bedingungen

hey boys, danke nochmal für eure hilfe,
aber ich glaube ihr hattet nicht direkt verstanden was mein problem war, oder ich versteh eure erklärung nicht, eine abänderung des javascriptes mit hilfe von b-xXx (thx dude!) erbrachte jetzt den gewünschten erfolg

Code:

function setStyle(obj,e,color)
 {
 if(e)
 {
 
 if(obj.id=='clicked')
 {
 
 resetStyle(obj,true,color);
 return;
 }
 
 obj.id='clicked';
 }
 
 obj.style.backgroundColor = '#818181';
 
 obj.style.color = '#000000';
 }
 function resetStyle(obj,e,color)
 { 
 if(e)
 {
 
 if(obj.id=='clicked')
 {
 
 obj.id='unclicked';
 obj.style.backgroundColor = color;
 
 return;
 }
 }
 if(obj.id != 'clicked')
 {
 obj.style.backgroundColor = color;
 obj.style.color = '#000000';
 } 
 }

und zugriff über:

Code:

 <div class="einzelnereintrag" id="unclicked" onmouseover='setStyle(this,false,"dcdcdc")' onmouseout='resetStyle(this,false,"dcdcdc")' onclick='setStyle(this,true,"dcdcdc")' >

bzw bei dem anders gefärbten hintergrund:

Code:

 <div class="einzelnereintrag2" id="unclicked" onmouseover='setStyle(this,false,"f5f5f5")' onmouseout='resetStyle(this,false,"f5f5f5")' onclick='setStyle(this,true,"f5f5f5")' >

Breyndot-Echse · 10. August 2010

AW: on click und mouseover in If bedingungen

Weil dein Fehler nicht direkt mit deinem Problem zu tun hatte, heißt das aber trotzdem nicht, dass du ihn einfach ignorieren kannst. Außerdem ist dein Script selbst ziemlich unschön. (JavaScript nicht ausgelagert, HTML-Eventhandler, JS-onmouseover() statt CSS-:hover, ...)

test.html:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>


<head>
 <script type="text/javascript" src="test.js"></script>
 <link rel="stylesheet" type="text/css" href="test.css">
</head>


<body>
<div class="einzelnereintrag clickable">Klick mich</div>
<div class="einzelnereintrag clickable">Und mich auch</div>
<div class="einzelnereintrag">Mich nicht</div>
<div class="einzelnereintrag clickable clicked">Ich bin schon geklickt worden</div>

<p class="clickable">Mal was anderes</p>
</body>

test.js

Code:

window.onload = function()
{
 elements = document.getElementsByTagName('*');
 for (i = 0; i < elements.length; i++)
 {
 if (elements[i].className.indexOf('clickable') > -1)
 {
 elements[i].onclick = eventClick;
 }
 }
}


function eventClick()
{
 if (this.className.indexOf('clicked') > -1)
 {
 this.className = this.className.replace(/\s*clicked/,'');
 }
 else
 {
 this.className = this.className + ' clicked';
 }
}

test.css:

Code:

.einzelnereintrag {
 background:#AAAAAA;
}

.einzelnereintrag:hover {
 background:#BBBBBB;
}

.clicked {
 background:#AA0000;
}

.clicked:hover {
 background:#AA0000;
}

Nützliche Suchen

[JavaScript] Hintergrundfarbe ändern bei mouseover/out

Videos zum Themenbereich