Avatar billede supersquirrel Nybegynder
14. februar 2007 - 11:51 Der er 6 kommentarer og
1 løsning

popup ved siden af musen

Hejsa

Jeg her tænkt mig at lave sådan at når jeg holder musen over et link, så skal der poppe et lille vindue op ved siden af musen med en lille tekst.

Dette er nemt nok.
Det svære er at få den lille boks til at indeholde en BESTEMT tekst.
Den tekst det skal indeholde er en kort infotekst til en  nyhed..

Altså, jeg har f.eks. 5 nyheder under hinanden, når jeg holder musen over den ene nyhed (Overskriften altså), så skal der komme en boks med en lille tekst som jeg har skrevet, som hører til den nyhed.

Det samme med den næste osv.
Hver boks skal være "unik"


Jeg har denne kode:
<script type="text/javascript">
function showBox(e) {
          box = document.getElementById("boks").style;
          box.left = ((e.clientX) ? e.clientX : e.pageX)+15+"px";
          box.top = ((e.clientY) ? e.clientY : e.pageY)-15+"px";
          box.display = "block";
  }
  function hideBox() {
          document.getElementById("boks").style.display="none";
  }
</script>

<div id="boks" style="position:absolute;left:0px;top:0px;display:none">
<table border="0" cellpadding="0" cellspacing="0" width="100" bgcolor="#CCCCCC">
    <tr>
        <td>HER SKAL DEN LILLE TEKST VÆRE</td>
    </tr>
</table>
</div>
<a href="#" onmouseover="showBox(event)" onmousemove="showBox(event)" onmouseout="hideBox()" />OVERSKRIFTEN</p>

Altså, når jge holder musen over et link til en nyhed, så skal der poppe en lille boks op ved siden af musen, som indeholder en lille tekst til den nyhed som linket peger på.

Håber i forstår
Avatar billede jakobdo Ekspert
14. februar 2007 - 12:06 #1
Du kunne rette lidt i funktionen showBox, så den tager et ID som argument.
Så kunne du lave:
function showBox(e,id)
{
box = document.getElementById(id).style;
          box.left = ((e.clientX) ? e.clientX : e.pageX)+15+"px";
          box.top = ((e.clientY) ? e.clientY : e.pageY)-15+"px";
          box.display = "block";
}
og det samme med hidebox()

og nede i din html kode har du så:
<div id="id1" style="position:absolute;left:0px;top:0px;display:none">
<table border="0" cellpadding="0" cellspacing="0" width="100" bgcolor="#CCCCCC">
    <tr>
        <td>HER SKAL DEN LILLE TEKST VÆRE</td>
    </tr>
</table>
</div>
<a href="#" onmouseover="showBox(event,id1)" onmousemove="showBox(event,id1)" onmouseout="hideBox(id1)" />OVERSKRIFTEN</p>
Avatar billede supersquirrel Nybegynder
14. februar 2007 - 12:12 #2
Yes.. det forstår jeg godt

Men det jeg har problemer med at at få den til at (via den id den skriver) - at poste den lille besked i den boks, som jeg henter ud fra db
Avatar billede jakobdo Ekspert
14. februar 2007 - 13:06 #3
Se f.eks. koden her i action: http://www.codebreaker.dk/exp/762492exp.php

Og her er selve koden så:

<?php
//http://www.eksperten.dk/spm/762492
?>
<html>
<head>
<title>PopUp Test</title>
<script type="text/javascript">
function showBox(e,divID)
{
    box = document.getElementById(divID).style;
    box.left = ((e.clientX) ? e.clientX : e.pageX)+15+"px";
    box.top = ((e.clientY) ? e.clientY : e.pageY)-15+"px";
    box.display = "block";
}

function hideBox(divID)
{
    document.getElementById(divID).style.display="none";
}
</script>
</head>
<body>
    <?php
    for($i = 1; $i <= 5; $i++)
    {
        ?>
<div id="id<?=$i;?>" style="position:absolute;left:0px;top:0px;display:none">
<table border="0" cellpadding="0" cellspacing="0" width="100" bgcolor="#CCCCCC">
    <tr>
        <td>Her er en lille tekst til nyhed nummer <?=$i;?></td>
    </tr>
</table>
</div>
<a href="#" onmouseover="showBox(event,'id<?=$i;?>')" onmousemove="showBox(event,'id<?=$i;?>')" onmouseout="hideBox('id<?=$i;?>')" />Overskrift - <?=$i;?></a><br />
<?php
}
?>
</body>
</html>

Du skal jo så ikke bruge for($i....) men en sql og while()
Avatar billede supersquirrel Nybegynder
14. februar 2007 - 14:33 #4
Lol jeg er lost :P har siddet og spekuleret over hvor jeg skulle placere hvad.. Jeg fandt frem til:

<?
include("./top.php");
include("./db.php");

$bruger_tjek = mysql_query("SELECT * FROM bruger order by id DESC LIMIT 5") or die("Fejl: " . mysql_error());
$artikler_tjek = mysql_query("SELECT * FROM artikler order by id DESC LIMIT 5") or die("Fejl:" . mysql_error());
$nyheder_tjek = mysql_query("SELECT * FROM nyheder order by id DESC LIMIT 5") or die("Fejl: " . mysql_error());
$forum_tjek = mysql_query("SELECT * FROM topic order by id DESC LIMIT 5") or die("Fejl: " . mysql_error());
?>
<script type="text/javascript">
function showBox(e,divID)
{
    box = document.getElementById(divID).style;
    box.left = ((e.clientX) ? e.clientX : e.pageX)+15+"px";
    box.top = ((e.clientY) ? e.clientY : e.pageY)-15+"px";
    box.display = "block";
}

function hideBox(divID)
{
    document.getElementById(divID).style.display="none";
}
</script>


<table style="padding-left:11px" border="0" cellpadding="0" cellspacing="0" width="580">
    <tr>
        <td width="290"><b><u>5 Seneste nyheder&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u></b></td>
        <td><b><u>5 Seneste artikler&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u></b></td>
    </tr>
    <tr>
        <td>
        <? while($nyhed = mysql_fetch_assoc($nyheder_tjek)){?>
        <div id="id<?=$nyhed[emne]?>" style="position:absolute;left:0px;top:0px;display:none">
        <table border="0" cellpadding="0" cellspacing="0" width="100" bgcolor="#CCCCCC">
            <tr>
                <td>Her er en lille tekst til nyhed nummer <?=$nyhed[emne]?></td>
            </tr>
        </table>
        </div>
        <a href="#" onmouseover="showBox(event,'id<?=$nyhed[id]?>')" onmousemove="showBox(event,'id<?=$nyhed[id]?>')" onmouseout="hideBox('id<?=$nyhed[id]?>')" /><?=$nyhed[emne]?></a><br /><? } ?></td>
       
       
        <td><? while($artikel = mysql_fetch_assoc($artikler_tjek)){?> <a href="artikel2.php?id=<?=$artikel[id]?>"><?=$artikel[emne]?><br><? } ?></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td width="290"><b><u>5 nyeste brugere&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u></b></td>
</u></b></td>
        <td><b><u>5 mest aktive forumtråde&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u></b></td>
</u></b></td>
    </tr>
    <tr>
        <td><? while($bruger = mysql_fetch_assoc($bruger_tjek)){?> <a href="profil.php?bruger=<?=$bruger[brugernavn]?>"><?=$bruger[brugernavn]?><br><? } ?></td>
        <td><? while($forum = mysql_fetch_assoc($forum_tjek)){?> <a href="forum_try.php?kategori=se_trad&hoved_kategori=<?=$forum[topic_kategori]?>&id=<?=$forum[id]?>"><?=$forum[topic_name]?><br><? } ?></td>
    </tr>   
</table>

   
<br /><br />

       
<?
include("./bund.php");
?>

Og det virker ikke ..

Kan jeg håbe på at du vil give mig den ekstra hjælp? :D
Avatar billede supersquirrel Nybegynder
14. februar 2007 - 14:35 #5
Nej hov! jeg havde bare lavet en tastefejl :P Det virker nu :D

Smid et svar - og tak for hjælpen
Avatar billede jakobdo Ekspert
14. februar 2007 - 14:50 #6
Svar!
Avatar billede jakobdo Ekspert
14. februar 2007 - 15:06 #7
Takker for point.
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