switch tussen plaatjes dmv een link

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mohamed nvt

Mohamed nvt

17/09/2022 13:41:58
Quote Anchor link
Zoals het onderwerp zegt;
Ik heb 2 icoontjes als twee aparte links gemaakt.
De bedoeling is dat wanneer je klikt op icoontje 1, dan zie je het plaatje 1 en wanneer je klikt op icoontje 2 dan moet in hetzelfde div het tweede plaatje weergegeven worden.
Helaas lukt dit niet en zie je dat plaatje 2 onder het plaatje 1 verschijnt

Hiervoor gebruik ik onderstaande JS
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
function toggleImage(){

imgsrc= document.getElementById("flag1").src;
    if(imgsrc.indexOf("Inc\img\vlaggen\nederlands.jpg")!=
    -1) {
            document.getElementById("flag1").src="Inc\img\vlaggen\nederlands.jpg";
        } else {

            document.getElementById("flag2").src="Inc\img\vlaggen\uk.jpg";
        }
}

HTML code
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="main">
<div class="content">
        <p>Jocke Overwater in het nieuws</p>
        <a id="flag1" href=""><img src="Inc\img\vlaggen\nederlands.jpg" onclick="toggleImage()"></a><br>
        <a id="flag2" href=""><img src="Inc\img\vlaggen\uk.jpg" onclick="toggleImage()"></a>
      </div>
      <script src="Inc\JS\main.js"></script>
        <div class="plaatjes">
    <img class="foto" src="Inc\img\Boek\Afbeelding 059.jpg">
     <img class="foto" src="Inc\img\Boek\Afbeelding.jpg">
    </div>
    
  </div>

Werkende voorbeeld:
http://jocke-overwater.nl/boek.php
Alvast bedankt voor het meedenken.
 
PHP hulp

PHP hulp

28/03/2024 18:19:41
 
Adoptive Solution

Adoptive Solution

17/09/2022 15:23:20
Quote Anchor link
Hier een vereenvoudigde versie.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
function toggleImage(id) {
    if ( id == 'f1') {
        document.getElementById("foto").src = "afbeeldingnl.jpg";
    } else if ( id == 'f2' ) {
        document.getElementById("foto").src = "afbeeldinguk.jpg";
    }
}
</script>

<div class="main">

    <div class="content">
        <img id="f1" src="nl.jpg" onclick="toggleImage(this.id);"><br />
        <img id="f2" src="uk.jpg" onclick="toggleImage(this.id);"><br />
    </div>

    <hr />

    <div class="plaatjes">
        <img id="foto" src="afbeeldingnl.jpg" />
    </div>

</div>
 
Mohamed nvt

Mohamed nvt

19/09/2022 22:13:54
Quote Anchor link
Adoptive Solution op 17/09/2022 15:23:20:
Hier een vereenvoudigde versie.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
function toggleImage(id) {
    if ( id == 'f1') {
        document.getElementById("foto").src = "afbeeldingnl.jpg";
    } else if ( id == 'f2' ) {
        document.getElementById("foto").src = "afbeeldinguk.jpg";
    }
}
</script>

<div class="main">

    <div class="content">
        <img id="f1" src="nl.jpg" onclick="toggleImage(this.id);"><br />
        <img id="f2" src="uk.jpg" onclick="toggleImage(this.id);"><br />
    </div>

    <hr />

    <div class="plaatjes">
        <img id="foto" src="afbeeldingnl.jpg" />
    </div>

</div>


Dankjewel voor het meedenken, helaas zie ik geen verschil.
Het gaat om het pagina: http://jocke-overwater.nl/boek.php
Ik heb jouw coda geïntegreerd in het pagina en het ziet er als volgt uit:

Header.php heb ik aangepast door een verwijzing te maken naar JS-bestand
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<script src="Inc\JS\main.js"></script>


main.js bestand
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
function toggleImage(id) {
    if ( id == 'flag1') {
        document.getElementById("Inc\img\vlaggen\nederlands.jpg").src = "nederlands.jpg";
    } else if ( id == 'flag2' ) {
        document.getElementById("Inc\img\vlaggen\vk.jpg").src = "vk.jpg";
    }
}


boek.php:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<div class="main">
<div class="content">
        <p>Jocke Overwater in het nieuws</p>
        <img id="flag1" src="Inc\img\vlaggen\nederlands.jpg" onclick="toggleImage()">
        <img id="flag2" src="Inc\img\vlaggen\vk.jpg" onclick="toggleImage()">
      </div>
        <div class="plaatjes">
    <img class="foto" src="Inc\img\Boek\Afbeelding 059.jpg">
     <img class="foto" src="Inc\img\Boek\Afbeelding.jpg">
    </div>
    
  </div>

Wat nu niet werkt en waarbij ik hulp nodig heb:
1 - beide plaatjes worden weergegeven ipv dat er eentje wordt weergegeven.
2 - als je nu klikt op de icoontjes, dan gebeurt er niets en het zijn geen hyperlinks meer.
 
Ozzie PHP

Ozzie PHP

19/09/2022 23:40:43
Quote Anchor link
Je geeft in ieder geval geen ID mee aan de functie toggleImage() waar Adoptive Solution dat wel doet.

toggleImage(this.id)
 
Mohamed nvt

Mohamed nvt

20/09/2022 21:15:48
Quote Anchor link
Ozzie PHP op 19/09/2022 23:40:43:
Je geeft in ieder geval geen ID mee aan de functie toggleImage() waar Adoptive Solution dat wel doet.

toggleImage(this.id)

ID = id of moet de ID als volgt invullen?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
function toggleImage(flag1, flag2) {
    if ( id == 'flag1') {
        document.getElementById("Inc\img\vlaggen\nederlands.jpg").src = "nederlands.jpg";
    } else if ( id == 'flag2' ) {
        document.getElementById("Inc\img\vlaggen\vk.jpg").src = "vk.jpg";
    }
}
 
Ozzie PHP

Ozzie PHP

20/09/2022 21:38:02
Quote Anchor link
Zie het voorbeeld van Adoptive Solotion

<img id="f1" src="nl.jpg" onclick="toggleImage(this.id);"><br />

En vergelijk dat met wat jij hebt:

<img id="flag1" src="Inc\img\vlaggen\nederlands.jpg" onclick="toggleImage()">

Ik heb het verschil blauw gemaakt.
 
Mohamed nvt

Mohamed nvt

20/09/2022 22:18:22
Quote Anchor link
Ozzie PHP op 20/09/2022 21:38:02:
Zie het voorbeeld van Adoptive Solotion

<img id="f1" src="nl.jpg" onclick="toggleImage(this.id);"><br />

En vergelijk dat met wat jij hebt:

<img id="flag1" src="Inc\img\vlaggen\nederlands.jpg" onclick="toggleImage()">

Ik heb het verschil blauw gemaakt.


Haha oke, ik zag het niet en ik heb het aangepast, helaas zonder resultaat :(
Ik heb het als volgt aangepast:
main.js
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
function toggleImage(id) {
    if ( id == 'flag1') {
        document.getElementById("Inc\img\vlaggen\nederlands.jpg").src = "nederlands.jpg";
    } else if ( id == 'flag2' ) {
        document.getElementById("Inc\img\vlaggen\vk.jpg").src = "vk.jpg";
    }
}

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
$page
= "boek";
include "Inc/header.php";
?>

<div class="main">
<div class="content">
        <p>Jocke Overwater in het nieuws</p>
        <img id="flag1" src="Inc\img\vlaggen\nederlands.jpg" onclick="toggleImage(flag1)">
        <img id="flag2" src="Inc\img\vlaggen\vk.jpg" onclick="toggleImage(flag2)">
      </div>
        <div class="plaatjes">
    <img class="foto" src="Inc\img\Boek\Afbeelding 059.jpg">
     <img class="foto" src="Inc\img\Boek\Afbeelding.jpg">
    </div>
    
  </div>
  <?php
include "Inc/footer.php";
?>
 
Ozzie PHP

Ozzie PHP

21/09/2022 01:07:02
Quote Anchor link
Wel een beetje opletten hè ;-) Ik geef toch echt duidelijk aan wat Adoptive Solution zegt:

onclick="toggleImage(this.id);"

Vervolgens maak jij er dit van:

onclick="toggleImage(flag1)"

Dat is niet hetzelfde toch? :-s

Dit lijkt me ook niet te kloppen:

document.getElementById("Inc\img\vlaggen\nederlands.jpg").src

Zoek eens op Google wat document.getElementById inhoudt, en ga dan vervolgens na of jij de juiste informatie ophaalt. Spoiler alert: ik denk het niet :-)




Tip: verdiep je in jQuery. Dat maakt het wat eenvoudiger.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.