Cómo cambiar imagen al dar CLICK en su Hipervínculo Mailto????

[benjaminvera]

Tengo una tabla donde en uno de los registros tengo una imagen de Sobre Mail con un tache ROJO que tiene un hipervínculo de Mailto y lo que necesito es que cuando le de click a la imagen de Sobre Mail con un tache ROJO me envie al Mailto pero que también me cambie la imagen de Sobre Mail con un tache ROJO X una imagen de Sobre Mail con una palomita VERDE
La imagen de Sobre Mail con un tache ROJO se llama enviadoNO.jpg
La imagen de Sobre Mail con una palomita VERDE se llama enviadoSI.jpg

En este caso el Mailto ya tiene su cuerpo y toma valores de la base de Datos.
Pongo un codigo a continuación para que vean lo que llevo hasta el momento.

Código PHP:

      echo "<table class=\"normal\" summary=\"Tabla genérica\" cellpadding='3' cellspacing='1' border='2' width='730' align='left'>";
    echo "<tbody>";
    echo "<tr>";
//    echo "  <th width='150'>Correo</th>";
    echo "  <th >Correo</th>";
    echo "  <th >Centro</th>";
    echo "  <th >Planta</th>";
    echo "  <th >Mes</th>";
    echo "  <th >A&ntilde;o</th>";
    echo "  <th >Fecha de<br>&nbsp;&nbsp;solicitud&nbsp;&nbsp;</th>";
    echo "  <th >Message</th>";
    echo "  <th >Autorizaci&oacute;n</th>";
    echo "  <th >Imagen</th>";
    echo "  <th >E-mail<br>enviado</th>";
    echo "</tr>";
while ($myrow = mysql_fetch_array($result))
{
echo "<TR>";
echo "<TD  name=correo><div style=\"overflow:auto; width: 150px; height: 100px\"><p>".$myrow['correo']."</p></div></td>";
echo "<td  name=centro\">".$myrow["pa1"]."</td>";
echo "<TD  name=planta\">".$myrow["est1"]."</td>";
echo "<TD  name=mes>".$myrow['mes']."</td>";
echo "<td  name=anio>".$myrow["anio"]."</td>";
echo "<TD  name=fecha_solicitud>".$myrow["fecha_solicitud"]."</td>";
echo "<TD  name=message><div style=\"overflow:auto; width: 200px; height: 100px\"><p>".$myrow["message"]."</p></div></td>";
echo "<TD  name=autorizacion>".$myrow["autorizacion"]."</td>";
if ($myrow['autorizacion'] == NULL)
{
        echo "<TD width='50' name='image'><a href=\"Key_Generate.php?correo=".$myrow[correo]."&centro=".$myrow[pa1]."&planta=".$myrow[est1]."&mes=".$myrow[mes]."&anio=".$myrow[anio]."&fecha_solicitud=".$myrow[fecha_solicitud]."\"><img src=\"images/X.png\" border=\"0\"></a></TD>";
}
else
{
        echo "<TD width='50' name='email'><A HREF=\"mailto:".$myrow['correo'].
        "&subject=Clave para permitir Modificacion de Indicadores
        &body=Le%20 informo%20 que su solicitud para Modificacion%20 de%20 Indicadores%20 le%20 ha%20 sido%20 otorgada.
         %0D%0A %0D%0A La%20 clave%20 que%20 se%20 le%20 ha%20 concedido%20 es:%0D%0A %0D%0A".$myrow['autorizacion'].
        "%0D%0A %0D%0A Esta%20 clave%20 le%20 permitira%20 modificar%20 los%20 Indicadores%20 de%20 
         %0D%0A %0D%0A la%20 Planta%20 de:%20%20".$myrow['est1'].
        "%0D%0A %0D%0A del%20 Centro%20 de:%20%20".$myrow['pa1'].
        "%0D%0A %0D%0A La%20 fecha%20 de%20 solicitud%20 se%20 hizo%20 el%20 dia:%20%20".$myrow['fecha_solicitud'].
        "%0D%0A %0D%0A Y%20 a%20 partir%20 de%20 esta%20 fecha%20 solo%20 cuenta%20 con%20 2%20 dias%20 para%20
         %20la Modificacion%20 de%20 Indicadores\"><img src='images/enviadoNO.jpg' value='enviadoNO' onClick=\"location.href = 'Table Keys.php?correo=".$myrow['correo']."&centro=".$myrow['pa1']."&planta=".$myrow['est1']."&mes=".$myrow['mes']."&anio=".$myrow['anio']."&fecha_solicitud=".$myrow['fecha_solicitud']."&email=".$myrow['email']."'\"></A></TD>";
}  
}
echo "</TR>";
echo "</TABLE>"; 
   

Otra duda. Hay manera de saber si mailto (correo predeterminado del usuario) haya mandado el correo de mailto....???? Esta duda no me importa mucho ya que creo que no hay manera de controlar esa parte con alguna variable o algún filtro.... pero si la hay será muy bienvenida....

[sander]

Hola.

Creo que lo que pides es javascript, tendrias que usar el evento onclick para hacerlo del lado del cliente.

Saludos.

[benjaminvera]

Ya había hecho un intento con esa parte del onclick....

Pero no me funcionó....

Lo voy a intentar de nuevo y lo posteo para ver cómo va la cosa.....

Saludos y mil gracias por tu atención sander....

[sander]

Mira si usas usando jquery el codigo seria algo tan secillo como esto:

primero ponle un id a tu imagen algo asi:

<img src="direcciondelaimagen" Id="email_img" />

Luego el codigo javascript quedaria asi:

Código Javascript:

$('#email_img').click(function(){
$('#email_img').attr('src', 'aqui pones la direccion de tu nueva imagen');
});
 

[benjaminvera]

No entendí esta parte del jquery y el id.....

Quizá si me echas una manita de gato con una explicación un poco más profunda y clara para todos los lectores incluyendome yo nos puedas iluminar más de tus conocimientos.... jejejeje....

No lo tomes a mal pero recuerda que de los foros aprendemos y nos retroalimentamos todos.

Saludos....

[sander]

Sorry, lo que pasa es que sin querer le di en enviar y se publico antes de terminar pero ya esta editado.

A y por cierto Jquery es un framework javascript que puedes descargarlo y ponerlo en tu server o linkearlo directamente desde google o la web oficial de jquery, solamente tienes que insertarlo en el head, y luego el codigo que puse ponerlo entre el head tambien.

algo asi:

Código HTML:

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
   $('#email_img').click(function(){
      $('#email_img').attr('src', 'aqui pones la direccion de tu nueva imagen');
   });
});
</script>
</head
 

Saludos.

[benjaminvera]

Acerca del JQuery.....

estoy viendo esta web... http://www.visualjquery.com/

bastante interesante....

En un momento más lo hago y posteo el resultado....

Mil gracias.... Sander...

el de todos y de UNO.....

[benjaminvera]

NO me jala.... Sander..... qué estoy haciendo mal...????

Mi código es el siguiente:


<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('#email_img').click(function(){
$('#email_img').attr('src', 'images/enviadoSI.jpg');
});
});
</script>

Código PHP:

      echo "<table class=\"normal\" summary=\"Tabla genérica\" cellpadding='3' cellspacing='1' border='2' width='730' align='left'>";
    echo "<tbody>";
    echo "<tr>";
//    echo "  <th width='150'>Correo</th>";
    echo "  <th >Correo</th>";
    echo "  <th >Centro</th>";
    echo "  <th >Planta</th>";
    echo "  <th >Mes</th>";
    echo "  <th >A&ntilde;o</th>";
    echo "  <th >Fecha de<br>&nbsp;&nbsp;solicitud&nbsp;&nbsp;</th>";
//    echo "  <th width=\"200px\">message</th>";
    echo "  <th >Message</th>";
    echo "  <th >Autorizaci&oacute;n</th>";
    echo "  <th >Imagen</th>";
    echo "  <th >E-mail<br>enviado</th>";
    echo "</tr>";
///*
while ($myrow = mysql_fetch_array($result))
{
echo "<TR>";
echo "<TD  name=correo><div style=\"overflow:auto; width: 150px; height: 100px\"><p>".$myrow['correo']."</p></div></td>";
echo "<td  name=centro\">".$myrow["pa1"]."</td>";
echo "<TD  name=planta\">".$myrow["est1"]."</td>";
echo "<TD  name=mes>".$myrow['mes']."</td>";
echo "<td  name=anio>".$myrow["anio"]."</td>";
echo "<TD  name=fecha_solicitud>".$myrow["fecha_solicitud"]."</td>";
echo "<TD  name=message><div style=\"overflow:auto; width: 200px; height: 100px\"><p>".$myrow["message"]."</p></div></td>";
echo "<TD  name=autorizacion>".$myrow["autorizacion"]."</td>";
if ($myrow['autorizacion'] == NULL)
{
        echo "<TD width='50' name='image'><a href=\"Key_Generate.php?correo=".$myrow[correo]."&centro=".$myrow[pa1]."&planta=".$myrow[est1]."&mes=".$myrow[mes]."&anio=".$myrow[anio]."&fecha_solicitud=".$myrow[fecha_solicitud]."\"><img src=\"images/X.png\" border=\"0\"></a></TD>";
}
else
{
//        echo "<TD><A HREF=\"mailto:".$myrow['correo'].",[email protected][email protected]
//        echo "<TD width=\"10%\"><A HREF=\"mailto:".$myrow['correo'].
        echo "<TD width='50' name='image'><img src='images/Checkmark.png'></TD>";
        echo "<TD width='50' name='email'><A HREF=\"mailto:".$myrow['correo'].
        "&subject=Clave para permitir Modificacion de Indicadores
        &body=Le%20 informo%20 que su solicitud para Modificacion%20 de%20 Indicadores%20 le%20 ha%20 sido%20 otorgada.
         %0D%0A %0D%0A La%20 clave%20 que%20 se%20 le%20 ha%20 concedido%20 es:%0D%0A %0D%0A".$myrow['autorizacion'].
        "%0D%0A %0D%0A Esta%20 clave%20 le%20 permitira%20 modificar%20 los%20 Indicadores%20 de%20 
         %0D%0A %0D%0A la%20 Planta%20 de:%20%20".$myrow['est1'].
        "%0D%0A %0D%0A del%20 Centro%20 de:%20%20".$myrow['pa1'].
        "%0D%0A %0D%0A La%20 fecha%20 de%20 solicitud%20 se%20 hizo%20 el%20 dia:%20%20".$myrow['fecha_solicitud'].
        "%0D%0A %0D%0A Y%20 a%20 partir%20 de%20 esta%20 fecha%20 solo%20 cuenta%20 con%20 2%20 dias%20 para%20
         %20la Modificacion%20 de%20 Indicadores\"><img src='images/enviadoNO.jpg' id='email_img' onClick=\"location.href = 'Table Keys.php?correo=".$myrow['correo']."&centro=".$myrow['pa1']."&planta=".$myrow['est1']."&mes=".$myrow['mes']."&anio=".$myrow['anio']."&fecha_solicitud=".$myrow['fecha_solicitud']."&email=".$myrow['email']."'\"></A></TD>";
}  
}
echo "</TR>";
echo "</TABLE>"; 
   

Sander...

Ten en cuenta que en mi código inicial ya había un evento Onclick y que la estoy redireccionando hacia la misma pagina pero con los variables para filtrar donde quiero cambiar la imagen......

Código PHP:

<img src='images/enviadoNO.jpg' id='email_img' onClick=\"location.href = 'Table Keys.php?correo=".$myrow['correo']."&centro=".$myrow['pa1']."&planta=".$myrow['est1']."&mes=".$myrow['mes']."&anio=".$myrow['anio']."&fecha_solicitud=".$myrow['fecha_solicitud']."&email=".$myrow['email']."'\"></A></TD>";
 

[sander]

Primero cambia la ruta del jquery por la de google asi:

Código Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 

Segundo inserta este codigo que te di entre head, no dentro el body.

Código Javascript:

<script type="text/javascript">
$(document).ready(function(){
   $('#email_img').click(function(){
      $('#email_img').attr('src', 'images/enviadoSI.jpg');
   });
});
</script>
 

Luego me cuentas como te fue.

Saludos.

[GatorV]

Tema movido desde PHP a Javascript

[benjaminvera]

Moderador Gator V....

No estoy NADA seguro que mi duda pertenezca a JavaScript ya que debo de hacer cambiar una imagen dentro de una tabla y esa imagen no debe de regresar a su imagen inicial. Que es lo que estoy viendo lo que hace este código... y estoy agradecido por la ayuda que Sander me ha prestado.

Nueva pregunta....

Hay manera de darle una valor a una imagen...????

Algo parecido a esto...

<img src='enviadoNO.jpg' name='mail' value='NO'>

Y que a la hora de que yo haga el redireccionamiento me lo cambien por:

<img src='enviadoSI.jpg' name='mail' value='SI'>

Y que yo a la hora de redireccionarlo envie la variable 'NO'

Espero haberme podido explicar y no sonar tan MAL viajado y con unos reberendos sueños guagiros.....

:-p:-p:-p:-p:-p

[benjaminvera]

Ya mejor abrí una nueva liga con la siguiente duda en el foro de PHP ya que no era lo que estaba buscando por el lado de JavaScript....

Tema: Hay manera de darle una valor a una imagen...????

http://www.forosdelweb.com/f18/hay-m...3/#post3496771

Pero de todos modos me sirvió porque usaré mucho la librería JQuery que ya había leido acerca de ella pero por decidia uno no lo incluye en sus códigos ni mucho menos estudia acerca de JQuery....

Saludos y mil gracias Sander por tu ayuda....

[sander]

De nada para eso estamos.

Saludos.