Asger-P kom med denne ide:
> Hej Karl
>
> On the: 12. of september-2011 At: 00:14 Karl Erik Christensen wrote:
>
>
>> Et link har jo 4 tilstande:
>> 1. a
>> 2. a:hover
>> 3. a:active
>> 4. a:visited
>>
>> Her er a:hover vel særlig interessant - ikke?
>
> Nej, jeg hader selv de der vinduer der popper frem når man kommer til at
> køre musen over dem. Vinduet skal først komme når man klikker, men det må
> meget gerne være af samme type som dem der bruges ved hover, så lidt
> ramme som muligt.
> Jeg tænker mig at vinduet kan lukke når man klikker på det eller bruger
> escape tasten, det med escape ved jeg ikke om man kan i en browser
>
>> Hvordan mener du dette kan udnyttes?
>>
>> F.eks. a: - lille billede, a:hover - stort billede.
>
> Bare et almindeligt tekst link, et klik og så et billede
> 250x150 pixels ca. et klik mere og så er billedet væk igen.
>
>
> Tak for svaret.
> Venlig hilsen
> Asger-P
Du kan ikke gøre det i HTML - der skal bruges scripting af en eller
anden slags - sædvanligvis javascript.
Men det er ikke så svært - uden at det betyder, det er problemløst.
Det første problem her, er at du vil bruge klik på et link - og
umiddelbart går det ikke. For et klik på et link, henter en ny side.
Så dit spørgsmål er ikke entydigt. Hvis du vil have et link til en ny
side, der viser det større billede, er det vel bare at lave siden, der
viser billedet, og et link til den.
Hvis du vil have et element på den eksisterende side til at blive vist
når der klikkes på det, bruger du onclick eventen på elementet, og skal
på forhånd have popup elementet defineret med display:none - onclick
skal så bare ændre det til display:block.
Popuppen vil almindeligvis være et absolut positioneret element, ellers
vil det flytte rundt på sidens øvrige indhold, og det vil skulle have
et id (unikt), da det er den nemmeste måde, at identificere det i
scripting.
F.eks.:
HTML:
<div class="billedlink" onclick="Vis('popup1');">Se stort billede<div
id="popup1" class="popup"><img scr="img1.jpg" alt="Stort billede"
onclick="Skjul('popup1');"></div></div>
CSS:
..popup {
display : none;
position : absolute;
top : 5px;
left : 50px;
}
javascript:
function Vis(pop) {
var pop_elm = document.getElementById(pop);
if (pop_elm) {
pop_elm.style.display = 'block';
}
}
function Skjul(pop) {
var pop_elm = document.getElementById(pop);
if (pop_elm) {
pop_elm.style.display = 'none';
}
}
Derudover, kan billedlink selvfølgelig formatteres, så det ligner et
link, hvis det er vigtigt - eller selvfølgelig som du ellers vil have
det.
Og du behøver blot kopiere HTML'en det antal gange du har brug for den
- nyt id til hver popup, og tilsvarende ændring af parametrene til
onclick (det er de tre stedet popup1 optræder i eksemplet).
Det er ikke hverken perfekt eller unobtrusive, men det virker (ikke
testet), og kan vel give en lille ide....
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk