Søg
Avatar billede nisseper Nybegynder
05. februar 2004 - 10:48 Der er 14 kommentarer og
1 løsning

Billede popup

Hej,

jeg ønsker en funktion, der forstørrer et billede i et popup vindue når jeg laver en mouseover på en thumbnail af samme billede.
Og derefter lukke popupvinduet ved mouseout.

Nogen simple forslag?

NP
Avatar billede roenving Novice
05. februar 2004 - 11:01 #1
-- Hvis du tilknytter funktionen til en mouseover:

http://roenving.users.whitehat.dk/WD1ResizeTilBillede.html

-- kan du bruge det, kan vi lige give dig muligheden for at lukke også !-)
Avatar billede nisseper Nybegynder
05. februar 2004 - 12:41 #2
Det er ikke helt ubrugeligt. Men vinduet måtte gerne forsvinde ved mouseout.
Faktisk er det præcis effekten som www.dba.dk benytter i deres billedannoncer.
NP
Avatar billede roenving Novice
05. februar 2004 - 13:38 #3
Det laves på samme måde, som hvis du klikker på et brugernavn her:

Der er på forhånd defineret en div med absolut position, den vises bare ikke (display:none; !-)

Når en mouseover sker, lægges det pågældende billede ind i, det flyttes hen, så det er på samme sted som musen, og vises så ...

Jeg tror, du skal prøve at kigge på overlib !o]

http://www.bosrup.com/web/overlib/
Avatar billede roenving Novice
05. februar 2004 - 13:41 #4
Nå den er stadig nede, men jeg fandt hurtigt nogle andre link via google: bosrup overlib (programmøren hedder Erik Bosrup !-)

f.eks. http://40ers.com/OLIB/
Avatar billede nisseper Nybegynder
06. februar 2004 - 09:00 #5
Det behøver slet ikke være så kompliceret som Bosrup.
Kan det ikke laves noget mere simpelt?
Det skal blot forstørre en thumbnail....
Avatar billede grunken Nybegynder
06. februar 2004 - 12:02 #6
sådan ?

<script type="text/javascript">
var ie = (document.all)?true:false

function visbil(str,f){
e = document.getElementById('stor')
if(ie){
  e.style.top  = f.clientY + document.body.scrollTop;
  e.style.left = f.clientX + document.body.scrollLeft+10;}
else{
  e.style.top = f.pageY+20;
  e.style.left = f.pageX;}
vis = (e.style.display=='none')?true:false
if(vis){
  e.src = str;
  e.style.display = "inline";
}
}

function skjul()
{
document.getElementById('stor').style.display = "none";
}
</script>

<body>
<img id="stor" style="display:none;position:absolute;border:1px solid #000000;"/>
<img src="billede.jpg" style="width:20px;" onmouseover="visbil(this.src,event)" onmouseout="skjul();"/>
</body>
Avatar billede nisseper Nybegynder
10. februar 2004 - 08:33 #7
Grunken! Det var præcist, hvad jeg skulle bruge.
Takker
Avatar billede grunken Nybegynder
10. februar 2004 - 10:22 #8
Velbekomme :o)

så kaster jeg et svar :)
Avatar billede nisseper Nybegynder
10. februar 2004 - 10:32 #9
Hey Grunken, har du en smart idé til hvordan jeg kan få popup billedet til at poppe op midt i en frame istedet for 10 pixels til højre for thumbnail'en??

NP
Avatar billede grunken Nybegynder
10. februar 2004 - 10:34 #10
Tjah, øjeblik :o)
Avatar billede grunken Nybegynder
10. februar 2004 - 10:45 #11
Sådanne her mester :o)

<script type="text/javascript">

function visbil(str,f){
e = document.getElementById('stor')
pic = new Image()
pic.src = str;

e.style.top = (document.body.offsetHeight-pic.height)/2;
e.style.left =(document.body.offsetWidth-pic.width)/2;

vis = (e.style.display=='none')?true:false
if(vis){
  e.src = str;
  e.style.display = "inline";
}
}

function skjul()
{
document.getElementById('stor').style.display = "none";
}
</script>

<body>
<img id="stor" style="display:none;position:absolute;border:1px solid #000000;"/>
<img src="billede.jpg" style="width:20px;" onmouseover="visbil(this.src,event)" onmouseout="skjul();"/>
</body>
Avatar billede nisseper Nybegynder
10. februar 2004 - 11:50 #12
Takker.
Det opfører godt nok lidt uhensigtsmæssigt.
Hvis thumbnail'en befinder sig øverst på skærmen i et scroll-bart html-dokument, vil popup-billedet godt nok poppe up bredde-mæssigt, midt på skærmen, men også så langt oppe at det ryger udenfor frame'n. Forstås?
Er et måske muligt at få popup-vinduet til at poppe op midt på en skærm, altså uafhængig af browserens vindue?
NP
Avatar billede grunken Nybegynder
10. februar 2004 - 12:14 #13
Jamen så er det jo den kære roenvings første kommentar du skal udnytte :o)
Avatar billede grunken Nybegynder
10. februar 2004 - 12:18 #14
for du kan ikke placere lag absolut, på tværs af frames :o)
Avatar billede nisseper Nybegynder
10. februar 2004 - 13:07 #15
Thought so. Roenvings løsning er bare ikke optimal til mit formål.
Jeg prøver mig lidt frem med Grunkens foreslag.
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
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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 14:53 TV4ever 3.0 Af valby i Diverse
I går 16:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I går 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
White papers
Flere white papers »