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

blaz Nybegynder

29. oktober 2006 - 16:29 Der er 9 kommentarer

Tekstbobbel med JS

Jeg leder efter et JavaScript som viser en "tekstbobbel" når man ruller musen over et billede, alternativt kan også være at man skal klikke på billedet for at frembringe tekstboksen. Tekstboblen skal kunne indeholde en opskrift samt et billede.
Jeg håber nogen kan være behjælpelig med dette.

Synes godt om

thesurfer Nybegynder

29. oktober 2006 - 17:31 #1

Prøv at kigge på: http://www.bosrup.com/web/overlib/

Synes godt om

jhe-ting Nybegynder

30. oktober 2006 - 03:28 #2

Har overlib - smart pakke men omfattende.
Vil du hellere selv lave det kan dette 'enkle' eksempel måske inspirere.

<HTML>
<HEAD>
<TITLE>Text bobbel</TITLE>
<STYLE>
.pict {
width:120px;
height:120px;
background-color:#33CCFF;
border:thin solid white
}
</STYLE>
<SCRIPT>
var theDiv = null;
function showBubble(aStr){
if (!theDiv) {
theDiv = document.createElement("DIV");
document.body.appendChild(theDiv);
theDiv.style.position="absolute";
theDiv.style.border = "thin black solid";
theDiv.style.backgroundColor = "#EEFFEE";
}
theDiv.style.left= event.offsetX+10;
theDiv.style.top = event.offsetY+10;
theDiv.innerHTML = aStr;
theDiv.style.display="block";
}

function hideBubble(){
theDiv.style.display="none";
}

</SCRIPT>
</HEAD>
<BODY>
<p>Et kort eksempel. med en del fyld for at afprøve scroll</p>
<p>Prøv at peje<span
onmouseover="showBubble('Her er en <b>Text bobbel.</b><br>Den kan fyldes med alt muligt...');"
onmouseout="hideBubble();"><u> Her </u></span> og se hvad der sker (og <span
onmouseover="showBubble('Det skulle kunne bruges til billder også <div class=pict>Dette KUNNE være et billede</div>');"
onmouseout="hideBubble();"><u> Her </u></span>).
</p>
<div style="position:absolute; top:400px; left:400px; width:150px">Fyld fyld fyld fyld fyld fyld
fyld fyld fyld fyld fyld fyld fyld fyld fyld fyld fyld fyld fyld fyld fyld fyld</div>
</BODY>
</HTML>

Synes godt om

olebole Juniormester

30. oktober 2006 - 10:25 #3

<ole>

- men fordelen ved overlib er, at den er skrevet i nogenlunde valid kode ;o)

Script-elementet skal have angivet en type:
<script type="text/JavaScript">

document.createElement's argument skal altid være i lowerCase:
theDiv = document.createElement("DIV");

CCS-værdier skal altid have en enhed, når værdien er forskellig fra 0:
theDiv.style.left = (event.offsetX+10) + "px";

- og så er 'event.offsetX' ikke standardiseret syntaks - men IE-only.

Selvom det kun var de værste fejl i koden, er det nok tydeligt, der er mange fordele ved at bruge overlib ;o)

/mvh
</bole>

Synes godt om

olebole Juniormester

30. oktober 2006 - 10:26 #4

ups ... der fik jeg ikke selv rettet fejlen :D

document.createElement's argument skal altid være i lowerCase:
theDiv = document.createElement("div");

Synes godt om

thesurfer Nybegynder

30. oktober 2006 - 10:45 #5

olebole> Ang "CCS-værdier skal altid have en enhed":
Det skal CSS-værdier vist også.. ;-)

Synes godt om

olebole Juniormester

30. oktober 2006 - 10:51 #6

thesurfer >> ikke helt forstået :)

Synes godt om

thesurfer Nybegynder

30. oktober 2006 - 21:57 #7

olebole> Jeg regnede bare med, at der skulle have stået "CSS" og ikke "CCS"..? :-)

Synes godt om

olebole Juniormester

31. oktober 2006 - 08:15 #8

Cascading CyberSheets ;D
Sæ'fø'lig har du da ret ;o)

Synes godt om

jhe-ting Nybegynder

05. oktober 2007 - 15:42 #9

blaz >> Hvad skete der? Fik du noget ud af det? Lukketid?

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 JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

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