/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS popup
Fra : Leif Phristensen


Dato : 09-02-03 06:37

Tag først et kig på den her side:
http://www.meyerweb.com/eric/css/edge/popups/demo.html (meget imponerende
ting, han har de andre steder også).

Jeg har prøvet at rode lidt med den effekt, han bruger, men jeg kan ikke få
den til at makke ret. Her er lidt copy&paste (indhold redigeret væk) fra
det, jeg roder med:

INDEX.HTML:
=====================================================================
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-
strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<link rel="stylesheet" href="./common.css" type="text/css">
</head>

<body>

<div id="headline">
<h1>Headline</h1>
</div>

<div id="sidebar">
<p><a href="./index.html">Main<span>Go to the root of the problem. The
place where everything begins</span></a></p>
<p><a href="./page1.html">Page1<span>Let's go dance and slap each other in
the face with some fishes</span></a></p>
<p><a href="./page2.html">Page2<span>And there was much rejoicing (yay!)
</span></a></p>
</div>

<div id="maintext">
<h3>Teh news!:</h3>
<p>
It's alive. It's alive!
</p>
</div>

</body>
</html>
=====================================================================

COMMON.CSS:
=====================================================================
#headline {
width: 80%;
text-align: center;
}

#sidebar {
float: left;
width: 10%;
margin-top: 3.2em;
}

#maintext {
float: left;
width: 70%;
}

div#sidebar a span {display: none;}

div#sidebar a:hover span {display: block;
position: absolute; top: 300px; left: 0; width: 10%;
padding: 5px; margin: 10px; z-index: 100;
color: #000000;
font: 0.7em trebuchet, verdana, arial, sans-serif; text-align: center;}

body { background-color: #F8F8FF;
margin: 2em 2em 2em 2em; }

a { font-family: trebuchet, verdana, arial, sans-serif; }
a:link { color: #8888BB; }
a:active { color: #444499; background-color: #F0F0F8; }
a:visited { color: #000066; }
a:hover { color: #444499; }

h1,h2,h3,p
{ color: #000000;
font-family: trebuchet, verdana, arial, sans-serif;
}

h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1em; }
p { font-size: 0.9em;
=====================================================================

Text-zoom dur selvfølgelig ikke, når man har værdier angivet i px, så det
skal rettes på et tidspunkt, men det store problem er, at den ikke vil vise
pop-up teksten uden text-decoration eller den rigtige farve.

Hvis jeg kan få det her til at du, så spekulerede jeg på, om man kunne
bruge noget lignende til en slags ordbogsfunktion, hvor man flytter
markøren hen over det ord, man vil have forklaret, og der kommer så en
forklaring op. Jeg har set et par løsninger baseret på DHTML, og jeg synes,
at de er meget uelegante.

 
 
Knud Gert Ellentoft (09-02-2003)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 09-02-03 07:08

Leif Phristensen <ouaa@ouaa.nz> skrev :

>Jeg har prøvet at rode lidt med den effekt, han bruger, men jeg kan ikke få
>den til at makke ret. Her er lidt copy&paste (indhold redigeret væk) fra
>det, jeg roder med:

Det virker fint nok i Mozilla, det virker ikke i IE, formentlig
fordi IE ikke understøtter hover på andet end <a>, hvor Mozilla
(m.fl.) gør på alle tags.

Men på den anden side, det virker jo på
http://www.meyerweb.com/eric/css/edge/popups/demo.html.

Jeg vil prøve at forsøge mig frem i aften, hvis der ikke er
andre, der kommer med en løsning.

--
Knud - http://home13.inet.tele.dk/smedpark/
Når der svares på et indlæg, svar venligst under det citerede og
skær venligst det væk, du ikke svarer på, ellers ryger du i killfiltret.
Svar kun i nyhedsgruppen - tak! E-mails besvares ikke.

Erik Ginnerskov (09-02-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 09-02-03 17:07


"Leif Phristensen" <ouaa@ouaa.nz> skrev
> Hvis jeg kan få det her til at du, så spekulerede jeg på, om man kunne
> bruge noget lignende til en slags ordbogsfunktion, hvor man flytter
> markøren hen over det ord, man vil have forklaret, og der kommer så en
> forklaring op. Jeg har set et par løsninger baseret på DHTML, og jeg
synes,
> at de er meget uelegante.

En funktion, der forklarer vanskelige ord kan laves med simpel html:

<span title="Et oscilloscop er et måleinstrument, som grafisk viser
spændingskurver">oscilloscop</span>

Indsætter du koden på en side, får du kun ordet oscilloscop. Ved OnMouseOver
kommer et lille popup, der forklarer ordet.

Er det ikke godt nok, kan du lave et decideret popupvindue, der indeholder
den forklarende tekst. Dette vindue kan du forudindstille til at lukke efter
x sekunder.

<a href="#"
onclick:window.open('nytvindue.htm','','scrollbars=auto,height=350,width=550
,
top=20,left=20');return false;">Dit link</a>

.... åbner vinduet.

I det nye vindue sætter du en timeout i body:

<body onload="setTimeout(window.close, 5000)">

Koden lukker vinduet efter 5 sekunder. Juster selv efter behov.

--
Med venlig hilsen
Erik Ginnerskov - eriksnabelaginnerskovdotdk
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Søg
Reklame
Statistik
Spørgsmål : 177554
Tips : 31968
Nyheder : 719565
Indlæg : 6408852
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste