Hola ya habia posteado esto antes pero mas complicado ahora lo boy a simplificar bueno tengo una consulta en la que muestro los productos de una bd y junto a ellos una imagen que tiene que cambiar al darle click por ejemplo por defecto tiene la imagen de agregar y quiero que al darle clic se cmbie solo la imagen de agregar a la de quitar y viceversa utilizo dos paginas de php con las imagenes
bueno como ya habia posteado esto antes me recomendaron estudiar ajax asi que lo hice y trate de haerlo pero el problema esta que solo actuliza la imagen de el primer resultado y en todas las demas me cambia de pagina ademas de que en en el primer resultado al cambiar la imagen y volverle a clickear me cambia de pagina bueno les dejo mi codigo.
Gracias por sus respuestas
Nota: Tengo que usar php por que mas adelante boy a meter funciones
Código HTML:
<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>agregar</h1>
<div id="menu">
<?php include("conex.php");
$con=mysql_query("select descripcion from productos order by descripcion");
while($res=mysql_fetch_array($con)){
?>
<p><?php echo $res['descripcion'];?><div id="detalles"><a id="enlace1" href="pagina1.php?cod=1"><img src="../images/add.png" width="32" height="32"></a></div></p>
<?php }?>
</div>
</body>
</html> y en php dos paginas con las imagenes a cambiar
Pagina1
Código PHP:
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
if ($_REQUEST['cod']==1){?>
<a id='enlace1' href='pagina2.php?cod=2'><img src="../images/quitar.png" width="16" height="16" /></a>
<?php }
Pagina 2
Código PHP:
<?php
if($_REQUEST['cod']==2){?>
<a id="enlace1" href="pagina1.php?cod=1"><img src="../images/add.png" width="32" height="32" /></a>
<?php } ?>
y por ultimo el condigo ajax
Código:
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
var ob;
for(f=1;f<=1000;f++)
{
ob=document.getElementById('enlace'+f);
addEvent(ob,'click',presionEnlace,false);
}
}
function presionEnlace(e)
{
if (window.event)
{
window.event.returnValue=false;
var url=window.event.srcElement.getAttribute('href');
cargarHoroscopo(url);
}
else
if (e)
{
e.preventDefault();
var url=e.target.getAttribute('href');
cambiaricono(url);
}
}
var conexion1;
function cambiaricono(url)
{
if(url=='')
{
return;
}
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open("GET", url, true);
conexion1.send(null);
}
function procesarEventos()
{
var detalles = document.getElementById("detalles");
if(conexion1.readyState == 4)
{
detalles.innerHTML = conexion1.responseText;
}
else
{
detalles.innerHTML = 'Cargando...';
}
}
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}