nicht angemeldet
Styles dynamisch ändern
Guten Abend!
Unser Problem ist folgendes:
Wir haben für die Navigation eine Landkarten-Imagemap erstellt. Jetzt möchte der Grafiker gerne, daß die Ortsnamen in der Karte, wie man es von Textlinks kennt, bei Überfahren des sensiblen Bereichs ihre Farbe ändern. Also habe ich die Ortsnamen in eigene <div> mit eigenen ids gepackt, absolut an die entsprechenden Stellen positioniert. Wenn die Maus direkt über dem Textlink ist, ändert dieser auch seine Farbe, wie im Style Sheet vorgegeben. Nun ist aber der entsprechende Bereich der map viel größer als der Textlink (und leider nicht rechteckig); meine Versuche, den <areas> per mouseover eine Farbänderung des Textlonks beizubiegen, sind bisher fehlgeschlagen.
Hier ein Auszug aus dem Quelltext:
<div id="title_sieben"><a href="phase07.html">Phase VII</a></div>
<img src="../gfx/Leitprofil2.jpg" width="200" height="764" border="0" usemap="#Leitprofil2_Map">
<map name="Leitprofil2_Map">
<area shape="rect" coords="136,4,189,106" href="phase07.html"
onmouseover="document.getElementById('title_sieben').style.color = #ff0000;">
</map>
Dieser Code erzeugt im IE folgende Meldung:
Scriptfehler
Zeile:25
Zeichen:55
Ungültiges Zeichen
Code:0
das entsprechende Zeichen wäre das "t" in style??!!
Wer kann mir hier helfen? Ist der gewünschte Effekt überhaupt zu erzielen? Braucht übrigens nur im IE zu funktionieren
Dank im Voraus
-
Hi,
<div id="title_sieben"><a href="phase07.html">Phase VII</a></div>
<img src="../gfx/Leitprofil2.jpg" width="200" height="764" border="0" usemap="#Leitprofil2_Map">
<map name="Leitprofil2_Map"><area shape="rect" coords="136,4,189,106" href="phase07.html"
onmouseover="document.getElementById('title_sieben').style.color = #ff0000;">...style.color = '#ff0000';">
Dieser Code erzeugt im IE folgende Meldung:
Scriptfehler
Zeile:25
Zeichen:55
Ungültiges Zeichen
Code:0das entsprechende Zeichen wäre das "t" in style??!!
Sicher? Vermutlich eine Zeile daneben, der IE zählt ab 0...
Ach ja, den onmouseout zum Rückfärben nicht vergessen...
Andreas-
Danke erst einmal; zumindest die Fehlermeldung ist weg. Aber: leider ändert sich die Farbe des Textlinks nicht. Ich habe es auch schon versucht mit
onmouseover="document.getElementById('title_sieben').style.alinkColor = '#ff0000';"
aber auch das funktioniert nicht.-
Hallo,
onmouseover="document.getElementById('title_sieben').style.alinkColor = '#ff0000';"
Das kann so gar nicht klappen, weil du gar kein a-Element hast, das title_sieben heißt, sondern ein div-Element, das ja keine style-Eigenschaft alinkColor kennt. Also passiert nix. Wenn sich die Farbe vom a ändern soll, muesst ihr das auch ansprechen.
Wenn eure divs wirklich immer so aussehen:
<div id="titel_sieben"><a href="blabla.html">verweistext</a></div>
^
kein Leerzeichen oder Zeilenumbruch
kommt ihr an das a mit der Eigenschaft firstChild dran.Anbei Beispielcode:
<html>
<head>
<style type="text/css">
a.off:link, a.off:active, a.off:visited, a.off:hover {color:#ffff00}
a.on:link, a.on:active, a.on:visited, a.on:hover {color:#ff0000}
</style>
</head>
<body>
<div id="t7"><a class="off" href="blabla.html">Link</a></div>
<div onmouseover="document.getElementById('t7').firstChild.className='on'"
onmouseout="document.getElementById('t7').firstChild.className='off'">
an/aus</div>
</body>
</html>Es wäre in meinen Augen ratsam, sich dafür eine Funktion zu schreiben, um das ewige document.getElementById() zu sparen.
Liebe Grüße, Uschi
-
-
-
Hallo,
ich denke, das problem liegt in dieser zeile, fehlen einfache Gänsebeine um die Farbangabe.
<area shape="rect" coords="136,4,189,106" href="phase07.html"
onmouseover="document.getElementById('title_sieben').style.color = #ff0000;">Ändern zu:
<area shape="rect" coords="136,4,189,106" href="phase07.html"
onmouseover="document.getElementById('title_sieben').style.color = '#ff0000';">gruß, uschi
-
Hallo zurück!
Die Fehlermeldung erscheint jetzt nicht mehr, was ja schon mal ein Fortschritt ist. Der gewünschte Effekt aber leider auch nicht: der Textlink bleibt schwarz...
Gruß, Jochen
-
Hi,
Die Fehlermeldung erscheint jetzt nicht mehr, was ja schon mal ein Fortschritt ist. Der gewünschte Effekt aber leider auch nicht: der Textlink bleibt schwarz...
Klar, a erbt die Farbe nicht von div.
Also pack die id in den Anker, dann sollte er sich umfärben.Andreas
-
Hi,
Klar, a erbt die Farbe nicht von div.
Also pack die id in den Anker, dann sollte er sich umfärben.Andreas
Das hatte ich schon einmal und habe es gerade noch einmal, leider ohne Erfolg, ausprobiert. Keine Umfärbung weit und breit
Jochen
-
-
-