Personen auf Bild markieren

[BigRob]

Hi, ich schon wieder ;-)

Ich wollte auf einen Photo Personen markieren. Soll heißen, dass wenn man über die person mit dem Mauszeiger fährt wird der Name der Person angezeigt.

Hatte überlegt, dass man einen toten Link über das Bild setzt und den Link mit 'Name="..." ' den Personenname anzugeben. Aber leider funktioniert das nicht.

Im netz sind nur sehr aufwendige Lösungen, da es sich aber nur um ein Bild handelt wollte ich eine einfache Lösung.

[RattuS]

Ich stells mir umständlich vor, aber theoretisch kannst du das Bild in die Personen aufteilen und die einzelnen Teile dann im alt-Attribut mit den Namen betiteln.

[revold]

Ich stells mir umständlich vor, aber theoretisch kannst du das Bild in die Personen aufteilen und die einzelnen Teile dann im alt-Attribut mit den Namen betiteln.
omg ;(

…
try it wit javascript

[Pinoccio]

Suche dir eine Webseite, die soetwas hat (z. B. StudiVZ) und schau dir da an, wie sie es machen:

<div class="photo">
<div style="width: 600px;" id="PhotoContainer">
<img src="http://***.jpg" alt="" onload="this.parentNode.style.width=this.width+'px';" oncontextmenu="return false;">
<div style="position: absolute; left: 189px; top: 247px; width: 49px; height: 49px; display: none;" id="fn-area-***" class="fn-area">
<img src="http://static.pe.studivz.net/20090924-2/Img/circles.gif" alt="">
</div>
<div style="left: 194px; top: 302px; display: none;" class="fn-note">
<div class="fn-note-text">
Beschreibungstext
</div>
</div>
</div>
</div>


hth, mfg

[The_Invisible]

mittels map/area tags gehts auch -> http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

mfg

[Roi Danton]

Da es nur für ein Bild ist: Bild als Hintergrundbild oder normales Bild, und drüber andere absolut positionierte Elemente mit Größenangabe, Rahmen und Namen als Inhalt, die beim mausover sichtbar werden.

[BigRob]

das klingt gut... muss ich mal probieren.

danke soweit!

[BigRob]

Ach ich bekomms nicht hin.

Was ist da falsch:

<div id="Rahmen" style="position: absolute; visibility: hidden; text-align:left; top: 70px; left: 360px; width: 70px; height: 70px; z-index: 2;" onMouseOver="this.style.display='block'"; onMouseOut="this.style.display = 'none'";>
<div style="position: absolute; width: 60px; height: 60px; border-width:2px; border-style:solid; border-color:#7fffd4; z-index: 2;"><img src="images/blind.gif" style="position: absolute; width: 100%; height:100%;"></div>
<div style="position: absolute; top:20px;"><p><span style="font-size:30px; color:FFFFFF; font-family:chiller,Old English Text MT,Parchment; font-style:normal; text-decoration:none;">Benny</span></div>
</div>

[darph]

1. Da sitzen ein paar Semikolon falsch
2. Visibility und display sind unabhängig.

[BigRob]

<div id="Rahmen" style="position: absolute; visibility: hidden; text-align:left; border-width:2px; border-style:solid; border-color:#7fffd4; top: 70px; left: 360px; width: 70px; height: 70px; z-index: 2;" onMouseOver="this.style.visibility='visible';" onMouseOut="this.style.visibility='hidden';">
<div style="position: absolute; width: 60px; height: 60px; border-width:2px; border-style:solid; border-color:#7fffd4; z-index: 2;"><img src="images/blind.gif" style="position: absolute; width: 100%; height:100%;"></div>
<div style="position: absolute; top:20px;"><p><span style="font-size:30px; color:FFFFFF; font-family:chiller,Old English Text MT,Parchment; font-style:normal; text-decoration:none;">Benny</span></div>
</div>

funzt noch nicht...

[darph]

Benutz bitte den [html]-Tag.

[darph]

http://files.darph.net/hotchick.html

Mit der Maus über das Gesicht gehen.

[BigRob]

Danke erstmal. Jetzt funktionierts.

[captainmarlon]

es handelt sich hierbei um freie scripts