onmousover über bild ändert linkfarbe

[fabs]

hallo forum

folgendes problem:

ich habe ein menue mit vier punkten und nebenstehend die gleiche zahl bilder.

jeweils ein menuepunkt und ein bild verweisen auf den gleichen link
wenn ich über die menuepunkte mit der maus fahre ändert sich ihre farbe der schrift,das ist gut so

mein ziel ist es das gleiche zu erzeugen wenn ich über ein bild fahre.
es soll sich also gleichzeitig bei dem zugehörigen link die farbe ändern.
das bild kann so bleiben wie es ist.

[Patrick Schröder]

Hallo fabs,

allgemein ist es praktisch, wenn man einen Quelltext-Auszug oder einen Link mitliefert.
Ich denke du suchst sinngemäß nach sowas wie

itsID = getElementById('idname');
itsID.className='cssClassHover'

Dennoch macht mir die Struktur doch mehr Grübeleien, ob das 1. so überhaupt Sinn macht was du da vorhast und 2. ob man das technisch nicht eigentlich sinnvoller lösen kann, indem man das Menü sauberer baut... (sone leise Befürchtung)

LG Patrick

[fabs]

hi

okay hier ist der link

http://bohnenpfluecker.de/duo/deutsch/projekte.php

es geht darum die bilder mit dem menuetiteln in verbindung zu bringen
und wenn du im inhalt bist kannst du dich mit dem normalen textmenue
links durchklicken

[apsel]

Om nah hoo pez nyeetz,

Deine CSS-Datei enthält auch Syntax-Fehler z.B. Unterstriche.

Matthias

[fabs]

ja sicher

das ist noch im ich-arbeite-daran-modus

ein element ___falsch zu schreiben ist die schnellste methode
um zu sehen ob sie weg muss oder nicht

[Patrick Schröder]

fabs...

man sollte sich allgemein nicht daran orientieren, was falsch ist, sondern daran, das Richtige richtig zu tun!

Im Umkehrschluss: Mach es gleich sauber und richtig, dann fallen viele Fehlersuchen von alleine weg! ... auch wenns manchmal einen Moment länger dauert.

[Patrick Schröder]

Ja, wie schon erwähnt, ists teils das, was ich vermutet hatte. Die Lösung des Ganzen habe ich bereits geschrieben gehabt... Nichtsdestotrotz möchte ich dir für deinen Quelltext noch ein, zwei Tipps geben...

• Schreibe XHTML
• Schreibe standardkonformen Code (z.B. keine Tags, die nicht notwendig sind (z.B. target="_prarent"), dafür aber die, die unbedingt notwendig sind, wie z.B. alt und title in den Bildern!)
• Besorge dir Entwicklertools für deinen Browser usw. um Fehler schneller zu entdecken, z.B. die Webdeveloper-Toolbar für den Firefox.

Die Menüs muss man optisch nicht unbedingt vereinen... kann man, muss man aber nciht. Viel wichtiger ist, dass die Seite sauber "beschrieben" ist, was du durch HTML nunmal tust. Es ist eine Seitenbeschreibung, wo die Tags nicht nur optisch funktionieren müssen, sondern auch technisch.

Dein Menü ist z.B. eine Aufzählung, sprich eine <ul> und sollte auch so "hergestellt" werden. ;-)

Viel Erfolg beim Lernen!

[fabs]

hi patrick

du hast recht da sind noch eine menge fehler drinnen
und unsaubere tricksereien (siehe die liste mit den links)

aber wie binde ich denn nun deinen tip richtig ein, dass es so funktioniert
wie ich es beschrieben hatte

ich find hier auf der seite leider keine infos zu dem befehl

[Patrick Schröder]

Hey fabs,

es wäre ein Leichtes dir den Code einfach zu erstellen, doch das ist nicht im Sinne des Erfinders. Ein Forum soll ja untersützen und Hilfen anbieten und nicht einem die Arbeit abnehmen und "onmouseover" hast du ja selbst schon genannt.

im simpelsten Sinne

<ul>
  <li><a href="" id="idname" class="normal">Titel</a></li>
</ul>

<a href="" onmouseover="getElementById('idname').className('hoverClass')"><img src="" ... /></a>

Buchtipp: CSS-Praxis von Kai Laborenz, Galieo Computing

Und dann Verzicht auf unwichtige Spielereien ;-)

LG Patrick

[fabs]

hi

ja dank dir auch

das werde ich ausprobieren, obwohl mir die einfache variante von martin auch gefällt

danke für die lesetips, ich lerne weiter

[Der Martin]

Hallo,

• Schreibe standardkonformen Code (z.B. keine Tags, die nicht notwendig sind (z.B. target="_prarent"), dafür aber die, die unbedingt notwendig sind, wie z.B. alt und title in den Bildern!)

ein title-Attribut bei Bildern ist "nice to have", aber nicht notwendig.
Mitunter ist es empfehlenswert, etwa wenn man die Unart des IE kompensieren will, den Inhalt des alt-Attributs als Tooltip anzuzeigen.

So long,
 Martin

[Patrick Schröder]

Hallo Martin,

der XHTML-Standard verlangt das title-Attribut bei Bildern ;-)

Bzgl. der Unart gebe ich dir dennoch recht...

[Der Martin]

Hallo,

der XHTML-Standard verlangt das title-Attribut bei Bildern ;-)

wer sagt das? Die DTD jedenfalls nicht, nicht einmal in Strict:

<!ELEMENT img EMPTY>
<!ATTLIST img
   %attrs;
   src         %URI;          #REQUIRED
   alt         %Text;         #REQUIRED
   longdesc    %URI;          #IMPLIED
   height      %Length;       #IMPLIED
   width       %Length;       #IMPLIED
   usemap      %URI;          #IMPLIED
   ismap       (ismap)        #IMPLIED

Nur src und alt sind required, also erforderlich.
Dagegen ist title ein Universalattribut, das in allen Elementen notiert werden darf, aber nicht muss:

<!-- core attributes common to most elements
   id       document-wide unique id
   class    space separated list of classes
   style    associated style info
   title    advisory title/amplification
-->
<!ENTITY % coreattrs
  "id          ID             #IMPLIED
   class       CDATA          #IMPLIED
   style       %StyleSheet;   #IMPLIED
   title       %Text;         #IMPLIED"

Bzgl. der Unart gebe ich dir dennoch recht...

Und jetzt hoffentlich auch bezüglich der nicht gegebenen Notwendigkeit.

So long,
 Martin

[Der Martin]

Hi,

ich habe ein menue mit vier punkten und nebenstehend die gleiche zahl bilder.
jeweils ein menuepunkt und ein bild verweisen auf den gleichen link

warum sind sie dann getrennt?

mein ziel ist es das gleiche zu erzeugen wenn ich über ein bild fahre.
es soll sich also gleichzeitig bei dem zugehörigen link die farbe ändern.

Das erste, was mir dazu einfällt: Verpacke das Bild *in* den Link:

<a href="#">Linktext<img src="..." alt="...></a>

Und dann positionierst du das Bild mit CSS "aus dem Link heraus".
Somit kommst du auch ohne Javascript aus, für den Effekt reicht :hover.

So long,
 Martin

[fabs]

<a href="#">Linktext<img src="..." alt="...></a>

Und dann positionierst du das Bild mit CSS "aus dem Link heraus".

danke  das ist eine schöne simple methode
ich kann mir vorstellen dass das nicht die sauberste variante ist
aber ich kann sie wenigstens selber lösen
bis ich mich in die weiteren tiefen der technik wage

[Patrick Schröder]

technisch gesehen ist es zwar nicht unsauber, aber aufgrund deines Layouts auch wieder arg unschön. Eigentlich würde es völlig reichen, wenn die bedein einzelnen Elemente einzeln verlinkt werden. Wenn der Nutzer auf das Bild schaut und guckt, ob man dort draufklicken kann, wird er von dem hover-Effekt links im Menü vermutlich eher leicht irritiert sein, als dass es ihm intensiv nutzen wird.

Man könnte den Titel auf einfach ins Bild schreiben und den alt- & title-Text entsprechend benennen...