hyperlinks koppeln für mouseover

[raimes]

moin!
nachdem ich viel gesucht und nix gefunden habe: vielleicht hat hier jemand eine idee?

ich würde gerne zwei hyperlinks, die auf das gleiche ziel führen, miteinander verbinden.
beide stehen dreamweaver-generiert in benachbarten tabellenzellen, das eine ist eine rollovergrafik, das andere ein ganz normaler link in textform.

was mir vorschwebt: onmouse auf dem textlink bewirkt gleichzeitig ein onmouse-verhalten bei der rollovergrafik und umgekehrt (heißt: rollover wird durch onmouse aktiviert und löst damit onmouse-verhalten beim textlink aus)

zum anschauen: http://www.elementmal.de/
es geht um die navigationssymbole und deren dazugehöriger, nebenstehender textfassung.

gibt es da eine schlanke, nette lösung?

 

[Maik]

Hi,

die schlankeste Lösung wäre die Grafiken als Hintergrundbilder für die Links zu definieren, und sie beim Überfahren der Links zu tauschen.

Mein CSS-Tutorial CSS-Rollover sollte dir da weiterhelfen.

 

[raimes]

moin maik
erstmal danke für die schnelle antwort!
ist deine lösung so gedacht, dass über (oder unter) die beiden bereiche (rollovergrafik und text) soetwas wie ein sensitives feld gelegt wird?
ich komme jedenfalls mit deiner lösung nicht so recht weiter, weil:
1. die rollovergrafiken sich durch die gesamte site ziehen mit unterschiedlichen hintergrundfarben,
2. die ausrichtung der grafiken und des textes exakt sein sollten (grafik deshalb in einer tabellenzelle und text angrenzend, linksbündig daneben in einer zweiten tabellenzelle).
wenn ich beides in ein grafikfeld packe, kann ich zwar das rolloverbild grafisch links platzieren, aber den text kann ich dann nur noch rechtsbündig setzen. dieser soll aber in allen fällen gleichmäßig neben dem bildchen stehen....mmmh

 

[Maik]

Vielleicht hilft dir dieser Beispiel-Code für den Navigationspunkt "Malerei" weiter?

a {
display:block;
text-decoration:none;
color:#99CC99;
}

a#malerei {
line-height:64px;
width:150px;
background:url(malerei1.gif) no-repeat;
padding-left:75px;
}

a#malerei:hover {
background:url(malerei2.gif) no-repeat;
text-decoration:underline;
color:#CCFF99;
}

<a href="#" id="malerei">bildwerke malerei</a>

In diesem Fall werden dann keine zwei Tabellenzellen mehr benötigt.

Und bitte beachte die Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank.

 

[raimes]

Guten Morgen

Vielen Dank Maik;
nach einem bißchen Basteln hat Deine Idee geklappt:
Was einwandfrei funktioniert ist das simultane Verhalten, schöne Idee!
Und auch der weiterführende Link funktioniert jetzt!

Gestalterisch gefällt mir daran bloß nicht hundertprozentig, dass das Mouseoververhalten auch dann ja schon ausgelöst wird, wenn man noch erst einen halben Zentimeter von dem Text entfernt ist (weil der Block ja durch das höhere Bild viel breiter ist als die Schrift)!
Gibt es da eine Möglichkeit?

Oder muß das Problem dann eher mit Javascripten angegangen werden?

Jedenfalls vielen Dank für den generellen Stoß in Richtung CSS!
beste Grüße