Change img SRC with PHP

Question

Change img SRC with PHP

Navigation

#1 by (0 votes)

1

Well I have the img tag and when I click on a div with id="btnsiguiente" I change the path of img , doing this with javascript is easy if I create an array with the routes inside but if the routes of the I have images in a database as I would?

This is my javascript code:

<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
	<link rel="stylesheet" href="cssstack.css">
</head>
	<script>
		var rutas=["images/img1.jpeg","images/img2.jpeg","images/im3.jpg","images/img4.jpg"];
		var img;
		var x=-1;
		function siguiente()
		{
		
	btnsiguiente=document.getElementById("btnsiguiente");
	
			btnsiguiente.addEventListener("click",siguiente_img,false);
		

		}
		function siguiente_img()
		{
			x++;
			img=document.getElementsByTagName("img");
			img[0].src=rutas[x];
		}
		window.onload=siguiente;
	</script>
<body>
	<div >
	<img src="" width="200px" heigth="300px" />
	</div>
	<div id="btnsiguiente">
	</div>
</body>
</html>

How would I edit the script if the routes are pulled from the database?

mysql javascript php

asked by Orlando Pasaca Rojas 19.01.2018 в 15:11

source

1 answer

Dowload File Primerfaces Java I want to send a file in a JSON using an AJAX without using formData, is it possible?

score 0 · Accepted Answer

You can use jquery for that and you would keep a large part of your code, obtaining the routes by means of a request:

var rutas;
var img;
var x=-1;

$.ajax({
   url:'/ruta_al_server', //cuando haces esta peticion el server te manda el arrglo con las rutas
   type:'POST',
}).done(function(data){ // data trae el arreglo con las rutas
   //aqui le darias los valores a tu misma variable rutas
    rutas = data.datos  // pongo data.datos suponiendo que envias un json {datos:['/r1','/r2',...] }

})

function siguiente()
        {

    btnsiguiente=document.getElementById("btnsiguiente");

            btnsiguiente.addEventListener("click",siguiente_img,false);


        }
        function siguiente_img()
        {
            x++;
            img=document.getElementsByTagName("img");
            img[0].src=rutas[x];
        }
        window.onload=siguiente;

Note: The request to bring the routes you could call when you want it could be when the onLoad of the site occurs.