Verlinkungen in einem Bild

[xyzutschixyz]

Hallo zusammen.
Ich habe folgendes Problem:
Ich habe ein JPEG-Bild, worauf mehrere Personen abgebildet sind. Ich möchte jeder Person am Kopf einen farbigen Rahmen geben. Klickt man auf diese Box mit dem Rahmen, sollen dann nähere Informationen zur Person erscheinen. Die Frage ist jetzt nur: Wie bekomme ich diese farbigen Rahmen hin?
Mit einer Imagemap gehts schlecht, da man areas keinen farbigen Rahmen zuweisen kann. Hat noch jemand eine andere Idee.

Übrigens meine Idee gibt es auch in großen Portalen, wie wer-kennt-wen.de oder schuelervz.net

Liebe Grüße
xyzutschixyz

 

[ChrisvA]

AW: Verlinkungen in einem Bild

Der Link nur an bestimmten Stellen im Bild ist kein Problem. ()
Nun zu dem Rahmen: Erstelle erst einmal einen Rahmen und speichere ihn in einem Format ab, welches transparente Flächen unterstützt. z.B. gif. Nun kannst du mit CSS und der absoluten Positionierung erreichen, dass das div mit dem Rahmen genau auf dem Gesicht (oder wo auch sonst) sitzt.

 

[sokie]

AW: Verlinkungen in einem Bild

Stimmt, möglicherweise ist die Imagemap in dem Fall nicht das ultimative ding.
eine interessante löösung könnte so aussehen, dass du einen Div erstellst, der das Bild als hintergrund hat. Dieses Div bekommt ein position:relative;
darein legst du deine links zu den infos.
nun kannst du die links mit klassen oder IDs belegen als display:block definieren und mit height,width und border(-style,-color,-width) färben und per absoluter positionierung anpassen.
Die Sache mit den absolut positionierten a elementen hat sogar den vorteil, dass du die Rahmen bei :hover sogar noch mit einem Effekt belegen kannst.
beisp

<div id="bildhalter">
  <a id="hugo" title="informationen über Hugo" href="hugoinfo.htm">&nbsp;</a>
  <a id="frieda" title="informationen über Frieda" href="friedainfo.htm">&nbsp;</a>
  <a id="martha" title="informationen über Martha"  href="marthainfo.htm">&nbsp;</a>
</div>

css

#bildhalter{
    position:relative;
    height:512px;
    width:768px;
    background: url(826006.jpg) no-repeat;
}
#bildhalter a{
    position: absolute;
    border: red 3px solid;
    display: block;
    height: 80px;
    width: 80px;
    text-decoration:none;
}
a#hugo{
    top: 8px;
    left: 300px;
}
a#frieda{
    top: 400px;
    left: 320px;
}
a#martha{
    top: 400px;
    left: 200px;
}
#bildhalter a:hover{
    border-color: yellow;
}

so siehts aus:

ups, ist ja ein tutorial geworden...
(im nächsten Teil dann die informationen per javascript ;-) )

 

[xyzutschixyz]

AW: Verlinkungen in einem Bild

danke schön. jetzt weiß ich was ich zu tun habe

 

[pedro2206]

AW: Verlinkungen in einem Bild

Vielen Dank für den Tipp, es hilft mir auch weiter.

 

[mahouni]

AW: Verlinkungen in einem Bild

cool sowas habe ich auch gesucht. DANKE

 

[fischeversenker]

AW: Verlinkungen in einem Bild

Brachte mich einen Schritt näher die ganze "position:"-Story zu verstehen. Vielen Dank!