Avatar billede zlag Nybegynder
23. april 2007 - 01:11 Der er 5 kommentarer og
1 løsning

Hvordan åbner man forskellige billeder i samme layer?

Jeg er i gang med at lave et site, hvor der skal være mulighed for at åbne forskellige billeder i et layer, ved at klikke på det givne billede, dette sker med 2 funktioner show_it(id) og hide_it(id) - http://bedste.mathhelp.dk/Galleri.html...

<script type="text/javascript">

function show_it(id){
            if (id == boks1) {
                                document.all.boks1.style.visibility = "visible";
               
            }
            }
           
function hide_it(id){
            if(id == boks1) {
                document.all.boks1.style.visibility = "hidden";
            }
            }


<div id="boks1">
<img name="boksimg" src="onClick="hide_it(boks1)">
</div>
           
Mit problem ligger i, at der er rimelig mane billeder på siden, så det vil være ret dårlig kode, hvis jeg "bare" definerer en masse layer"bokse" og funktioner til hver af dem.

Jeg har den idé, hvis der så snart show_it(id) bliver kørt, at billedet i layeret får ændret kilde (src) til det billede, man trykkede på. Det jeg troede, jeg kunne gøre var at indsætte:

document.all.boksimg.src = document.all.my.src;

i funktionen, men dette resulterer i, at det kun er ét bestemt billede, der bliver åbnet - hvad kan jeg gøre..? alternativ kode accepteres - men helst så simpel som mulig!!! ;)

/Kasper
Avatar billede jhe-ting Nybegynder
23. april 2007 - 05:31 #1
1: Du bør have en DTC der undgår 'Quirks mode';

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

2: Denne funktion motager billedelementet som argument og viser det i boximg

    function frameShow(imgElm){
        document.all.boksimg.src = imgElm.src;
        document.all.boks1.style.visibility = "visible";
    }

3: Sådan overføres billedelementet som parameter

    <img onclick="frameShow(this)"  src="..."  ... >
Avatar billede jhe-ting Nybegynder
23. april 2007 - 05:38 #2
Dette er det samme som http://www.eksperten.dk/spm/774693
Avatar billede windcape Praktikant
23. april 2007 - 05:41 #3
jhe-ting, hvorfor ? han bruger jo alligevel document.all
---

En mere rigtig javascript kode ville være følgende:

function toggleImage(image) {
    var boxImage = document.getElementById('boxImage');
        boxImage.src = image.src;
    if(boxImage.style.display == 'none') {
        boxImage.style.display = 'block';
    } else {
        boxImage.style.display = 'none';
    }
}

og så have følgende element til at vise de nye billeder i

<img src="" id="boxImage" style="display: none;">

og åbne dem via.

<img src="foo/bar/bas.jpg" onclick="toggleImage(this)">
Avatar billede windcape Praktikant
23. april 2007 - 05:43 #4
Derudover indeholder din html ekstremt mange fejl. Jeg vil kraftigt anbefale at du øver dig i at kode korrekt html før du forsøger at arbejde videre med javascript.

----

jhe-ting du lægger vel forhelvende ikke et svar for en document.all løsning?
Avatar billede windcape Praktikant
23. april 2007 - 05:44 #5
Desuden skal han selv lukke spørgsmålet ;) og give sig selv pointene
Avatar billede zlag Nybegynder
23. april 2007 - 13:41 #6
her er den version, der hjælper mig bedst - koden er en kombineret version af min og showsource's:
<html>
<head>
<title>Javascript test</title>
<script type="text/javascript">


function display_div(im) {
    if(document.getElementById) {
    document.all.galleri.style.visibility = "visible";
    return document.getElementById('galleri').innerHTML = '<img src="' + im + '">';
    } else if (document.all) {
    return document.all.galleri_pre.innerHTML = '<img src="/' + im + '">';
    } else {
    return false;
    }
}


function hide_it(id){
            if(id == galleri) {
                document.all.galleri.style.visibility = "hidden";
            }
            }

</script>
</head>
<body>

<img src="pic1.jpg" onclick="display_div('pic1.jpg');"><br />

<a href="#" onclick="display_div('pic1.jpg');">Billede 2</a><br />

<a href="#" onclick="display_div('pic1.jpg');">Billede 3</a>

<div id="galleri" onclick="hide_it(galleri);"></div>

</body>
</html>
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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

IT-JOB