Javascript Function() eine $Id übergeben - MouseOver nur beim ersten Result!

[DualityMind]

Hallo Computerbase

Habe wieder ein Problem mit dem Umgang von Javascript! Habe mich bisher ein wenig eingearbeitet und verstehe es aber immer noch nicht so ganz :-(!

Zum Problem hier ist mal der erste Code:

 <script>
  function mouseOver(id) {
     document.getElementById("sektion_glow").style.color = "yellow";
     document.getElementById("sektion_glow").style.fontSize = "15px";
     document.getElementById("sektion_glow").style.background = "radial-gradient(ellipse at center, rgba(0, 0, 0, 0.20) 150%, rgba(255, 255, 255, 0.30) 150%, rgba(255, 255, 255, 0.40) 150%)";

document.getElementById("sektion_sektion").style.color = "yellow";
     document.getElementById("sektion_sektion").style.fontSize = "14px";
     document.getElementById("sektion_sektion").style.background = "radial-gradient(ellipse at center, rgba(0, 0, 0, 0.20) 150%, rgba(255, 255, 255, 0.30) 150%, rgba(255, 255, 255, 0.40) 150%)";

   }
   function mouseOut(id) {
     document.getElementById("sektion_glow").style.color = "white";
       document.getElementById("sektion_glow").style.fontSize = "14px";
         document.getElementById("sektion_glow").style.background = "";
      
          document.getElementById("sektion_sektion").style.color = "yellow";
     document.getElementById("sektion_sektion").style.fontSize = "13px";
     document.getElementById("sektion_sektion").style.background = "";    
   }
</script>

Das ist der Function() Code von einem MouseOver Ereignis!

Das Ereignis wird ausgelöst, sobald man mit der Maus über ein Listen Bild klickt ausgeführt:

<img src=\"xxx/thumbnail/{$row['picture_id']}.{$row['ext']}\" align=center valign=middle height=\"120\" width=200 class=\"blackbox myPic\" border=\"0\" [COLOR=rgb(184, 49, 47)]onmouseover=mouseOver(); onmouseout=mouseOut();[/COLOR] ></a>

und das Ziel ist der Titel von der Datei welche dann "Gelb" Leuchtet:

<div class=xxx-xxx ><span class='lilitaone' style=width:200px;font-size:14px;color:white; [COLOR=rgb(184, 49, 47)]id='sektion_glow'[/COLOR]>

Das Problem ist nun, dass wenn die index.php ladet zeigt es alle Dateien mit Titel,Beschreibung und das Bild!

Das ganze funktioniert ja auch, ABER leider nur beim ersten Artikel leuchtet es Gelb im TITEL! Wenn ich auf Artikel 2 scrolle, sollte es den Titel im Artikel 2 "GELB" Leuchten, aber es leuchtet immer nur beim ersten Artikel der TItel Gelb :-( !!!

Meiner Meinung nach, muss man wahrscheinlich eine ID vergeben, welche für jeden Artikel eine andere ist. z.B. 1,2,3 etc...!

ABER wie kann ich das machen, damit es jedem Artikel einen andere ID vergibt. Gibt es dazu einen Befehl ?

Ich habe bereits versucht mit onmouseover=mouseOver($ID) und dann beim Javascript <Function($ID)>
Das scheint aber nicht zu funktionieren.

Weiss jemand von euch, wie man das am einfachsten machen kann ohne grossen Aufwand ???

Wie immer hoffe ich, dass ihr verstanden habt, was ich damit meine. Danke auch wenn niemand Antwortet !

LG
DualityMind

 

[Seby007]

Eine ID kannst du nur ein einziges Mal pro Seite vergeben. Was du brauchst sind Klassen, d.h. getElementByClass()

 

[pcBauer]

Wie mein Vorredner sagt sind IDs eindeutig und daher greift sich das getElementById eben nur das erste Element mit der ID => CSS Klassen nutzen.

Haben die Elemente ("sektion_glow" und "sektion_sektion") einen gemeinsamen Parent auf den du horchen könntest auf einen Mouse-Over?
Dann könntest du das rein über CSS lösen, wenn "sektion_sektion" direkt neben "sektion_glow" ist (ohne Parent) übrigens auch. Die der fragliche CSS selektor wäre ":hover".

Würde dir zusätzlich dazu raten, die Styles alle ins CSS zu ziehen, das ist einfach sauber getrennt dann.

 

[ger.ruler]

Ich kann mich meinem vorredner auch nur anschließen:
was am einfachsten für dich wäre, ist sowas hier :

.lilitaone:hover{
color: --deine-color;
font-size: --deine-fontsize;
background: --dein-background
}

ID ist unique.
Class hilft dir bei deinen geplanten Element-Styles.
Die Formatierung einfacher Events (sog. Pseudo-Klassen) wie hover, active, visited, valid etc solltest du jedoch direkt im CSS vornehmen. Das spart nicht nur V-JS Code sondern auch Nerven, wie in deinem obigen Beispiel Die Notwendigkeit, per JS ganze Styles anzupassen, beschränkt sich oftmals auf das Toggeln oder ersetzen vorhandener Klassen. Jedoch ist auch hier das Template im CSS.

Edit:
Ansonsten zeig mir doch mal die Verschachtelung von img und div, wenn du unbedingt den Effekt auf dem <span> beim Hovern des <img> haben möchtest. Dann kann man bessere Tips geben.