switch tussen plaatjes dmv een link
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)
1
2
3
4
5
6
7
8
9
10
11
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";
}
}
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
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>
<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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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>
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>
Adoptive Solution op 17/09/2022 15:23:20:
Hier een vereenvoudigde versie.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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>
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)
1
<script src="Inc\JS\main.js"></script>
main.js bestand
Code (php)
1
2
3
4
5
6
7
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";
}
}
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)
1
2
3
4
5
6
7
8
9
10
11
12
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>
<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.
toggleImage(this.id)
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)
toggleImage(this.id)
ID = id of moet de ID als volgt invullen?
Code (php)
1
2
3
4
5
6
7
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";
}
}
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";
}
}
<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.
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.
<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)
1
2
3
4
5
6
7
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";
}
}
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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";
?>
$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";
?>
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.