Cambiar imagen al pasar raton por encima con banner rotativo

SeaPirates · #1 (**permalink**) 20/02/2010, 08:32

Hola, tengo este script:

Código:

<body onload="alternar_banner()">

<script>
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(670,250)
array_imagen[0].src = "url1"
array_imagen[1] = new Image(670,250)
array_imagen[1].src = "url2"
array_imagen[2] = new Image(670,250)
array_imagen[2].src = "url3"
array_imagen[3] = new Image(670,250)
array_imagen[3].src = "url4"

//creo el array de URLs
array_url = new Array(4)
array_url[0] = "http://www.ibm.org/"
array_url[1] = "http://www.microsoft.com/"
array_url[2] = "http://www.suse.com/"
array_url[3] = "http://www.linux.com/"

//variable para llevar la cuenta de la imagen siguiente
contador = 0

//función para rotar el banner
function alternar_banner(){
    window.document["banner"].src = array_imagen[contador].src
    window.document.links[0].href = array_url[contador]
    contador ++
    contador = contador % array_imagen.length
    setTimeout("alternar_banner()",7000)
} </script>
</head>

<body onload="alternar_banner()">

<a href=""><img src="#" name="banner" width="670" height="250" border=0></a>

Pero como hago para que al poner el raton encima de cada imagen cambie a la b?

Por ejemplo con una imagen normal seria:

onmouseover="this.src ='inicio_a.png'" onmouseout="this.src = 'inicio_b.png'"

pero ahi no se como hacerlo ya que van cambiando..

zerokilled · #2 (**permalink**) 20/02/2010, 10:25

en el nombre de las imagenes, tanto para el estado original como mouseover, ¿todas tienen algo en comun? siguiendo tu ejemplo, quiero decir si todas terminan en _a y _b. si es el caso, podrias usar la funcion replace con expresion regulares.

Código:

onmouseover="this.src = this.src.replace(/_\w(\.png)$/, '_b\1');" onmouseout="this.src = this.src.replace(/_\w(\.png)$/, '_a\1');"

SeaPirates · #3 (**permalink**) 20/02/2010, 14:46

<body>

<body onload="alternar_banner()">

<script>
//creo array de imágenes
array_imagen = new Array(4)
array_imagen[0] = new Image(670,250)
array_imagen[0].src = "/slides/slide_craft_a.png"
array_imagen[1] = new Image(670,250)
array_imagen[1].src = "/slides/slide_habberos_a.png"
array_imagen[2] = new Image(670,250)
array_imagen[2].src = "/slides/slide_cs_a.png"
array_imagen[3] = new Image(670,250)
array_imagen[3].src = "/slides/slide_soccer_a.png"

//creo el array de URLs
array_url = new Array(4)
array_url[0] = "http://www.ibm.org/"
array_url[1] = "http://www.microsoft.com/"
array_url[2] = "http://www.suse.com/"
array_url[3] = "http://www.linux.com/"

//variable para llevar la cuenta de la imagen siguiente
contador = 0

//función para rotar el banner
function alternar_banner(){
window.document["banner"].src = array_imagen[contador].src
window.document.links[0].href = array_url[contador]
contador ++
contador = contador % array_imagen.length
setTimeout("alternar_banner()",7000)
} </script>
</head>

<a href="http://www.manual-de.com/#"><img src="#" name="banner" onmouseover="this.src =

this.src.replace(/_\w(\.png)$/, '_b.png\1');" onmouseout="this.src = this.src.replace(/_\w(\.png)$/, '_a.png\1');"

width="670" height="250" border=0></a>

</body>
</html>

Vale ya esta, el problema es que no se porque al salir la imagen no sale la url que deveria salir, siemple sale www.manual-de.com , como hago para que salga la url correspondiente?

zerokilled · #4 (**permalink**) 20/02/2010, 15:01

podrias indicarme alguna url del ejemplo que tienes, porque me parece que no estoy viendo todos los detalles. por ejemplo, en el codigo que has mostrado fijate el src es #. segundo, notese que tu codigo es ligeramente difirente al que te propuse. en el segundo parametro de replace has puesto "_a.png\1". no es necesario poner la porcion en rojo porque \1 es precisamente la extension. por lo demas, no veo como te produce una url del sitio web, es decir sin directorios ni nombre de archivo.

SeaPirates · #5 (**permalink**) 20/02/2010, 15:08

www.habberos.es

Si no pongo la extension .png no muestra la imagen porque sale

urldelaimagen_b pero sin la extension, de todos modos asi con .png funciona

Y lo de la url, en teoria a cada imagen deveria mostrar las url que estan en el script,

pero si pongo en href asi: href="#" muestra la url de la pagina http://www.habberos.es, pero no muestra las urls indicadas

zerokilled · #6 (**permalink**) 20/02/2010, 15:27

ya veo donde es el problema de mi codigo. en las expresiones regulares se hacen referencia a los parentesis usando barra invertida y el numero, pero en los string es con el simbolo de dolar.

es decir, _b$1, eso es lo que tenia que escribir. referente a la URL, me referia a la URL de la imagen (src), no del enlace.

SeaPirates · #7 (**permalink**) 20/02/2010, 15:29

ok xD pero como soluciono lo de la url?

Mira , si accedo desde www.habberos.es la url de las noticias son siempre la misma, sin embargo cuando accedes a http://www.habberos.es/anuncios.php, que es el mismo script que el del inicio si cambia la url, porque sera esto?

zerokilled · #8 (**permalink**) 20/02/2010, 15:32

si, se me olvido eso. lo que pasa que estas modificando la URL del primer enlace del documento (document.links[0]) cuando deberias hacer referencia al elemento padre de la imagen. lo que puedes hacer es, una vez obtenida la referencia de la imagen, con parentNode obtienes el elemento A.

SeaPirates · #9 (**permalink**) 20/02/2010, 15:36

eso como? No se casi nada de javascript

zerokilled · #10 (**permalink**) 20/02/2010, 15:43

en tu funcion alternar_banner,

document['banner'] es la referencia a la imagen de banner.
con esa referencia y el objeto parentNode, reemplaza document.links[0]

SeaPirates · #11 (**permalink**) 20/02/2010, 15:46

parentNode.links[0]?¿? :SS

zerokilled · #12 (**permalink**) 20/02/2010, 15:55

sin el links[0]. en mi mensaje anterior, pega las dos partes que puse en negrita. claro que te faltaria un punto entre medio de ellos.

SeaPirates · #13 (**permalink**) 21/02/2010, 03:09

document.parentNode['banner'] ??

zerokilled · #14 (**permalink**) 21/02/2010, 04:09

unir el primero (document['banner']) y el segundo (parentNode).

Código:

document['banner'].parentNode

ahora parentNode se refiere al link.

SeaPirates · #15 (**permalink**) 21/02/2010, 04:55

aaaaaaaaaaaaaaaaaaaaaaaaaaaa!

Muchas gracias!! Yo poniendolo de todas las formas menos la correcta T_T

Y otra duda, si puede ser, abria algun modo de que cuando pones el raton encima de la imagen, al mismo tiempo que cambia de "_a" a "_b" salga alguna flechita o algun texto para pasar y retroceder las imagenes?