Imágen de sustitución en JavaScript

Maestro html · 3 Oct 2008, 17:50 · Solicitar retirada

Bueno, practicando lo que he aprendido de JavaScript, hice esto, una imágen que cuando pasas el ratón por encima cambia, yo he hecho el ejemplo con una flecha, que cuando le das clic se va a plantilla.html:

Esto en <head>:

<script language="Javascript" type="text/javascript">
	<!-- Ocultar guión a navegadores antiguos
/**************************************************************************************************
*           Este script está realizado por Maestro Html y se distribuye con esta licencia:        *
*                        [url]http://creativecommons.org/licenses/by-nc-sa/2.5/es/[/url]                     *
*                                ******NO ELIMINAR ESTA CABECERA******                            *
*                                        Recuerden entrar en:                                     *
*                 [url]http://destellosolutions.idoo.com/[/url] - Soluciones de todo tipo                    *
***************************************************************************************************/

	if (document.images) { 
// Comprobamos si la versión de Javascript del usuario permite manipular imágenes
		// Si es así definimos las imágenes
                flechaRoja = new Image
		flechaAzul = new Image

		flechaRoja.src = "imagenes/flechaRoja.gif"
		flechaAzul.src = "imagenes/flechaAzul.gif"
	}
	else {
// Si no es así definimos las variables sin nada para que no de errores en los navegadores antiguos
		flechaRoja = ""
		flechaAzul = ""
		document.flecha = ""
	}

	// Dejar de ocultar guión a navegadores antiguos -->
	</script>

Y esto en <body> donde quieras que aparezca la flecha:

[url="plantilla.html"][img]imagenes/flechaAzul.gif[/img][/url]

Luego solo faltarían dos imágenes en una carpeta llamada imágenes, una que se llame flechaAzul.gif (respetando mayúsculas y minúsculas) y otra que se llame flechaRoja.gif (respetando mayúsculas y minúsculas) que podrían ser estas:

flechaAzul.gif:

[contenido no disponible]

flechaRoja.gif:

[contenido no disponible]

Pondré en la sección scripts del foro todo lo que he aprendido de JavaScript.

Saludos :wink: .

Maestro Html

martrix · 5 Oct 2008, 19:34 · Solicitar retirada

muchisimas gracias!!
ahora solo tengo una dudilla, si quiero hacer esto mismo en varias imagenes de la pagina, que se pone para añadirlo? un "else"? perdonad estas dudas, pero soy principiante principiante...

Maestro html · 6 Oct 2008, 19:06 · Solicitar retirada

martrix escribió:muchisimas gracias!!
ahora solo tengo una dudilla, si quiero hacer esto mismo en varias imagenes de la pagina, que se pone para añadirlo? un "else"? perdonad estas dudas, pero soy principiante principiante...

Sí que se puede, solo tienes que definir más variables. Por ejemplo:
Despues de:

flechaRoja = new Image
      flechaAzul = new Image

Pon:

miImagenUno = new Image
miImagenDos = new Image

Y despues de:

flechaRoja.src = "imagenes/flechaRoja.gif"
      flechaAzul.src = "imagenes/flechaAzul.gif"

Pon:

miImagenUno.src = "URL DE LA IMAGEN PRIMERA"
miImagenDos.src = "URL DE LA SEGUNDA IMAGEN"

Donde pone url de la primera y segunda imágen sustitúyelas por las urls de tus imágenes

Y después de:

flechaRoja = ""
      flechaAzul = ""
      document.flecha = ""

Pon:

miImagenUno = ""
miImagenDos = ""
document.cambianteuno = ""

Y luego en donde quieras que aparezca la imágen:

[url="plantilla.html"][img]URL DE LA PRIMERA IMAGEN[/img][/url]

Donde pone url de la primera imágen pon la url que pusiste anteriormente en url de la primera imágen.

Si tienes alguna duda o no lo entiendes postealo y estaré encantado de ayudarte.

martrix · 7 Oct 2008, 18:17 · Solicitar retirada

si con la explicacion tan completa que me has dado no llego a conseguirlo...gracias! :D
solo me queda una duda y es que en mi ordenador funciona aunque no ponga lo de "else" y las variables. es aconsejable que lo ponga? no se si podria influir en cómo lo ven otras personas.

Maestro html · 9 Oct 2008, 16:07 · Solicitar retirada

martrix escribió:si con la explicacion tan completa que me has dado no llego a conseguirlo...gracias! :D
solo me queda una duda y es que en mi ordenador funciona aunque no ponga lo de "else" y las variables. es aconsejable que lo ponga? no se si podria influir en cómo lo ven otras personas.

Si no pones:

else {
      flechaRoja = ""
      flechaAzul = ""
      document.flecha = ""
   }

Te seguirá funcionando lo pongas o no, pero si no lo pones el script dará errores en los navegadores antiguos, y porque usen un navegador viejo no quiere decir que les expulsemos de la página, no? por eso hay que pensar que tiene que funcionar en todos los navegadores, antiguos o no.