✔ Bei Mousehover -> Popup

Status
Nicht offen für weitere Antworten.
U

UncleB

Mitglied
Tag zusammen,
Ich bin gerade dabei die Website meines Fussballvereins neu zu gestalten,
Da dürfen natürlich "Playprofiles" nicht fehlen. Und da dacht ich mir es wär ja super einfach ein Mannschaftsfoto rein zu machen, und wenn man mit der Maus über einen Spiele fährt das zB rechts unten ein fenster erscheint mit dessen daten... ohne klick? Is das mit CSS machbar oder muss ich da auf Java zurück greifen?
 
UncleB hat gesagt.:
nur noch den download link finden :)
Zum Vergrößern anklicken....
Einfach einen Blick in den Seitenquelltext werfen - darin findest du alles, was du benötigst ;)

//edit: sicher ist sicher, damit du gleich loslegen kannst ;)

Code: 
<style type="text/css">

#imap {display:block; width:300px; height:210px; background:url(masters/back.jpg) no-repeat; position:relative; margin:10px 0 10px 75px;}

#imap a#painting {display:block; width:300px; height:0; padding-top:210px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(masters/small.jpg) no-repeat 300px 210px; cursor:default;}
* html #imap a#painting {height:210px; he\ight:0;}

#imap a#painting:hover {background-position: 0 0; z-index:10;}

#imap dd {position:absolute; padding:0; margin:0;}
#imap #man {left:10px; top:50px; z-index:20;}
#imap #donkey {left:120px; top:80px; z-index:20;}
#imap #child {left:190px; top:20px; z-index:20;}

#imap a#link_man {display:block; width:58px; height:58px; text-decoration:none; z-index:20;}
#imap a#link_donkey {display:block; width:58px; height:68px; text-decoration:none; z-index:20;}
#imap a#link_child {display:block; width:48px; height:88px; text-decoration:none; z-index:20;}

#imap a em {display:none;}

#imap a span, #imap a:visited span {display:none;}

#imap a#link_man:hover, #imap a#link_donkey:hover, #imap a#link_child:hover {border:1px solid #fc0;}

#imap a:hover span {position:absolute; display:block; color:#000; width:330px; height:270px; line-height:1.8em; font-size:0.9em; text-align:justify;}

#imap a#link_man:hover span {left:310px; top:-50px;}
#imap a#link_man:hover em {position:absolute; display:block; left:60px; top:30px; width:250px; height:1px; overflow:hidden; font-size:1px; background:#f00;}
#imap a#link_donkey:hover span {left:200px; top:-80px;}
#imap a#link_donkey:hover em {position:absolute; display:block; left:60px; top:35px; width:140px; height:1px; overflow:hidden; font-size:1px; background:#f00;}
#imap a#link_child:hover span {left:130px; top:-20px;}
#imap a#link_child:hover em {position:absolute; display:block; left:50px; top:45px; width:80px; height:1px; overflow:hidden; font-size:1px; background:#f00;}

#imap a:hover span img {float:left; margin-right:1em; margin-bottom:0.5em; border:1px solid #000;}

#imap a span:first-line {font-weight:bold; font-style:italic;}
#info h3 {margin:0 0 0 75px; font-size:1.2em; font-weight:normal; font-family:georgia, "times new roman", serif; letter-spacing:0.1em; padding-bottom:5px; border-bottom:1px solid #aaa; width:650px;}
#info .para {width:300px; margin:0 0 0 75px;}


</style>
Code: 
<dl id="imap">
<dt><a id="painting" href="#nogo" title="Old Master">An Old Master</a></dt>
<dd id="man"><a id="link_man" title="Old Man" href="#nogo"><em></em><span><img src="masters/man.jpg" alt="Old Man - close-up" title="Old Man - close-up" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nonummy pede vitae lectus. In sagittis, justo quis auctor adipiscing, massa sapien lacinia ipsum, at sollicitudin est justo sed orci. Phasellus quam. Duis nec lorem quis erat feugiat ultricies. Pellentesque quis purus eu massa lobortis pulvinar. Nullam sed quam vel nisi. Fusce ultricies volutpat sem. Suspendisse ac lorem sit amet est condimentum scelerisque.</span></a></dd>
<dd id="donkey"><a id="link_donkey" title="Donkey" href="#nogo"><em></em><span><img src="masters/donkey.jpg" alt="The Donkey - close-up" title="The Donkey - close-up" />Cras pulvinar nisl a magna. Vestibulum turpis. Maecenas dignissim, libero id pulvinar luctus, lacus augue ullamcorper quam, at viverra orci tortor eget velit. Suspendisse potenti. Duis pharetra, tortor quis consectetuer ornare, odio ipsum tempor risus, sed convallis velit nunc vel orci. Maecenas facilisis ante ac urna.</span></a></dd>
<dd id="child"><a id="link_child" title="Mother and Child" href="#nogo"><em></em><span><img src="masters/child.jpg" alt="Mother and Child - close-up" title="Mother and Child - close-up" />Suspendisse vestibulum convallis sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pretium tempus pede. Sed placerat imperdiet enim. Donec convallis dignissim risus. Vivamus molestie sodales quam. Aliquam erat volutpat. Fusce ultricies volutpat sem. Suspendisse ac lorem sit amet est condimentum scelerisque.</span></a></dd>
</dl>
 
Danke Maik für deine Bemühungen :)
Aber kennst du voll ein Programm, wo ich festestellen kann
welche Position der und der Spieler hat,
also ich mein das hier "#imap #donkey {left:120px; top:80px; z-index:20;}"
Also das ich zB das mannschaftspic geöfnet habe, markiere von spieler #10 den kopf (Kreise den ein oder so), wo bei mousehover das Popup erscheinen soll.. Iwo dann die Position angezeigt wird....
 
Jedes Grafikprogramm zeigt in einer Statusleiste die X- und Y-Koordinaten des Mauszeigers innerhalb der Grafik an.
 
Ahm k danke,
ich hab hier nur PS9, dachte eigtl auch das da was in der Status angezeigt wird, dem ist aber leider nicht so, Kannst mir auf die sprünge helfen?
 
Ich arbeite mit GIMP, und da wird mir, wie in jedem anderen handelsüblichen Grafikprogramm, in der Statuszeile des "Arbeitsfensters", in dem die Grafik geladen ist, die Koordinaten des Mauszeigers angezeigt.

Möglicherweise musst du mal in den Programm-Optionen nachschauen, ob da etwas evtl. deaktiviert ist.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück