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

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
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

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

22/11

Test: Den snusfornuftige Volkswagen ID.3 blevet til lidt af el-bisse

22/11

Vil købe tele-løsninger til det offentlige for 370 millioner kroner

22/11

Nørgaard: Det er de neuro-divergente originalers tid

22/11

Sker helt åbenlyst: Ansatte i den kinesiske stat sælger borgernes personlige data på hemmelige internet-fora

22/11

Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"

22/11

Derfor bliver den amerikanske tvangs-opdeling af Google nok ikke til noget

22/11

Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen

22/11

Vi har fundet 10 ledige it-stillinger, som du kan søge netop nu

22/11

Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet

22/11

Kombit gør klar til at købe it-konsulenter for 140 millioner kroner - her er planen

22/11

Droner i krig - sådan anvendes de mest effektivt på slagmarken

Vis flere artikler

IT-JOB

Paychex Europe

Technical QA Specialist to Danløn

Sydbank

Software Developer til Digital Banking i Sydbank

Udviklings- og Forenklingsstyrelsen

Business Analyst med kompetencer inden for digital formidling (tidsbegrænset ansættelse)

Nordic RCC

Security & Compliance Officer with an interest in the green energy transition

Unik System Design A/S

Udviklingschef

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

30 min siden	Underlig meddelelse på skærmen Af Jordegern i E-mail programmer
I dag 15:56	Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
I dag 14:10	Outlook henter ikke mails Af TTA i Office & Kontorpakker
I dag 13:58	vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I dag 13:35	Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling