Ayuda sobre CSS doble hover

[jozillo]

Hola a todos, por fin encontré un lugar donde me siento identificado y poder sentirme en casa!! Ricien me he registrado y espero poder servir de ayuda...

Bueno llegué aquí por que tengo una duda, para saber si me la pueden o no resolver. El caso es que necesito hacer un enlace, que al pasar por encima con el cursor, en otro lugar distinto, aparezca una imagen, y cambiando a otro enlace, en ese mismo lugar aparezca otra imagen completamente distinta... no se si me e exolicado bien, os dejo esta página para que entendais mi propósito, esta está echo en javascript pero es para que entiendan lo que quiero hacer, igual que aqui cuando te pones en un escudo aparece su situación en el mapa, yo lo q quiero es que poniendo sobre un enlace digamos que de flores, en otro lado de la página aparezca una foto con flores, y si debajo de ese enlace hay otro que ponga árboles, en el sitio donde apareció la foto con flores, salga la foto pero de árboles... Muchas gracias anticipadas y gracias por este foro tan genial!

Por cierto la página que no la puso es http://lafutbolteca.com/segundaa/

[kseso?]

Como bien dice, el ejemplo que enlaza utiliza js, aunque ¡vaya con el código!
Con css sería posible también. Pero desconocemos las particularidades de su caso.
No obstante, hay infinidad de ejemplos para mostrar un elemento al :hover sobre un enlace y controlar el punto donde mostrarlo.

Seguro que en http://www.cssplay.co.uk // www.araudi.net // http://css.devillasbuenas.es hallará algo que le sirva de base e inicio.
Y si se está iniciando en css + html pase por www.librosweb.es y sus manuales

[jozillo]

Muchisimas gracias por su respuesta kseso?, en mi caso lo que pretendo es una botonera, con distintos botones (un botón a una galeria de fotos de viviendas, fotos de chalets, fotos de baños etc...) y mi intención es que al pasar el ratón por cada botón al lado de la botonera salga una imagen relacionada con cada boton... si paso por el botón de viviendas salga al lado una foto de una vivienda. De todas formas muchas gracias por responder, lo agradezco enormemente.

[kseso?]

el mostrar una imagen al recibir el foco es sencillo.
Tengamos el siguiente código html:

Código HTML:

<a href="#" title="título">Casa 1 <img src="imagen1.jpg" alt="alt" /></a>
 

lo primero es esconder la imagen:

Código CSS:

a img {display: none}
 

a continuación definir qué ocurre al posicionar el ratón sobre el enlace:

Código CSS:

a:hover img {
display: block; /*para que se puedan aplicar ciertas propiedades*/
position: absolute; /*para que su aparición no afecte a los otros elementos*/
left: XXpx;
top: YYpx; /*para colocar su aparición donde deseemos*/
}
 

recuerde que deberá cumplimentar con el resto de declaraciones necesarias (tanto la imagen, como el enlace /a/, como los ancestros de ellos (la lista, tabla o cajas que lo contenga).
Pero antes de seguir, creo que debería pasar por este tema:
cambiar imagen con css
Las advertencias también le serían aplicables.

[jozillo]

Perfecto, exactamente lo que quería... genial! Muchisimas gracias kseso? por su ayuda me ha solucionado perfectamente el problema! Muchas gracias.

[jozillo]

Por cierto su página es fáscinante... le he echado un vistazo por encima pero desde luego que me pasaré más a menudo cuando tenga más tiempo por que es una pasada... mi más sincera enhorabuena...

[kseso?]

Iniciado por jozillo

Por cierto su página es fáscinante... le he echado un vistazo por encima pero desde luego que me pasaré más a menudo cuando tenga más tiempo por que es una pasada... mi más sincera enhorabuena...

Miedo me da pensar qué página me estará asignando. :D~
Independientemente de todo eso, gracias por sus palabras y por su actitud tan predispuesta a aprender.

[jozillo]

Por su nick la web http://css.devillasbuenas.es es la que me a parecido que es suya, o me equivoco? en tal caso es una página genial... un saludo!