Popup soll an Mausposition gesetzt werden, nur wie ?



  • Hy,

    folgendes. Das ist mein Popup:

    <div id="quickinfo" class="quikinfo" style="left:1;top:1;">
    <table cellspacing="0">
    <tr>
    <td class="popbody" width="100%" bgcolor="#FFFFFF" style="padding:4px;" colspan="2">
    <!-- Inhalt -->
    <span class="popbody">
    Eine kleine Info
    </span>
    <!-- Inhalt-->
    </td>
    </tr>
    </table>
    </div>
    

    dann mein Mouseover aufruf:

    <a href="#" onMouseover='pop_show();set_pos();' onMouseout='pop_weg();' style="font:Arial">OnMouse over event</a>
    

    So ... und hier meine funktionen zum erscheinen und verschwinden lassen:

    function pop_weg(){
    if (ie4||ns6)
    quickinfo.style.visibility="hidden"
    else if (ns4)
    document.quickinfo.visibility="hide"
    }
    function pop_show(){
    if (ie4||ns6)
    quickinfo.style.visibility="visible"
    else if (ns4)
    document.quickinfo.visibility="visible"
    }
    

    Stylesheet auszug:

    .quikinfo{
    	position:absolute;
    	visibility:hidden;
    	font-family:Arial;
    	font-size:10px;
    	color:#FFFFFF;
    }
    .popbody{
    	background-color:FFF477; /* Hier wird in dem aktuellen Fall, der Hintergrund für die Schrift im PopUp Fenster festgelegt */
    	font-size:10px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    table {
    	border:0px;
    	border-color:#777777;
    }
    
    tbody { 
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    

    so und nun mein problem ... mit set_pos() will ich das fensteran die position der Maus setzen. Aber wie mache ich das ? Ich dreh noch durch ... finde da mal gaaaaaaaaaar nichts was mir weiterhelfen könnte.

    Hoffe ihr wisst da was



  • 🙂

    habs rausbekommen ...

    function set_pos(){
    quickinfo.style.left=X+15;
    quickinfo.style.top=Y;
    }
    
    var X=0, Y=0;
    
    if(document.attachEvent)
        document.attachEvent('onmousemove',setPos);
    else if(document.addEventListener)
        document.addEventListener('mousemove',setPos,false);
    
    function setPos(e){
        if(e.pageX){
            X=e.pageX;
            Y=e.pageY;
        }
        else{
            X=e.clientX;
            Y=e.clientY;
        }
    };
    

    Habe viel zu umständlich gedacht. Einfach die Mausposition ermitteln und dann das Style- Element setzen.


Anmelden zum Antworten