Cambiar imagen de un ImageButton de asp.net con javascript

[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

[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 ?

[vinoamateur]

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

[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 ;)

[vinoamateur]

jajajaja, lo anotaré en la agenda!

[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.

[elQuique]

Accediendo al objeto DOM Modelo de Objetos del Documento

[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.

[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.

[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

[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.

[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

[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 ;)

[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!

[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

[vinoamateur]

Espectacular! muchas gracias por todo, lo iré vichando y a probarlo! gracias de nuevo y saludos