Página 1 de 1

Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 03 Abr 2010, 14:56
por vinoamateur
Tengo un archivo .js externo que está referenciado en mi master page y quiero que un ImageButton (id="boton" )de dicha página cambie de imagen en el evento OnMouseOver

lo que hice en el evento PageLoad es:

boton.ImageUrl = "~/imagen/twitter.jpg";
boton.Attributes["OnMouseOver"] = "javascript: /* y aquí no se como acceder a la funcion javascript que está en el archivo externo*/

Ayuda? Gracias

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 04 Abr 2010, 01:10
por elQuique
mmm pero en realidad al momento de ejecutarse en el cliente no estaría en algo externo si no que vos la llamaste en el header con script src="funciones.js" no ?

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 04 Abr 2010, 11:25
por vinoamateur
:roll: no puedo ser tan nabo! Muchas gracias Quique, yo rompiendome la cabeza probando de todo y era solo llamar la función. Disculpas por la pregunta y gracias por la ayuda :alabanza:

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 04 Abr 2010, 15:17
por elQuique
Plop !, jaja :P suele suceder pues

Igualmente si no anda con eso te paso el número: 1 - 800 - 38 628 4667

con eso llamas a las funciones ;)

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 04 Abr 2010, 17:28
por vinoamateur
jajajaja, lo anotaré en la agenda!

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 04 Abr 2010, 19:16
por vinoamateur
Bueno, sigo complicado con esto (si es otra bobada me tengo que matar, pero lo pienso y lo repienso y no me sale)
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];

switch(direction)
{
case '1':

AQUI ESTA MI GRAN PROBLEMA :( COMO ACCEDO A LA PROPIEDAD ImageUrl DEL
CONTROL DESDE JAVASCRIPT?

break;
}
}


Si alguien tiene una idea de como se hace, se agradecerá por siempre jejeje.

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 05 Abr 2010, 18:19
por elQuique

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 05 Abr 2010, 19:48
por vinoamateur
Primero que nada, GRACIAS Quique por estar siempre ahí, segundo esto lo intenté, el tema es que me devuelve un null cuando intento traer el objeto ImageButton por su id, o sea, cuando creo una variable en javascript que igualo a document.getElementById(idControl) me devuelve un null, ahí es que me tranco :(
El codigo que agregué está en cursiva.


//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 es la que me da null :(
var boton = document.getElementById("idControl");

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


}
}

Bueno, en fin, si te llené las bolas, lo entiendo y todo ok xq tampoco quiero abusar.
Un abrazo y muchas gracias.

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 06 Abr 2010, 13:48
por elQuique
Intentaste usar algo como:

document.getElementById("idControl").value ?

ya que el objeto tiene diversas propiedades, métodos y funciones y dependiendo de la implementación de javascript del navegador puede o no devolver algo por defecto, siempre es mejor ser especifico al pedir un determinado dato.

Igualmente cuando te pones a trabajar con JS y sabes que vas a seguir incrementando complejidad es mejor usar un framework, en mi caso prefiero jQuery :), así evitas muchas cosas que van diferente en uno u otro browser.

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 07 Abr 2010, 07:33
por vinoamateur
El null que me daba al tratar de conseguir el objeto por GetElementById se debía a que al renderizar la página se me agregaban unos ct100_ delante de los id de todos los objetos de asp.net, ahora llegué a acceder al objeto pero se me complica cuando le cambio la ruta, pues el javascript me cambia la ruta de esto: http://localhost:49769/proyecto/img/bot ... witter.jpg
a esto:
http://localhost:49769/proyecto/%27~/im ... act.jpg%27

no se de dde saca esos %27, en fin, estuve leyendo algo de jquery y me parece una opción buenísima, así que seguiré investigando.
Cuando logre arreglar este embrollo,posteo la solución por si a alguien le pasa :(
Gracias y saludos

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 08 Abr 2010, 22:47
por elQuique
Esas urls están así porque seguramente tengas un problema de comillas y te está escapando o convirtiendo a encode algo que no debe, verifica si por algún lado concatenas y te faltan comillas.

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 09 Abr 2010, 18:25
por vinoamateur
ok, me voy a fijar! de todas formas y a pesar de los tropiezos la Asociación de Surfing Paraguayo me trae bastante feliz, estoy leyendo un par de libros sobre el tema y hay mucha funcionalidad que en el curso de ort no había visto. Estoy seguro que PHP debe tener lo mismo o más, pero en el curso de ort de PHP, vi menos que en el de ASP.NET jejeje. Muchísimas gracias y saludos

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 11 Abr 2010, 19:46
por elQuique
jaja, pregúntale a los profesores si alguna vez hicieron algo en serio y bien, o si solo saben pura teoría de los '90 ;)

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 16 Abr 2010, 08:25
por vinoamateur
En primer lugar gracias por todo, en segundo disculpas por tardar en responder pero estuve unos días sin trabajar, en tercero, solucioné cambiando 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

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.
Seguiré tu consejo de usar JQuery, pero por el momento quiero sacar la página para poder subirla y después irla perfeccionando. Imagino que para usarlo tendré que por lo menos leer algún tuto o libro, así que será el próximo paso.

Nuevamente gracias por todo y saludos!

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 16 Abr 2010, 23:54
por elQuique
Acá tienes algo jQuery y Microsoft

No se que Visual Studio estás usando pero el nuevo 2010 que se lanzo el lunes tiene integración con jQuery, puedes incluso usar el gratuito Visual Studio Express

Y un vídeo JQuery y ASP.NET, una pareja Explosiva

Re: Cambiar imagen de un ImageButton de asp.net con javascript

Publicado: 17 Abr 2010, 22:33
por vinoamateur
Espectacular! muchas gracias por todo, lo iré vichando y a probarlo! gracias de nuevo y saludos