Verlinkte Grafiken überlappen

  • Hallo,


    ich möchte einfach gesagt Grafiken als Links nutzen.
    Einfach einen a Tag mit Hintergrundbild und Maßen der Grafik, eigentlich kein Problem.
    Das Problem ist, dass ich mehrere Grafiken habe, die nicht rechteckig sind.
    Da die Grafiken mit PS erstellt wurden und es mehrere gibt, habe ich rechteckige Slices erstellt.
    Die Grafiken sollen nebeneinander positioniert werden, daher überlappen sich die nicht sichtbaren Bereiche, und beim Klicken an den Rändern von Link A landet man deswegen auf Link B.


    Zum besseren Verständnis mal eine Skizze:



    Im schwarzen gestrichelten Rechteck ist meine nicht rechteckige Grafik. Da ich in CSS ja nur rechteckige Elemente mit width und height definieren kann, belegt die Grafik für CSS den Bereich des gestrichelten rechteckigen Kastens.
    Der gesamte gestrichelte Kasten ist also jetzt auf Seite A verlinkt.
    Der rote Kasten verlinkt auf Seite B. Wenn man sich jetzt mit der Maus im rot gepunkteten Bereich befindet wird auf Seite A verlinkt, obwohl man im sichtbaren Kasten von B ist und daher eigentlich auf B verlinkt werden müsste.


    Wie kann ich das beheben? Ich kann ja nicht angeben dass die Grafik nicht rechteckig ist..

  • Ich würde aber gerne auf die Einzelgrafiken Hover-Effekte anwenden, also z.B. beim Hovern die Einzelgrafik um ein paar Pixel verschieben.
    Mit der Imagemap kann ich dann aber nur die ganze Grafik verschieben oder?
    Das Bild wird ja dann als ganzes Eingebunden und ich kann nur die Positionen der Links verändern und die ganze Grafik mit beiden Buttons verschieben.
    Das ist natürlich sinnlos, der Hover-Effekt soll für den Nutzer ja eine gewisse Bestätigung sein die zeigt, wo er hinkommt wenn er jetzt klickt.