CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

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

Synes godt om

pstidsen Novice

08. marts 2011 - 19:55 #2

sådan her. Den er testet: http://www.simplemachines.org/community/index.php?topic=52582.0

Synes godt om

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>

Synes godt om

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 ..

Synes godt om

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 ;))

Synes godt om

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

Synes godt om

pstidsen Novice

08. marts 2011 - 21:40 #7

også det sidste nye link? det virker fint for mig i opera og IE

Synes godt om

pfr2697 Nybegynder

08. marts 2011 - 21:49 #8

Den udfører det men skriver fejl :-)

Kigger på det i morgen skal tideligt op ....

Synes godt om

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>

Synes godt om

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.

Synes godt om

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 :-)

Synes godt om

pfr2697 Nybegynder

11. marts 2011 - 12:55 #12

Jeg lukker spørgsmålet :-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS