Anónimo
Link que cambie el valor de un texto
Estoy realizando una página web y tengo una cuestión.
En la página web tengo un div situado en la parte izquierda que contiene un listado de links. Cada link es el nombre de una planta. Por otra parte me gustaría colocar otro div (o form) en la parte derecha de la página web en el cual aparezcan las características de la planta (especie, familia, hojas, tronco, fruto...). Aprovechando el 'onMouseOver', quisiera que al pasar el cursor por encima del link de la planta 1, aparecieran las características en el div de la derecha. Y lo mismo para los otros links.
Se que se puede utilizar el Input type = "text", cambiando la propiedad "value" al pasar mouse por encima de un link. Pero no puedo meter un párrafo en la propiedad value, tal como este:
value = 'Familia: <br> 'Especie: <br>....
Ya que los <br> no me los pilla.
Otra opción seria que al pasar el mouse por encima del link 1 se visualizara la imagen 1 (y esta imagen seria un imprimir pantalla de las características de la planta 1). Pero necesitaría una gran cantidad de imágenes, y lo que pretendo es utilizar el mínimo posible de ellas para optimizar al máximo el peso de la página web.
Me gustaría que me aconsejara.
Su respuesta sera valorada.
En la página web tengo un div situado en la parte izquierda que contiene un listado de links. Cada link es el nombre de una planta. Por otra parte me gustaría colocar otro div (o form) en la parte derecha de la página web en el cual aparezcan las características de la planta (especie, familia, hojas, tronco, fruto...). Aprovechando el 'onMouseOver', quisiera que al pasar el cursor por encima del link de la planta 1, aparecieran las características en el div de la derecha. Y lo mismo para los otros links.
Se que se puede utilizar el Input type = "text", cambiando la propiedad "value" al pasar mouse por encima de un link. Pero no puedo meter un párrafo en la propiedad value, tal como este:
value = 'Familia: <br> 'Especie: <br>....
Ya que los <br> no me los pilla.
Otra opción seria que al pasar el mouse por encima del link 1 se visualizara la imagen 1 (y esta imagen seria un imprimir pantalla de las características de la planta 1). Pero necesitaría una gran cantidad de imágenes, y lo que pretendo es utilizar el mínimo posible de ellas para optimizar al máximo el peso de la página web.
Me gustaría que me aconsejara.
Su respuesta sera valorada.
2 respuestas
Respuesta de cblaarc
1
Se me ocurre sólo una cosa, usar ajax, o si estás con php, usa xajax. Esto te permite substituir un div o cualquier otra etiqueta, por otra, sin más que especificar su id. Es decir, puedes indicar que se cargue el div con id=2 en vez del actual, siendo este div el que tiene la descripción que tu necesitas mostrar.
Para la utilización de xajax (si tu servidor lo soporta) puedes revisar este manual que te mando en este link:
http://www.desarrolloweb.com/articulos/2279.php
http://www.desarrolloweb.com/manuales/xajax.html
También te puede servir de ayuda este otro enlace, donde hacen algo similar a lo que tu andas buscando
http://www.forosdelweb.com/f77/multiples-respuestas-ajax-pero-solo-div-622083/
Para la utilización de xajax (si tu servidor lo soporta) puedes revisar este manual que te mando en este link:
http://www.desarrolloweb.com/articulos/2279.php
http://www.desarrolloweb.com/manuales/xajax.html
También te puede servir de ayuda este otro enlace, donde hacen algo similar a lo que tu andas buscando
http://www.forosdelweb.com/f77/multiples-respuestas-ajax-pero-solo-div-622083/
Respuesta de acv18
1
Respecto a la pregunta no tengo ninguna duda de lo que quieres ya que es bastante claro.
En la parte de la pregunta que mencionas que quieres que se muestre la información conforme vas pasando con el mouse, bajo mi punto de vista, es sobrecargar tanto la página como al usuario ya que cuando vas pasando se muestra una gran cantidad de información junta y eso a la larga se hace pesado de ver en pantalla. Cuando un usuario quiera alguna información sobre alguna planta en especial no dudes que pinchará sobre el enlace y leerá el contenido.
Los efectos que me comentas de mostrar y ocultar se utilizan generalmente para mostrar poca información, es decir, para submenus generalmente ya que para ese tipo de casos necesitas tener la información rápidamente y no es tan pesada de leer ni de mostrar.
Me gustaría que me aclarases alguna duda.
¿Para qué utilizas los campos input? No le llego a encontrar su utilización de lo que estás realizando para este tipo de elementos.
En la parte de la pregunta que mencionas que quieres que se muestre la información conforme vas pasando con el mouse, bajo mi punto de vista, es sobrecargar tanto la página como al usuario ya que cuando vas pasando se muestra una gran cantidad de información junta y eso a la larga se hace pesado de ver en pantalla. Cuando un usuario quiera alguna información sobre alguna planta en especial no dudes que pinchará sobre el enlace y leerá el contenido.
Los efectos que me comentas de mostrar y ocultar se utilizan generalmente para mostrar poca información, es decir, para submenus generalmente ya que para ese tipo de casos necesitas tener la información rápidamente y no es tan pesada de leer ni de mostrar.
Me gustaría que me aclarases alguna duda.
¿Para qué utilizas los campos input? No le llego a encontrar su utilización de lo que estás realizando para este tipo de elementos.
Si, pensé en hacerlo con un input. El código seria algo así:
<a href ="#" onmouseover = document.forms[0].cambio.value = "hola" onmouseout = document.forms[0].cambio.value = "adios">Link</a>
<form>
<input type = "text" name="cambio" id="cambio" value="">
</form>
El problema de utilizar esto es que en la propiedad value solo podía introducir una palabra y no un texto.
Finalmente he hecho una aplicación de javascript y ya me funciona.
<a href ="#" onmouseover = document.forms[0].cambio.value = "hola" onmouseout = document.forms[0].cambio.value = "adios">Link</a>
<form>
<input type = "text" name="cambio" id="cambio" value="">
</form>
El problema de utilizar esto es que en la propiedad value solo podía introducir una palabra y no un texto.
Finalmente he hecho una aplicación de javascript y ya me funciona.