I have some PNG images that should be clickable (ex.onclick="changeCamera()").
They work fine as long as I put them in the index.php page, but this element (or others like buttons and input fields) just won't work on my other pages where I need them to work.
I'm only using the index.php page as the "home" page, and all the rest of my pages open with <?php include(pagina($_GET['pagina'])); ?> in the <SECTION> part. I don't know PHP, it's something that I copied from a previous project.
This is my index page where the buttons work just fine:
<?php
include("inc/inc_pagina.php");
if(!isset($_GET['pagina'])){
$_GET['pagina'] = "home";
}
?>
<!DOCTYPE html>
<html>
<head>
<title> test site </title>
<meta charset="utf-8">
<meta name="description" content="Test website">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="javascript/buttons.js"></script>
</head>
<body>
<header>
<h1> test1</h1>
<nav>
<ul id="main-menu">
<li><a href="index.php?pagina=home" target="_self">Home</a></li>
<li><a href="index.php?pagina=test">Testpagina</a></li>
<!-- <li><a href="http://validator.w3.org/">w3c validator</a></li> -->
</ul>
</nav>
</header>
<br ><br ><br ><br ><br ><br >
<img src="images/alert2.png" id="alert" onclick="changeAlert()" style="cursor:pointer;" width="25px" height="25px">
<img src="images/na2.png" id="na" onclick="changeNa()" style="cursor:pointer;" width="25px" height="25px">
<img src="images/checked2.png" id="checked" onclick="changeChecked()" style="cursor:pointer;" width="25px" height="25px">
<img src="images/error2.png" id="error" onclick="changeError()" style="cursor:pointer;" width="25px" height="25px">
<img src="images/comment2.png" id="comment" onclick="changeComment()" style="cursor:pointer;" width="22px" height="22px">
<img src="images/camera2.png" id="camera" onclick="changeCamera()" style="cursor:pointer;" width="25px" height="25px">
<section>
<?php include(pagina($_GET['pagina'])); ?>
</section>
<footer>Copyright © 2019
</footer>
</body>
</html>
This is my test page where nothing seems to work, and nothing is even clickable:
<script type="text/javascript" src="javascript/buttons.js"></script>
<img src="images/alert2.png" id="alert" onclick="changeAlert()" style="cursor:pointer;" width="25px" height="25px"/></br>
<img src="images/na2.png" id="na" onclick="changeNa()" style="cursor:pointer;" width="25px" height="25px"></br>
<img src="images/checked2.png" id="checked" onclick="changeChecked()" style="cursor:pointer;" width="25px" height="25px"></br>
<img src="images/error2.png" id="error" onclick="changeError()" style="cursor:pointer;" width="25px" height="25px"></br>
<img src="images/comment2.png" id="comment" onclick="changeComment()" style="cursor:pointer;" width="22px" height="22px"></br>
<img src="images/camera2.png" id="camera" onclick="changeCamera()" style="cursor:pointer;" width="25px" height="25px"></br>
