Søg
Avatar billede apo Praktikant
27. februar 2006 - 19:34 Der er 4 kommentarer og
1 løsning

Layer, som følger musen

Hej.

Jeg har forsøgt at få vist noget HTML-kode i forbindelse med Bosrup's OverLib-script - Men det virker ikke :-/

Hvordan får jeg i stedet et layer (Bestående af en div, indeholdene lidt tekst og et billede) til at følge musen når man holder musen over et link - På samme måde som OverLib-scriptet?

Apo
Avatar billede webudvikleren Nybegynder
27. februar 2006 - 19:47 #1
Prøv leg lidt med dette

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript">
    function over(e, g)
    {
      // lav variabler
      var x,y, z;
     
      // div
      z = document.getElementById(g);
     
      // variabler
      x = e.clientX;
      y = e.clientY;
     
      // ryd gamle data
      z.style.display = "none";
      z.style.left = "0px";
      z.style.top = "0px";
     
      // nye data
      z.style.display = "block";
      z.style.left = x + "px";
      z.style.top = y + "px";
    }
   
    function ud(g)
    {
      var z;
      z = document.getElementById(g);
      z.style.display = "none";
    }
    </script>
</head>

<body>
<!-- #1 -->
<div id="indhold-01" style="width:200px;height:100px;left:0px;top:0px;display:none;position:absolute;border:2px solid #333;">
    <img src="http://www.eksperten.dk/img/elogo.png" style="width:100px;height:100px;" alt="" />
    <br />
    <b>Eksperten.dk</b>
    <br />
    Alletiders site.
</div>

<a id="indhold-01" onmouseout="ud(this.id);" onmouseover="over(event,this.id);">Eksperten.dk</a>


<!-- /#1 -->

<br />

<!-- #2 -->

<div id="indhold-02" style="width:200px;height:100px;left:0px;top:0px;display:none;position:absolute;border:2px solid #333;">
    <img src="http://www.google.dk/images/hp0.gif" style="width:100px;height:100px;" alt="" />
    <br />
    <b>Google.dk</b>
    <br />
    Søgemaskine
</div>

<a id="indhold-02" onmouseout="ud(this.id);" onmouseover="over(event,this.id);">Google.dk</a>


<!-- /#2 -->

</body>
</html>
Avatar billede apo Praktikant
28. februar 2006 - 17:15 #2
Det kunne bruges, smid et svar :-)

Dog oplever jeg problemer med at formatere linket, der aktiverer layeret - Det virker fint nok i FF men i IE virker formateringen ikke.

Detaljespørgsmål: Hvordan får jeg i øvrigt layeret til at følge musen når denne holdes over linket?
Avatar billede apo Praktikant
28. februar 2006 - 18:26 #3
Hmm... Det fungerer ikke helt optimalt.

Når jeg indsætter layer-funktionen i et table, befinder musen sig ved layerets midte - I stedet for ved layerets top.

Er det noget, du kan gøre noget ved?
Avatar billede webudvikleren Nybegynder
01. marts 2006 - 00:34 #4
x = e.clientX;
y = e.clientY - 15;
Avatar billede apo Praktikant
05. marts 2006 - 11:18 #5
Tak for hjælpen. Men det fungerer stadig ikke helt optimalt :-/

Jeg er imidlertid gået over til at bruge en anden løsning i stedet (Pop-up vinduer). Men du får points for din tid :-)

// Lukker
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 14:56 Udseende af datoer Af ErikHg i Excel
23/0509:37 hvilken AI synes I er bedst? Af jcr18 i Andre onlineløsninger
22/0518:51 Pausepil på youtube i chrome Af valby i Browsere
22/0511:42 Mail med endelsen ".lat" Af ErikHg i E-mail
21/0511:48 Nyåbnede sider flimrer på Android tablet, hvorfor Af annam i Andet software
White papers
Flere white papers »