/ Forside/ Teknologi / Internet / Website's / Spørgsmål
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
Website's
#NavnPoint
1  Klaudi 7613
2  molokyle 7332
3  refi 3006
4  jangchr 2550
5  katekismus 2030
6  bentjuul 1884
7  EXTERMINA.. 1570
8  o.v.n. 1540
9  marken84 1470
10  disken 1359
Hvordan laver man info pop-up?
Fra : kalleanker 		Vist : 1688 gange
160 point
Dato : 01-12-07 19:34
Jeg tumler lidt med at lave en info pop-up, eller det vil sige det er ikke en egentlig pop-up, men snarere en lille info-boks der kommer til syne når man holder musen hen over en given tekst eller billede. Lidt som sådan en man kan se på google maps eller når hjemmesider genkender reklame ord.

Man kan sammenligne det lidt med den tekst der kommer til syne når man holder musen over et link, bare i noget større format - og så må det gerne kunne indeholde billeder!

Hvem ved hvordan man gør, eller i det mindste bare hvad man kalder sådan en anordning?

 
 
Kommentar
Fra : BjarneD

Dato : 01-12-07 20:42
Det kan laves med CSS som her: http://www.cssplay.co.uk/menu/tooltips.html

Kommentar
Fra : BjarneD

Dato : 01-12-07 20:45
Du kan se opbygningen i vis kilde

Kommentar
Fra : molokyle

Dato : 02-12-07 08:33
Jeg har lavet en alternativ og simpel løsning der bygger på samme principper:
Kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Span tekst popup på links</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
[CDATA[
.pop a {position:relative;}
.pop a span {display:none;}
.pop a:hover span {
position:absolute;
display:block;
border:1px solid black;
padding:8px;
color:#000;
background:#ffff66;
text-decoration:none;
width:192px;
}
]]
//-->
</style>
</head>
<body>
<div>
Dette er en
<span class="pop"><a href="#" title="">tekst<span>Dette er pop-up teksten ved mouseover.</span></a></span>
som giver en pop-up tekst ved mouseover.
</div>
</body>
</html>


Eksemplet kan ses her: http://www.cssboxing.com/temp/span_popup_tekst.html

</MOLOKYLE>

Kommentar
Fra : molokyle

Dato : 02-12-07 08:41
Her en version med et billede:

http://www.cssboxing.com/temp/span_popup_tekst_og_billede.html

I dette eksempel har jeg udeladt width egenskaben, hvorved at popup'en tilpasser sig størrelsen af indholdet.

</MOLOKYLE>


Kommentar
Fra : kalleanker

Dato : 02-12-07 12:16
Jeg har fået det til at virke med et billede, men jeg vil faktisk gerne have at den viser en lille infoboks, med både billede og tekst, gerne baseret på en anden webside.

Kan det lade sig gøre?

Kommentar
Fra : kalleanker

Dato : 02-12-07 12:18
Det må meget gerne virke i både IE og Firefox, Safari

Kommentar
Fra : kalleanker

Dato : 02-12-07 13:46
det kunne lade sige gøre ved at benytte iframe...

Kommentar
Fra : molokyle

Dato : 02-12-07 15:04
Min løsning virker i alle "standard compliant" browsere og validerer korrekt i alle DTD'er.

Der kan dog være problemer med div. browseres rendering af boxmodellen som specificeret af w3.org: http://www.w3.org/TR/REC-CSS2/box.html

Specielt IE er problematisk. Læs evt.:

1.) http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

2.) http://css-discuss.incutio.com/?page=IE7

3.) http://www.positioniseverything.net/

4.) http://www.webdesign101.dk/xhtml/css/hacks/hack_4.php

5.) http://www.webdesign101.dk/ie7/csshacks.php

Derudover:

iframe er en non-standard markør

..og frameset, frame er deprecated (= under udfasning) i:

HTML 4.01 ..undtagen defineret med en DTD frame i dokumentets !DOCTYPE

..dette gælder også XHTML 1.0 !

http://www.hintzmann.dk/articles/doctype/

I XHTML 1.1 findes hverken markøren eller attributten (=parameteren) frame !

Det kan derfor ikke anbefales

Vil du have en pop-up med en 'anden' sides indhold?

..så må du enten benytte en alm. Javascript pop-up:

http://www.infimum.dk/HTML/JSwindows.html#ref_3_2

(..som vil give pop-up advarsler !!!)

..eller ty til AJAX:

http://www.w3schools.com/ajax/default.asp

..som kræver at din server (host) tillader dette.

Happy coding... </MOLOKYLE>

Kommentar
Fra : molokyle

Dato : 02-12-07 15:35
Et hurtigt forsøg med en iframe (..virker IKKE i IE, men i alle browsere ):

HTML 4.01 frame DTD:

Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Mouseover tekst iframe (DMI)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {border:0;margin:0;padding:0;}
body {color:#fff;background:#000;font-family:verdana,arial,sans serif;font-size:80%;padding:4px;}
.pop a {position:relative;}
.pop a span {display:none;}
.pop a:hover span {
position:absolute;
display:block;
</style>
</head>
<body>
<div>
Dette er en
<span class="pop"><a href="#" title="">tekst<span><iframe src="http://www.dmi.dk/" title="DMI" width="480" height="360" scrolling="auto" frameborder="1.></iframe></span></a></span>
som giver en pop-up iframe ved mouseover.</div>
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : CLAN

Dato : 02-12-07 16:07
Er lige med på en kigger


Kommentar
Fra : molokyle

Dato : 02-12-07 18:18
Øheee.. der mangledes en tuborg = }

..før skidtet validerer. Ikke at IE gide 'lege med' af den grund

Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Default</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {border:0;margin:0;padding:0;}
body {color:#fff;background:#000;font-family:verdana,arial,sans serif;font-size:80%;padding:4px;}
.pop a {position:relative;}
.pop a span {display:none;}
.pop a:hover span {position:absolute;display:block;}
</style>
</head>
<body>
<div>
Dette er en
<span class="pop"><a href="#" title="">tekst<span><iframe src="http://www.dmi.dk/" title="DMI" width="480" height="360" scrolling="auto" frameborder="1"></iframe></span></a></span>
som giver en pop-up iframe ved mouseover.</div>
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : kalleanker

Dato : 03-12-07 10:15
Det er ikke et egentligt popup vindue jeg vil lave, snarere en info boks der popper op på mouseover eller ved klik.

Kommentar
Fra : CLAN

Dato : 03-12-07 11:38
Hvad er forskellen på en boks og et "lille" vindue, som Molo viser/demonstrere?
De er da begge 4-kantet


Kommentar
Fra : kalleanker

Dato : 03-12-07 11:41
Altså det skal ikke åbne i et nyt vindue som en reklame popup. Snarere ligesom når man klikker på en destination på googlemap. Hvis det alt så kan lade sig gøre?

Og hvad er koden i givet fald?

Kommentar
Fra : molokyle

Dato : 03-12-07 17:21
Googlemap er lavet i AJAX

Altså en serverside orienteret kode implementeret ved et kald til:

The XMLHttpRequest Object

Hvad med at læse de link du bli'r givet?

</MOLOKYLE>


Accepteret svar
Fra : molokyle
Modtaget 160 point
Dato : 03-12-07 17:27
Prøv: http://ajaxian.com/

..og: http://code.google.com/webtoolkit/

..hvis du vil lære mere og sætte dig ind i 'teknologien'

</MOLOKYLE>

Godkendelse af svar
Fra : kalleanker

Dato : 06-12-07 11:28
Tak for svaret molokyle - tror desværre det er over mit niveau. Så jeg nøjes med et pop-up billede i stedet!

Kommentar
Fra : molokyle

Dato : 06-12-07 19:36
Så tjek: http://www.cssplay.co.uk/menu/pop_ups

..det er vist kun 'sparrow' som du'er ?

Det er lavet ca. som dette: D:\Web\xhtml\cssboxing\temp\textmouseover.html

</MOLOKYLE>

Kommentar
Fra : molokyle

Dato : 06-12-07 19:40
Sludder: http://www.cssboxing.com/temp/textmouseover.html

..sku' det ha' været

</MOLOKYLE>

Kommentar
Fra : johanvts

Dato : 02-11-08 09:07
Citat
Min løsning virker i alle "standard compliant" browsere og validerer korrekt i alle DTD'er.


Hej Molokyle

Jeg har brugt din løsning et andet sted, og den virker helt perfekt i IE og Google Chrome, men det er somom Firefox nægter at læse [CDATA[ elementet. Det skal nævnes at jeg har flyttet al style-information over i et eksternt CSS dokument. [CDATA[ elementet returnerer også som "Parse error" når jeg validerer med W3C, du kan se fejlen her:

http://jigsaw.w3.org/css-validator/validator?uri=http://destronaut.dk/billigplakat/index.php%3Fside%3Dbestil%26id%3D8&profile=css21&usermedium=all&warning=1&lang=en

Tak for hjælpen :)

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177577
Tips : 31968
Nyheder : 719565
Indlæg : 6409071
Brugere : 218888
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.