Avatar billede herberth Juniormester
08. november 2002 - 13:05 Der er 24 kommentarer og
1 løsning

Hvordan laver man en tekstbobbel ?

Hej
Jeg kan ikke finde ud af at lave en tekst bobbel. Altså vil jeg gerne at når curseren står ved et ord at det ord så bliver beskrevet via en tekstbobbel som kommer op. Rent konkret er det en sætning jeg har hvor jeg skriver om en forfatter og så istedet for at lave en slutnote om hvem han er så ville det jo være smart at man umiddelbart kan se i en lille tekstbobbel beskrivelsen af ham. Er der nogen der kan hjælpe mig hermed ?
Avatar billede staz Nybegynder
08. november 2002 - 13:07 #1
Du kunne bruge en almendelig ALT tekst:

<img src="ditbillede.gif" alt="Din tekst her" width="78" height="83" border="0">

---- Staz ----
Avatar billede criterius.dk Nybegynder
08. november 2002 - 13:09 #2
brug title="tekst" i dit link.

Hvis det skal være mere avanceret skal du nok kigge på www.bosrup.com/web/overlib/

Hvis du vil have en decideret talebobbel kan du hente lidt inspiration her: www.webwerx.dk
Avatar billede nikolajdu Nybegynder
08. november 2002 - 13:10 #3
Sådan i den her stil ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// Eksempel:
// onMouseOver="toolTip('tekst her<br>gerne html også')";
// onMouseOut="toolTip()";
// -or-
// onMouseOver="toolTip('tekst her', '#FFFF00', 'orange')";
// onMouseOut="toolTip()";
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
offsetX = 0;
offsetY = 20;
var toolTipSTYLE="";
function initToolTips()
{
  if(ns4||ns6||ie4)
  {
    if(ns4) toolTipSTYLE = document.toolTipLayer;
    else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
    else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
    if(ns4) document.captureEvents(Event.MOUSEMOVE);
    else
    {
      toolTipSTYLE.visibility = "visible";
      toolTipSTYLE.display = "none";
    }
    document.onmousemove = moveToMouseLoc;
  }
}
function toolTip(msg, fg, bg)
{
  if(toolTip.arguments.length < 1) // hide
  {
    if(ns4) toolTipSTYLE.visibility = "hidden";
    else toolTipSTYLE.display = "none";
  }
  else // show
  {
    if(!fg) fg = "#777777";
    if(!bg) bg = "#FFFFFF";
    var content =
    '<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '"><td>' +
    '<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg +
    '"><td align="center"><font face="sans-serif" color="' + fg +
    '" size="-2">&nbsp\;' + msg +
    '&nbsp\;</font></td></table></td></table>';
    if(ns4)
    {
      toolTipSTYLE.document.write(content);
      toolTipSTYLE.document.close();
      toolTipSTYLE.visibility = "visible";
    }
    if(ns6)
    {
      document.getElementById("toolTipLayer").innerHTML = content;
      toolTipSTYLE.display='block'
    }
    if(ie4)
    {
      document.all("toolTipLayer").innerHTML=content;
      toolTipSTYLE.display='block'
    }
  }
}
function moveToMouseLoc(e)
{
  if(ns4||ns6)
  {
    x = e.pageX;
    y = e.pageY;
  }
  else
  {
    x = event.x + document.body.scrollLeft;
    y = event.y + document.body.scrollTop;
  }
  toolTipSTYLE.left = x + offsetX;
  toolTipSTYLE.top = y + offsetY;
  return true;
}
</script>
</head>
<body onload="initToolTips();">

<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<a href="java script:;" onMouseOver="toolTip('Her er historien om en meget kendt forfatter.<br>Han levede sit liv i kummerlighed p&aring; en svensk &oslash;deg&aring;rd uden for &Aring;re.<br>Efter 200 sladderblade-noveller er han nu klar i ny stil :<br>Og s&aring;dan kan vi jo blive ved...', '#ffffff', '#770000');" onMouseOut="toolTip()";>Dette er et link</a>

</body>
</html>
Avatar billede Slettet bruger
08. november 2002 - 13:11 #4
<img src="billede.gif" alt="Alternativ tekst" title="Alternativ tekst">

Så virker det også i andre browsere ;)
Avatar billede herberth Juniormester
08. november 2002 - 13:17 #5
Skal koden så se således ud:

<html>
<head>
<title>XXXX</title>
</head>

<body>
Forfatteren XX <img src="billede.gif" alt="Alternativ tekst" title="Alternativ tekst">var også meget, bla.bla. bla.
</body>
</html>
Avatar billede Slettet bruger
08. november 2002 - 13:19 #6
Kun hvis det er på et billede eller link.

Hvis du bare vil have at ordet kommer frem når man holder musen over et ord et det prodic's løsning du skal bruge.

Men husk at fortælle det til dine brugere, eller markere teksten i en anden farve.
Avatar billede herberth Juniormester
08. november 2002 - 13:21 #7
Jeg synes prodics løsning ser meget, meget spændende ud. Prøver den lige og vender tilbage.
Avatar billede nikolajdu Nybegynder
08. november 2002 - 13:24 #8
prodic??? Hvor ser du ham henne af???
Avatar billede herberth Juniormester
08. november 2002 - 13:26 #9
Hej nikolajdu
det er via linket som el barto skrev:
webwerx.dk
det ser meget spændende ud
Avatar billede Slettet bruger
08. november 2002 - 13:28 #10
nikolajdu> Sorry ;) Mente naturligvis dig, var bare lige i en 4-5 spm. på en gang...
Avatar billede nikolajdu Nybegynder
08. november 2002 - 13:31 #11
Jo det er før set med mange jern i ilden ;-)
Avatar billede herberth Juniormester
08. november 2002 - 13:39 #12
Hej el barto
kender du programmet ?
har umiddelbart svært ved at finde ud af hvordan det benyttes til at lave en tekstbobbel - minder mere om en almindelig html-editor. Ved du hvordan man laver en tekstbobbel i programmet ?
Avatar billede Slettet bruger
08. november 2002 - 13:41 #13
Nej jeg kender ikke programmet, og vil ikke anbefale det.

Det virker nemlig kun i IE...
Avatar billede herberth Juniormester
08. november 2002 - 13:48 #14
Okay
jeg har besluttet mig for at bruge nikolajdu's løsning
tak for hjælpen - og fortsat god dag
okay jeg har faktisk lige et nyt problem for jeg kan kun tildele point til staz og criterius.dk - hvordan i alverden kan det være - hjælper heller ikke når jeg trykker på advanceret ????
Avatar billede Slettet bruger
08. november 2002 - 13:55 #15
Nok fordi de er de eneste der har lagt et svar :)
Avatar billede nikolajdu Nybegynder
08. november 2002 - 14:02 #16
Jeg kan da godt lægge et svar :)
Avatar billede herberth Juniormester
08. november 2002 - 14:02 #17
Jammen det er sgu da ikke retfærdigt !!
Nå men nik. kan du så ikke sende mig et svar
Og hvis du samtidig ville fortælle hvoran man kan bruge din kode til at lave flere forskellige tekstbobler ville det være supert - men du får selvfølgelig pointene under alle omstændigheder
Avatar billede nikolajdu Nybegynder
08. november 2002 - 14:05 #18
Du laver bare alle dem du vil ;-)

<a href="#" onMouseOver="toolTip('Nikolaj er glad for at du kan bruge hans l&oslash;sning', '#ff55ff', '#000000');" onMouseOut="toolTip()";>Dette er ogs&aring; et link</a>
Avatar billede nikolajdu Nybegynder
08. november 2002 - 14:07 #19
Tak for point :)
Avatar billede criterius.dk Nybegynder
08. november 2002 - 14:56 #20
Nu er det ikke for at være vanskelig, men det var ikke selve programmet, men hjemmesiden...!
Avatar billede herberth Juniormester
08. november 2002 - 15:08 #21
Hej Nikolaj Har du en ide om hvordan din kode kan rettes til således at det ikke bliver et link men bare viser det man har skrevet i tekstboblen. Jeg tror nemlig at folk går ind og trykker på linket og så kommer jo den her - siden kan ikke vises - idet linket ikke viser nogle steder hen. Jeg kan selvfølgelig lave linket til selvsamme side. Men det ville være smart hvis der i din kode var mulighed for at curseren f.eks. blot ændrede sig til en knyttet hånd i stedet for som nu at man tror det er et link. Hvad synes du om det ?

P.s. til criterius - jeg kigger på din kommentar
Avatar billede herberth Juniormester
08. november 2002 - 15:12 #22
ps til nikolaj - kan jeg lave linket således :
a href="java script:void(0);
Avatar billede Slettet bruger
08. november 2002 - 15:15 #23
<a href="java script:void()" onMouseOver="toolTip('Nikolaj er glad for at du kan bruge hans l&oslash;sning', '#ff55ff', '#000000');" onMouseOut="toolTip()"; style="text-decoration:underline;">Dette er ogs&aring; et link</a>

Nu burde det ikke ligne et link, og der burde ikke ske noget når man klikker
Avatar billede nikolajdu Nybegynder
08. november 2002 - 15:15 #24
ja eller sætte : return false bagefter

<a href="#" onMouseOver="toolTip('Nikolaj er glad for at du kan bruge hans l&oslash;sning', '#ff55ff', '#000000');return false " onMouseOut="toolTip()";return false >Dette er ogs&aring; et link</a>
Avatar billede herberth Juniormester
08. november 2002 - 15:54 #25
Tak for hjælpen i to - god weekend
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