En menu, al pasar el mouse por link que aparezca una imagen.

Gooppy · #1 (**permalink**) 11/09/2005, 20:55

Hola!

Tengo un problema y ya he utilizado el buscador, pero aún así no puedo solucionarlo =S.

Encontre esto en las FAQ's

106. Cambiar una imagen al hacer un MouseOver [Ejemplo]
¿Cómo puedo cambiar la imagen de fondo de la página o una imagen cualquiera de la misma al hacer un mouseOver sobre un enlace?

Pero aún así no soluciono nada y probe el código solo y no veo nada aún cambiado las imagenes etc... en fin.

Tengo un menu, que saque de http://www.dynamicdrive.com y es este:

Código:

<html>
<head>

<style>
A.menulink {
display: block;
width: 150px;
text-align: left;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #FFFFFF;
BORDER: none;
border: solid 1px #000000;
}

A.menulink:hover {
border: solid 1px #6100C1;
background-color:#F0E1FF;
color: #000000;
}

</style>

<script>

/*
CSS Menu highlight- By Marc Boussard ([email protected])
Modified by DD for NS4 compatibility
Visit http://www.dynamicdrive.com for this script
*/

var ns4class=''
</script>


</head>

<body bgcolor="#000000">






<table border="0" width="150px">
  <tr>
    <td width="150px"><a href="http://www.javascriptkit.com" class="menulink" class=&

{ns4class};>JavaScript Kit</a></td>
  </tr>
  <tr>
    <td width="100%"><a href="http://freewarejava.com" class="menulink" class=&

{ns4class};>Freewarejava.com</a></td>
  </tr>
  <tr>
    <td width="100%"><a href="http://www.codingforums.com" class="menulink" class==&

{ns4class};>CodingForums.com</a></td>
  </tr>
  <tr>
    <td width="100%"><a href="http://news.bbc.co.uk" class="menulink" class=&{ns4class};>BBC 

News</a></td>
  </tr>
</table>


</body>
<html>

Quisiera que al pasar el mouse sobre el link así como también cambia el fondo del td y el color del link, que al lado izquierdo aparezca una pequeña imagen =P y que al quitarlo desaparezca. No se como hacerlo y me encantaría si me pudieran ayudar =).

Saludos! n_n y gracias adelantadas! =).

jahepi · #2 (**permalink**) 11/09/2005, 21:39

Hola Goopy!

Hice un sencillo ejemplo, la imagen que aparece cuando te posicionas sobre una celda se podría hacer con una capa oculta que cuando invoques al evento onMouseOver, modifiques la propiedad de esa capa a 'visible', algo como esto.

Código PHP:

   
<script language="JavaScript">

function mostrar(objeto){

   //Aqui se pone la imagen que quieras mostrar en la celda al ponerte sobre...

   objeto.background = '/Picture1.jpg';

   document.getElementById('capa').style.visibility = 'visible';

}

  //Aqui se pone la imagen que quieras mostrar en la celda al salir...

function ocultar(objeto){

   objeto.background = '/Picture2.jpg';

   document.getElementById('capa').style.visibility = 'hidden';

}

</script>

Esas 2 funciones son las que se encargan de mostrar y ocultar la capa, ahora lo siguiente es definir las propiedades de nuestra capa, posición, color, etc. y eso lo hacemos mediante hojas de estilo comunmente llamadas CSS, vamos agregar este código a nuestra cabecera.

Código PHP:

  <style type="text/css">

<!--

#capa {

    position: absolute;

    visibility: hidden;

    left: 155px;

    top: 12px;

}

-->

</style>

Estamos creando un Id Selector, ve que lo estoy definiendo como #capa y no como .capa que sería un Class Selector, la diferencia es que el primero solamente se puede aplicar una vez al elemento que tenga ese nombre como propiedad Id, pero podrías usar un Class Selector si todas tus capas van a tener propiedades iguales.
Ahora prueba este código, es una tabla con una celda de ejemplo.

Código PHP:

  <table width="134" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">

  <tr>

    <td width="128" background="" onMouseOver="mostrar(this);" onMouseOut="ocultar(this);">Botonn</td>

  </tr>

</table>

<div id="capa"><img src="/Picture2.jpg" width="76" height="57"></div>

Si tienes dudas, me avisas

Suerte!!!

Gooppy · #3 (**permalink**) 11/09/2005, 22:27

Hola muchas gracias por contestar =). Funciona muy bien cuando paso el mouse sobre el link y aparece la imagen n_n, solo que la imagen aparece en un mismo lugar siempre, y me gustaría que aparezca a un lado de cada link del menú que tengo =S. Ya lo he visto antes, solo que cada que quiero algún código de una página no recuerdo cual era ».«U.

Ojala se pueda hacer, si no, muchisisimas gracias de todas formas =D.

jahepi · #4 (**permalink**) 11/09/2005, 23:11

Hola Gooppy!

Que bueno que te sirvio el ejemplo, con respecto a la posición de la imagen, claro que la puedes cambiar, no se si te fijaste en la hoja de estilo, ahí modificas las propiedades de la capa.

Código PHP:

  <style type="text/css">

<!--

#capa {

    position: absolute;

    visibility: hidden;

    left: 155px;

    top: 12px;

}

-->

</style>

En la propiedad left y top puedes modificarlas para cambiar la posición de las capas en la hoja, como van a ser varias capas con diferentes posiciones, crea otro id selector para cada capa con sus respectivas posiciones, por ejemplo:

Código PHP:

  <style type="text/css">

<!--

#capa {

    position: absolute;

    visibility: hidden;

    left: 155px;

    top: 12px;

}

#capa2 {

    position: absolute;

    visibility: hidden;

    left: 400px;

    top: 230px;

}

-->

</style>

Creamos como ves otro id selector llamado capa2, solamente creas una capa y ponle como atributo id el nombre del Id selector, por ejemplo:

Código PHP:

  <div id="capa2">aqui la imagen</div>

Esa capa se posicionara a 400 px de lado izquierdo, a 230 px en la parte superior y estará oculta.

Si tienes dudas, me avisas

Suerte!!!

Gooppy · #5 (**permalink**) 12/09/2005, 00:05

Wa! muchas gracias! n_n

Yo creo que con eso se soluciona todo =D. Lo voy a probar mañana por que ahora ya es muy tarde =S... pero yo creo que si funciona =). Gracias de nuevo! y mañana vengo y digo como quedo todo :D.

Saludos! n.n

Gooppy · #6 (**permalink**) 13/09/2005, 00:44

Hola!

Tenia algunos problemas todavía :S.

Hice más capas y les puse diferente posición a cada una, pero aún así, al pasar el mouse por el link 2 del menú que vendría siendo el que muestre la "capa2", la imagen aparece con las posiciones de "capa" y no de "capa2".

Estuve probando y la forma en la que me salio es que tuve que duplicar el siguiente código:

Código PHP:

  <script language="JavaScript"> 

function mostrar(objeto){ 

   //Aqui se pone la imagen que quieras mostrar en la celda al ponerte sobre... 

   objeto.background = '/Picture1.jpg'; 

   document.getElementById('capa').style.visibility = 'visible'; 

} 

  //Aqui se pone la imagen que quieras mostrar en la celda al salir... 

function ocultar(objeto){ 

   objeto.background = '/Picture2.jpg'; 

   document.getElementById('capa').style.visibility = 'hidden'; 

} 

</script>

pero en lugar de "mostrar" puse "mostrar2" y "ocultar" puse "ocultar2" y cambie "capa" por capa2". También hice los cambios en

Código PHP:

  onMouseOver="mostrar2(this);" onMouseOut="ocultar2(this);"

 
y

 
<div id="capa2"><img src="2.JPG" width="20" height="20"></div>

Así ya aparecio cada capa en su lugar, pero me gustaría saber si está bien la forma en que hice que funcionara o hay alguna otra manera :S. Tendría que repetir ese código siempre que quiera otra capa? @.@

Saludos y Gracias! n_n