Community  »  Javascript - Clientprogrammierung

Mouseover Bild vor Bild	Seitenanfang
Hallo, ich bastel schon seit tagen an einer idee die ich leider nicht schaffe umzusetzen. Ich habe auch schon in anderen communitys auf problem lösungen gehofft doch leider bis heute keine richtige lösung gefunden. also folgendes : Ein Bild mit mehreren unterschiedlichen sachen drauf. Wenn man mit der Maus über ein wichtiges detail fährt soll sich ein bild drüber legen welches alle details beinhaltet. ich kann es schwer erklären , mein sohn meinte man könnte es am besten mit diablo2 erklären , dort soll das so sein wenn man im inventar über einen gegenstand fährt sich alle infos über betroffenes legt. das mit dem hotspot und den infos bekomme ich hin , nur anstatt text soll halt ein bild aufgehen (nicht als popup). es muss sowas doch möglich sein , habe ja auch schon änliches als java gefunden nur leider nicht genau das was ich suche weil entweder ein popup aufgeht oder das gesammte bild dann überschrieben wird. es soll einfach ein bild sich über ein bild legen ohne es großartig zu verunstalten. so wie man im photoshop ein bild auf ein anderes legen kann ohne das das daruter liegende wech ist oder das kleine neue bild das große andere komplett verhüllt. das muss doch möglich sein sowas in eine html klamotte einzubauen oder ? also kurz gefasst (laut meines sohnes) inventar über einen gegenstand fahren und die infos darüber gehen auf , anstatt text soll ein bild aufgehen. axo ich suche ja schon länger und das mit dem css gedöhnse , das ist mir zu hoch das rall ich nich. also wenn einer eine idee hat oder nicht genau weiss wie ich das meine einfach schreiben ich gug täglich mal vorbei. muss doch gehen sowas :) mfg pet Datum: 18.01.2006-10:17
re: Mouseover Bild vor Bild	Seitenanfang
hallo pet, 1. ein bild in einer div 2. das bild mit src-anweisung ändern 3. der div mit position:absolute positionieren gruß stef Datum: 18.01.2006-13:26
re: Mouseover Bild vor Bild	Seitenanfang
Hi, ich würde das auch so machen, wie Steferbo das schon angesprochen hat und gebe Dir ein kleines snippet an die Hand. Die Punkte "." stehen synonym für Leerzeichen. <style type="text/css"> ...#info { ......display:none; ......position:absolute; ......left:0px; ......top:0px; ...} </style> <map name="blaBlub"> ...<area shape="rect" coords="11,10,59,29" href="/pfad/thema/datei.html" alt="Kurzinfo" onmouseover="ermittle_coords();show_tip('bild.gif','32','32',l_pos,t_pos)" onmouseout="hide_tip();"> ...[...] </map> <img src="/pfad/bla-blub.gif" usemap=blaBlub width=600 height=300 alt="" boder=0> <div id=info></div> <script type="text/javascript" language="JavaScript"><!-- var l_pos,t_pos; function ermittle_coords(e) { ...if(!e) var e=window.event; ...l_pos=e.clientX; ...t_pos=e.clientY; } function show_tip(bild,w,h,x,y) { ...var pic='<img src="/pfad/'+bild+'" width='+w+' height='+h+' border=0 alt="">'; ...document.getElementById("info").style.left=x+"px"; ...document.getElementById("info").style.top=y+"px"; ...document.getElementById("info").style.display="block"; ...document.getElementById("info").style.width=w+"px"; ...document.getElementById("info").style.height=h+"px"; ...document.getElementById("info").innerHTML=pic; } function hide_tip() { ...document.getElementById("info").style.display="none"; ...document.getElementById("info").innerHTML=""; } //--></script> So in der Art sieht das dann aus. Du kannst praktisch alles in das div reinladen was Du willst. Die Werte für left und top ermittelst Du dann über die Mauskoordinaten clentX, bzw. clientY. Weitere Infos zum Thema findest Du auf: http://de.selfhtml.org/ Hoffe ich konnte den richtigen Denkanstoß geben. -uw Datum: 18.01.2006-14:32