funzt style="color:...;" bei <area ... > wirklich nicht ? :(

[pinguini]

würde gern auf einem Bild farbige Pfeile ergänzen und diese verlinken. <area ...> wäre dafür ja ideal, wenn man die noch farbig hinbekäme ...

geht das wirklich nicht ?

Danke, pingu

[Jörg]

Poste doch mal etwas mehr Code dazu...
dann kann man sich das vielleicht besser vorstellen, was Du da vorhast.

[pingu]

Poste doch mal etwas mehr Code dazu...

<img src="SU_4OG_060824.jpg" width="1260" height="891" border="0" usemap="#Map" style="color:ffcccc;">
<map name="Map">
  <area shape="poly" coords="422,513,375,478,394,534,400,511" href="DSCF0182.JPG" style="color:ffcccc; border="000000 solid 1px;""></map>

das <area> ergibt einen Pfeil ...

[MudGuard]

Hi,

<area shape="poly" coords="422,513,375,478,394,534,400,511" href="DSCF0182.JPG" style="color:ffcccc; border="000000 solid 1px;""></map>

Mal abgesehen davon, daß da einige Fehler im Code sind (bei color fehlt ein #, bei border sind "" zuviel, das = müßte ein : sein, bei 000000 fehlt #):

color gilt für die Textfarbe im Element. area enthält keinen Text. Worauf sollte die Farbe wirken?

Aber auch background-color oder border wirkt nicht.
Weil das area-Element gar nicht dargestellt wird, es teilt dem Browser nur mit, wo die verlinkten Bereiche sind.

cu,
Andreas

[pingu]

Mal abgesehen davon, daß da einige Fehler im Code sind (bei color fehlt ein #, bei border sind "" zuviel, das = müßte ein : sein, bei 000000 fehlt #):

das waren Tippfehler hier.

Jemand ne andere Idee ?

[MudGuard]

Hi,

Mal abgesehen davon, daß da einige Fehler im Code sind (bei color fehlt ein #, bei border sind "" zuviel, das = müßte ein : sein, bei 000000 fehlt #):
das waren Tippfehler hier.
Jemand ne andere Idee ?

Code nicht per Abtippen, sondern per Copy/Paste hier reinbringen.

cu,
Andreas

[pingu]

Code nicht per Abtippen, sondern per Copy/Paste hier reinbringen.

hab ich doch. hatte ich inzwischen geändert, funzt aber trotzdem nicht

[MudGuard]

Hi,

funzt aber trotzdem nicht

Welchen Teil von "wirkt nicht. Weil das area-Element gar nicht dargestellt wird, es teilt dem Browser nur mit, wo die verlinkten Bereiche sind." hast Du nicht verstanden?

cu,
Andreas

[pingu]

Welchen Teil von "wirkt nicht. Weil das area-Element gar nicht dargestellt wird, es teilt dem Browser nur mit, wo die verlinkten Bereiche sind." hast Du nicht verstanden?

ich habe es verstanden. ich bin schon einen Schritt weiter: ich suche nach einer möglichst einfachen Alternative. Was davon hast DU nicht verstzanden ?

[Gernot Back]

Hallo pingu,

ich habe es verstanden. ich bin schon einen Schritt weiter: ich suche nach einer möglichst einfachen Alternative.

Selbst wenn man die in Pfeilform verlinkten Bereiche durch Einfügung eines Attributs in einem Area-Element bei zugeordneten Bildern farblich hervorheben könnte, wäre das bei Polygonen und Kreisen eine sehr pixelige Sache, wie man leicht an der bei Klick auf diese Bereiche erscheinenden Strichel-Kontur sehen kann.

Das Einfachste und Sauberste ist, wenn du dein Bild mit einem Grafikprogramm bearbeitest und die geglätteten Konturen der hinzugefügten Pfeile in den Koordinaten der AREA-Elemente nachempfindest.

Gruß Gernot

[Gernot Back]

Hallo pinguini,

wieso sollte das "funzen"?

würde gern auf einem Bild farbige Pfeile ergänzen und diese verlinken. <area ...> wäre dafür ja ideal, wenn man die noch farbig hinbekäme ...

Dann mach sie doch farbig! Wenn du allerdings glaubst, du könntest mit CSS die Farbe nur des jeweiligen Pfeils austauschen, über den du gerade mit der Maus fährst, dann verwechselst du das Bild mit seiner Map, so als ob du an Voodoo glaubtest:
Dadurch, dass du einen heimatlichen Stadtplan mit Tinte bekleckerst, wird die entsprechende Stelle der Stadt, in der du wohnst ja auch nicht blau.

Wenn du das Bild verändern möchtest, dann musst du schon das ganze Bild selbst verändern und nicht seine Map. Deine Map kann aber der Schalter für einen Austausch des ganzen Bildes selbst sein. Auch den Maus-Cursor, der über deinem Bild erscheint, kannst du so austauschen, beides allerdings nur mit JavaScript.

Gruß Gernot

[pingu]

Dann mach sie doch farbig! Wenn du allerdings glaubst, du könntest mit CSS die Farbe nur des jeweiligen Pfeils austauschen, über den du gerade mit der Maus fährst, ...

ich will nicht, dass sie erst farbig werden, wenn ich darüber fahre, sondern sie sollen einfach farbig sein. sie mit einem "Map" über das Bild zu bappen ist aber nun mal einfacher als für jeden Pfeil ein neues Bild. Oder gar die Pfeile gleich auf dem Bild einzufügen ...

Ich will aber nicht wissen, was NICHT geht, sondern: WAS geht. Vielleicht hat ja jemand noch ne anderte Idee ? Müssen ja nicht Maps sein. Aber irgend was ähnlich einfach zu handhabenmdes ...

Pingu

[Gernot Back]

Hallo pingu,

Ich will aber nicht wissen, was NICHT geht, sondern: WAS geht. Vielleicht hat ja jemand noch ne anderte Idee ? Müssen ja nicht Maps sein. Aber irgend was ähnlich einfach zu handhabenmdes ...

Du könntest deine Map einem blinden Pixel zuordnen, den du passgenau absolut positioniert und in entsprechenden Maßen für width und height über das Bild legst, um das es dir eigentlich geht.

Diesem transparenten Bild verpasst du den farbigen Pfeil als nicht-wiederholte Hintergrundgrafik und eine Hintergrund-Position, die im Ruhezustand im nicht-sichtbaren negativen Off des transparenten Bildes liegt.

Beim Überfahren der Areas mit der Maus übergibst du die ersten beiden Koordinaten der entsprechenden Area als Hintergrund-Position für deinen Pfeil. OnMouseout schickst du diesen wieder ins nicht- sichtbare "Off". Dafür musst du die Style-Eigenschaft des aufgeblähten transparenten Pixels, über seine ID (getElementById) ansprechen.

Gruß Gernot

[pinguini]

Diesem transparenten Bild verpasst du den farbigen Pfeil als nicht-wiederholte Hintergrundgrafik und eine Hintergrund-Position, die im Ruhezustand im nicht-sichtbaren negativen Off des transparenten Bildes liegt.

würd dann aber doch wieder darauf hinauslaufen, für jeden Pfeil ein extra Bild (als Hintergrund) zu haben. Ich will VIELE Pfeile, die in verschiedenen Richtungen zeigen an verschiedenen Stellen. Und die dann verlinken. Nix Mouse Over. Die können immer alle zu sehen sein. Ich wollte es mir aber einfacher machen als mit vielen Pfeil- Bildern ...

[Axel Richter]

Hallo,

würde gern auf einem Bild farbige Pfeile ergänzen und diese verlinken. <area ...> wäre dafür ja ideal, wenn man die noch farbig hinbekäme ...

Du meinst, Du willst im AREA-Element mit dem Attribut shape einen Pfeil als Polygon beschreiben und diesem dann per CSS background-color geben?

geht das wirklich nicht ?

Nein, das geht nicht. AREA-Elemente werden nicht sichtbar gerendert, sondern beschreiben eben nur Bereiche auf dem Bild.

Du könntest Deine Pfeil-Links als A-Elemente absolut auf einem Element positionieren, welches als Hintergrundbild Dein Bild zeigt, auf welchem Du die Pfeile anbringen willst.

Beispiel:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
#linkImage { position:relative; width:200px; height:200px; background-image:url("Beispiel.jpg"); }  
#linkImage a { background-color:#FFFF00; background-image:url("pfeil.gif"); position:absolute; width:20px; height:20px; display:block; }  
#linkImage a span { display:none }  
#linkImage a#ziel1 { top:10px; left:10px; }  
#linkImage a#ziel2 { top:90px; left:90px; }  
#linkImage a#ziel3 { top:170px; left:170px; }  
</style>  
</head>  
<body>  
<h1>Test</h1>  
<div id="linkImage">  
 <a href="ziel1.html" id="ziel1"><span>-&gt; ziel1.htm</span></a>  
 <a href="ziel2.html" id="ziel2"><span>-&gt; ziel2.htm</span></a>  
 <a href="ziel3.html" id="ziel3"><span>-&gt; ziel3.htm</span></a>  
</div>  
</body>  
</html>  

viele Grüße

Axel

[Jörg]

Sieh Dir das hier mal an: http://www.moryson.net/eintrag.cfm?eid=8

Als Klickbild nimmst Du (D)einen Pfeil und kannst, wenn Bedarf, sogar noch einen Text mit angeben.