none
Cambiar imagen de un ImageButton de asp.net con javascript

    Question

  • Buenas noches, estoy programando un sitio con asp.net y tengo el siguiente problema que no he podido solucionar.

    Yo quiero que un ImageButton cambie su apariencia en el evento OnMouseOver, lo que hago es esto

    //en el Page_Load de mi code behind seteo la ImageUrl del ImageButton
    botonTwitter.ImageUrl = "~/img/botones/botonTwitter.jpg";

    //luego le agrego el evento OnMouseOver y la funcion correspondiente
    botonTwitter.Attributes.Add("OnMouseOver", "javascript:Cambiar('" + botonTwitter.ImageUrl + "', '1');");

    luego en el javascript que tengo referenciado en mi página hago lo siguiente

    function CambiarImagen(name, direction)
    {
    //corto la url que mande en el punto para sacarle el .jpg
    var url1 = name.split('.');
    //corto el string anterior para obtener el id del control asp que tiene el mismo nombre
    //que la foto
    var url2 = url1[0].split('/');
    //obtengo el nombre del id del ImageButton
    var idControl = url2[3];

    //creo la ImageUrl nueva que le quiero dar al ImageButton
    var urlNew = "'" + url1[0] + "act.jpg'";
    //creo una variable buscando el ImageButton por su ID -- esta me da null  y no se
    //porque, aquí es donde estoy trancado, pues a partir de aquí no puedo hacer nada
    var boton = document.getElementById("idControl");

    switch(direction)
    {
    case '1':
    //si no me diera null, pensaba hacer esto:
    boton.setAttribute("ImageUrl", urlNew);
    break;

    }
    }

    Si alguien pudiera darme una mano, estaría muy agradecido.
    Saludos
    Tuesday, April 06, 2010 12:58 PM

Answers

  • En primer lugar gracias por todo, en segundo disculpas por tardar en responder pero estuve unos días sin poder trabajar, en tercero, solucioné dándole más palo en la parte de javascript.

    El code-behind lo dejé igual, pasándole el ImageUrl en el mouseover y en el javascript armé una solución medio precaria pero que por ahora funciona, después con más tiempo la perfeccionaré para que quede más prolija

     Lo de  "<%=botonTwitter.ClientID%>" no pude hacerlo funcionar de ninguna manera :(

    function CambiarImagen(name, direction)
     {
        var url1 = name.split('.')
        var url2 = url1[1].split('/');
        var idControl = "ctl00_" + url2[3];
        var boton = document.getElementById(idControl);            
        var url3 = "/raiz" + url1[1] + "act.jpg";   
           
       
        switch(direction)
        {
            case 'in':
             boton.src = url3;
            break;
           
            case 'out':
            boton.src = name;
            break;
        }
     }

    Con el mismo código en el code-behind y este en el javascript, funciona.

    Nuevamente gracias por todo y saludos!

    Friday, April 16, 2010 11:20 AM

All replies


  • hola

    se trata de un control de asp.net, este al renderizarse en el cliente cambia el id que defines en tu codigo, prueba usando

    var boton = document.getElementById("<%=botonTwitter.ClientID%>");

     

    es importante respetar las mayusculas y nimusculas ya que es key-sensitive, por eso es ClientID

    de esta forma cuando veas el codigo del cliente notaras que el id es algo distinto en los controles de asp.net

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    Tuesday, April 06, 2010 1:47 PM
  • Muchas gracias Leadro por tu respuesta, estuve viendo lo que me sugeriste y había estado ya probando otras cosas, el tema es que cuando se renderiza la página el id que le aplica al control es el mismo que tenía en el VS pero con la cadena ct100_ delante, o sea, el botón que tenía el id="botonTwitter" se renderiza con el id="ct100_botonTwitter" . Hasta ahí, todo ok, porque agrego esa cadena antes en la función javascript de antes dejándola así

    var idControl = "ct100_" + url2[3];

    y luego con esto accedo al objeto y sus propiedades

    var boton = document.getElementById(idControl);

    el problema es que cuando quiero cambiar el src de la imagen del ImageButton, la cual tiene un formato del tipo

    ~/img/botones/botonTwitter.jpg

    y antes de ejecutar la función se ve así

    http://localhost:49769/proyecto/img/botones/botonTwitter.jpg

    me la cambia por algo de este tipo

    http://localhost:49769/proyecto/%27~/img/botones/botonTwitteract.jpg%27

    No entiendo de donde saca esos %27 que le agrega?

    Muchas gracias nuevamente y saludos

    Iván

     

    Tuesday, April 06, 2010 4:27 PM
  • hola

    usa el <%=botonTwitter.ClientID%> evita se problema con los ct100_ que detectas en el nombre del control

     

    el tema es que estas usando

    botonTwitter.Attributes.Add("OnMouseOver", "javascript:Cambiar('" + botonTwitter.ImageUrl + "', '1');");

    y desde codbehind, o sea desde codigo .net, cuando lo usas esto aun no resolvio al url por lo tanto sige con ~/

    para este punto deberias usar direcciones relativas, del tipo ../ o sea no resuelva desde el root del sitio, como hace e ~/

    podrias usar

     

    botonTwitter.Attributes.Add("OnMouseOver", "javascript:Cambiar('../img/botones/botonTwitter.jpg', '1');");

    si es que estas dentro de una carpeta, con ../ subes un nivel y luego accedes a la carpetra imagen

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    Tuesday, April 06, 2010 6:01 PM
  • Intentaré alguno de los cambios que me sugieres hoy a ver que pasa. Muchísimas gracias!

    Saludos

    Wednesday, April 07, 2010 10:26 AM
  • hola

    perfecto, si realiza las pruebas y despues comenta el resultado

     

    Nota, no olvides marcar la respuesta que ayudaron a la pregutna, asi colaboras por si alguien que ve esta pregutna sabe como lo has resuelto

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    Wednesday, April 07, 2010 1:37 PM
  • ¡Hola!

     

    ¿Fue posible solucionar su problema?

     

    ¡Gracias!


    Rafael Fagundes - Marque la respuesta como correcta si te ha sido de utilidad!
    Tuesday, April 13, 2010 3:33 AM
    Moderator
  • En primer lugar gracias por todo, en segundo disculpas por tardar en responder pero estuve unos días sin poder trabajar, en tercero, solucioné dándole más palo en la parte de javascript.

    El code-behind lo dejé igual, pasándole el ImageUrl en el mouseover y en el javascript armé una solución medio precaria pero que por ahora funciona, después con más tiempo la perfeccionaré para que quede más prolija

     Lo de  "<%=botonTwitter.ClientID%>" no pude hacerlo funcionar de ninguna manera :(

    function CambiarImagen(name, direction)
     {
        var url1 = name.split('.')
        var url2 = url1[1].split('/');
        var idControl = "ctl00_" + url2[3];
        var boton = document.getElementById(idControl);            
        var url3 = "/raiz" + url1[1] + "act.jpg";   
           
       
        switch(direction)
        {
            case 'in':
             boton.src = url3;
            break;
           
            case 'out':
            boton.src = name;
            break;
        }
     }

    Con el mismo código en el code-behind y este en el javascript, funciona.

    Nuevamente gracias por todo y saludos!

    Friday, April 16, 2010 11:20 AM