switch tussen plaatjes dmv een link

Door Mohamed nvt op 17-09-2022 13:41

2.425 views

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


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


<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.

A Adoptive Solution

17-09-2022 15:23

Hier een vereenvoudigde versie.

<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>

M Mohamed nvt

19-09-2022 22:13

Adoptive Solution op 17/09/2022 15:23:20

Hier een vereenvoudigde versie.

<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


<script src="Inc\JS\main.js"></script>

main.js bestand


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:


<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

19-09-2022 23:40

Je geeft in ieder geval geen ID mee aan de functie toggleImage() waar Adoptive Solution dat wel doet.

toggleImage(this.id)

M Mohamed nvt

20-09-2022 21:15

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?


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

20-09-2022 21:38

Zie het voorbeeld van Adoptive Solotion

<img id="f1" src="nl.jpg" onclick="toggleImage([color="blue"]this.id[/color]);"><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.

M Mohamed nvt

20-09-2022 22:18

Ozzie PHP op 20/09/2022 21:38:02

Zie het voorbeeld van Adoptive Solotion

<img id="f1" src="nl.jpg" onclick="toggleImage([color="blue"]this.id[/color]);"><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


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";
    }
}


<?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

21-09-2022 01:07

Wel een beetje opletten hè ;-) Ik geef toch echt duidelijk aan wat Adoptive Solution zegt:

onclick="toggleImage([color="blue"]this.id[/color]);"

Vervolgens maak jij er dit van:

onclick="toggleImage([color="blue"]flag1[/color])"

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.

Reageren

Inloggen om te reageren