Avatar billede khul Nybegynder
10. juli 2002 - 14:49 Der er 9 kommentarer og
1 løsning

Mouseover boks

Hejsa

Jeg er på udkig efter en funktion der ved mouseover på et objekt popper en kasse (ikke vindue) op hvor jeg kan skrive lidt uddybende tekst om det pågældende objekt. Når man fjerner musen fra objektet skal kassen forsvinde.

nogle bud?
Avatar billede puppetmaster Nybegynder
10. juli 2002 - 14:52 #1
Lidt a la

<LINK REL=STYLESHEET HREF="typografi.css" TYPE="text/css">
<script language="JavaScript" src="ToolTip.js"></script>
<span id="jxtooltip" style="position:absolute; visibility:hidden;"></span>
<a href="http://bcedb/helpdesk/visalleartikler.asp" onMouseover="tooltip('Viser samtlige artikler i artikeldatabasen');" onMouseout="tooltip();">Alle artikler</a>
<a href="http://bcedb/helpdesk/nyartikelform.asp" onMouseover="tooltip('Klik for at oprette en ny artikel');" onMouseout="tooltip();">Ny artikel</a>
<a href="http://bcedb/helpdesk/useradmin.asp" onMouseover="tooltip('Klik for at oprette/slette/redigere brugere, samt få vist statistik.');" onMouseout="tooltip();">Brugeradministration</a>
<a href="http://bcedb/helpdesk/logoff.asp" onMouseover="tooltip('Klik for at logge af Medico/Edb - Helpdesk');" onMouseout="tooltip();">Log af</a>


ToolTip.js
**********
var Xmouse, Ymouse;
var hidden = true;
var preMessage="<table border=0><tr><td bgcolor='#E9E9E9'>";
var postMessage="</td></tr></table>";
function tooltip(message) {
    if(message){
        hidden = false;
        if (document.layers){
            with (document["jxtooltip"].document){
                open();
                write(preMessage + message + postMessage);
                close();
            }
        } else if (document.all) {
            document.all["jxtooltip"].innerHTML = preMessage + message + postMessage;
        } else if (document.getElementById){
            jxdocrange = document.createRange();
            jxdocrange.setStartBefore(document.getElementById("jxtooltip"));
            while (document.getElementById("jxtooltip").hasChildNodes()){
                document.getElementById("jxtooltip").removeChild(document.getElementById("jxtooltip").lastChild);
            }
            document.getElementById("jxtooltip").appendChild(jxdocrange.createContextualFragment(preMessage + message + postMessage));
        }
        if (document.all) {
            document.all["jxtooltip"].style.visibility = "visible";
        } else if (document.layers){
            document.layers["jxtooltip"].visibility = "show";
        } else if (document.getElementById){
            document.getElementById("jxtooltip").style.visibility = "visible";
        }
    } else {
        hidden = true;
        if (document.all) {
            document.all["jxtooltip"].style.visibility = "hidden";
        } else if (document.layers){
            document.layers["jxtooltip"].visibility = "hide";
        } else if (document.getElementById){
            document.getElementById("jxtooltip").style.visibility = "hidden";
        }
    }
}
function MoveHandler(evnt) {
    if(document.all) {
        Xmouse = window.event.x + document.body.scrollLeft;
        Ymouse = window.event.y + document.body.scrollTop;
    } else if(document.layers||document.getElementById){
        Xmouse = evnt.pageX;
        Ymouse = evnt.pageY;
    }
    moveLayer("jxtooltip",Xmouse-30,Ymouse+18);
}
function moveLayer(Id,x,y){
    if (document.all){
        document.all[Id].style.left = x;
        document.all[Id].style.top = y;
    } else if (document.layers){
        document.layers[Id].left = x;
        document.layers[Id].top = y;
    } else if (document.getElementById){
        document.getElementById(Id).style.left = x+'px';
        document.getElementById(Id).style.top = y+'px';
    }
}
if (document.layers){
    document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = MoveHandler;
Avatar billede puppetmaster Nybegynder
10. juli 2002 - 14:53 #2
typografi.css
*************
a:link
{
    color: rgb(0,0,80);
}
a:visited
{
    color: rgb(0,0,80);
}
a:active
{
    color: rgb(0,0,80);
}
Avatar billede puppetmaster Nybegynder
10. juli 2002 - 14:54 #3
ups, det var et svar.
Avatar billede khul Nybegynder
10. juli 2002 - 15:04 #4
Har du et link så jeg kan se svineriet i funktion
Avatar billede muddi Praktikant
11. juli 2002 - 02:20 #5
khul >> Du kan da bare bruge copy/paste. Hele koden er der jo!
Avatar billede mbl Juniormester
11. juli 2002 - 10:51 #6
Kigger med. Hvor vil sætte denne kode ind.
Avatar billede khul Nybegynder
11. juli 2002 - 14:22 #7
Lækkert - det var lige det jeg var ude efter.
multo gracias
Avatar billede puppetmaster Nybegynder
11. juli 2002 - 14:56 #8
mbl, de første 10-12 liniers kode sætter du ind i en HTML fil, og resten af koden som jeg har skrevet.....noget af koden i ToolTip.js og resten i typografi.css......(som kun er medtaget fordi jeg postede koden uden at fjerne referencen til den......)
Takker for point
Avatar billede mbl Juniormester
11. juli 2002 - 15:08 #9
tak puppetmaster det virker. Det må siges at det lønner sig at kigge med fra sidelinien.
Avatar billede khul Nybegynder
16. juli 2002 - 11:43 #10
Endnu en gang tak for svaret - jeg har et lille bonus spørgsmål :-)

Er der mulighed for at lave linieskift i pop-up boksen så teksten deles over flere linier og boksen udvides vertikalt?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester