Avatar billede pfr2697 Nybegynder
08. marts 2011 - 19:39 Der er 11 kommentarer og
1 løsning

Mouseover popup med tekkst

Hej Alle

Jeg ønsker et html dokument hvor der er lavet 2 tekst link, der ved mouseover åbner en tekstboks der forsvinder når musen ikke længre er på teksten.

Har kigget på http://www.bosrup.com/ (...), men kan se det kræver at jeg downloader noget og lægger det på en server. Det har jeg ikke mulighed for, da jeg skal kunne sende en fil hvor det virker.


Jeg skal ikke bruge det til en hjemmeside, men en presentation af en vituel bog/opslagsværk

På forhånd tak

Peter
Avatar billede tjens Nybegynder
08. marts 2011 - 19:54 #1
Du kan definere en normal <div> med position:absolute og display:none.

Din onmouseover skal så sætte display=block og evt. beregne hvor på skærmen den skal vises.

Eksempel, hvor du skal holde musen over "E"erne i edit kolonnen:
http://tjens.dk/javascript/examples/PopupMenu.html
Avatar billede pstidsen Novice
08. marts 2011 - 19:55 #2
Avatar billede olebole Juniormester
08. marts 2011 - 20:13 #3
<ole>

Bosrups OverLib kører lige godt i et HTML dokument på en server, lokalt på en PC eller på en CD

/mvh
</bole>
Avatar billede pfr2697 Nybegynder
08. marts 2011 - 21:17 #4
Tjens: Har du et forslag hvor den forsvinder ved mouseoff

Olebole: Det skal bruges som en presentation, hvor modtageren sidder i England. Syntes ellers at OverLib er super fedt. Når det jeg sidder og hygger med skal blive til noget, vil det helt sikkert blive løsninger af den kaliber :-) Men nu har jeg bare bruge for noget til at illustere tingene med ..
Avatar billede pstidsen Novice
08. marts 2011 - 21:32 #5
Hvorfor ikke den her?!?! http://runescapenews.dk/Pstidsen/new%20%201.html (Omskrivning af det der stod på linket ;))
Avatar billede pfr2697 Nybegynder
08. marts 2011 - 21:35 #6
pstidsen: Sidder lige og arbejder med den, den skriver fejl på siden, både i det link du har sendt og den jeg selv leger med
Avatar billede pstidsen Novice
08. marts 2011 - 21:40 #7
også det sidste nye link? det virker fint for mig i opera og IE
Avatar billede pfr2697 Nybegynder
08. marts 2011 - 21:49 #8
Den udfører det men skriver fejl :-)

Kigger på det i morgen skal tideligt op ....
Avatar billede olebole Juniormester
09. marts 2011 - 00:37 #9
Ja, der er en del alvorlige uhensigtsmæssigheder i det script. Når man bruger removeChild, 'dræber' man ikke objektet - det ligger bare i hukommelsen og 'roder rundt'. Det betyder at man spiser og spiser af hukommelsen for hver mouseover. Man producerer hvergang et nyt div, men når man laver mouseout, flytter man det bare væk fra brugerens synsfelt.

Elementet eksisterer stadig og kan heldigvis genbruges, så hvis vi lægger elementet i en global variabel, kan vi blive ved med at genbruge det:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<script type="text/javascript">
var helpNode = null;
function showBox(text, obj) {
    if (!helpNode) {
        helpNode = document.createElement('div');
        helpNode.id = 'popBox';
        helpNode.setAttribute('class','popBox');
        helpNode.appendChild( document.createTextNode("-") );
    }
    helpNode.firstChild.nodeValue = text;
    obj.appendChild(helpNode);
}

function hideBox() {
    helpNode.parentNode.removeChild(helpNode);
}
</script>
<style type="text/css">
.popBox {
    position: absolute;
    z-index: 2;
    background: #cccccc;
    width: 600px;
    padding: 0.3em;
    border: 1px solid gray;
}
span {
    color: red;
    font-weight: bold;
}
</style>
</head>
<body>
    <div onMouseOver="showBox('Skriv popuptekst her1', this)" onMouseOut="hideBox()"><span>Skriv hvad der skal stå på selv hjemmesiden her1</span></div>
    <div onMouseOver="showBox('Skriv popuptekst her2', this)" onMouseOut="hideBox()"><span>Skriv hvad der skal stå på selv hjemmesiden her2</span></div>
    <div onMouseOver="showBox('Skriv popuptekst her3', this)" onMouseOut="hideBox()"><span>Skriv hvad der skal stå på selv hjemmesiden her3</span></div>
    <div onMouseOver="showBox('Skriv popuptekst her4', this)" onMouseOut="hideBox()"><span>Skriv hvad der skal stå på selv hjemmesiden her4</span></div>
</body>
</html>

Avatar billede tjens Nybegynder
09. marts 2011 - 11:51 #10
#4 For at lukke popup automatisk i eksemplet i #1 tilføjer du

onmouseout="popMenuClose()"   lige efter onmouseover="popMenu(this)"

Og derudover kan du jo fjerne kode, der farver linierne i tabellen, fra mit eksempel, for at gøre det simplere.
Avatar billede pfr2697 Nybegynder
09. marts 2011 - 13:40 #11
Lukker spørgsmålet...

Har fået OverLib til at virke offline :-)

Smid svar alle 3, så deler i point :-)
Avatar billede pfr2697 Nybegynder
11. marts 2011 - 12:55 #12
Jeg lukker spørgsmålet :-)
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