FORO SPAMLOCO


Cambiar imagen de un ImageButton de asp.net con javascript


HTML, CSS, PHP, JavaScript, Java... tus dudas por aquí...
   

Cambiar imagen de un ImageButton de asp.net con javascript

Notapor vinoamateur » Abr 2010, 14:56

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
Avatar de Usuario
vinoamateur
Nivel 4
 
Mensajes: 151
Registrado: Sep 2009, 18:47
Twitter: @controlaltweb



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

Notapor elQuique » Abr 2010, 01:10

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 ?
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2213
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

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

Notapor vinoamateur » Abr 2010, 11:25

: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:
Avatar de Usuario
vinoamateur
Nivel 4
 
Mensajes: 151
Registrado: Sep 2009, 18:47
Twitter: @controlaltweb

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

Notapor elQuique » Abr 2010, 15:17

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 ;)
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2213
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

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

Notapor vinoamateur » Abr 2010, 17:28

jajajaja, lo anotaré en la agenda!
Avatar de Usuario
vinoamateur
Nivel 4
 
Mensajes: 151
Registrado: Sep 2009, 18:47
Twitter: @controlaltweb

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

Notapor vinoamateur » Abr 2010, 19:16

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.
Avatar de Usuario
vinoamateur
Nivel 4
 
Mensajes: 151
Registrado: Sep 2009, 18:47
Twitter: @controlaltweb

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

Notapor elQuique » Abr 2010, 18:19

Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2213
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

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

Notapor vinoamateur » Abr 2010, 19:48

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.
Avatar de Usuario
vinoamateur
Nivel 4
 
Mensajes: 151
Registrado: Sep 2009, 18:47
Twitter: @controlaltweb

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

Notapor elQuique » Abr 2010, 13:48

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.
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2213
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

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

Notapor vinoamateur » Abr 2010, 07:33

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
Avatar de Usuario
vinoamateur
Nivel 4
 
Mensajes: 151
Registrado: Sep 2009, 18:47
Twitter: @controlaltweb

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

Notapor elQuique » Abr 2010, 22:47

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.
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2213
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

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

Notapor vinoamateur » Abr 2010, 18:25

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
Avatar de Usuario
vinoamateur
Nivel 4
 
Mensajes: 151
Registrado: Sep 2009, 18:47
Twitter: @controlaltweb

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

Notapor elQuique » Abr 2010, 19:46

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 ;)
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2213
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

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

Notapor vinoamateur » Abr 2010, 08:25

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!
Avatar de Usuario
vinoamateur
Nivel 4
 
Mensajes: 151
Registrado: Sep 2009, 18:47
Twitter: @controlaltweb

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

Notapor elQuique » Abr 2010, 23:54

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
Avatar de Usuario
elQuique
Moderador
 
Mensajes: 2213
Registrado: May 2009, 18:43
Ubicación: Florida, Uruguay
Twitter: @elQuique

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

Notapor vinoamateur » Abr 2010, 22:33

Espectacular! muchas gracias por todo, lo iré vichando y a probarlo! gracias de nuevo y saludos
Avatar de Usuario
vinoamateur
Nivel 4
 
Mensajes: 151
Registrado: Sep 2009, 18:47
Twitter: @controlaltweb


cron