Desplegar imagen al pasar sobre enlace

[lidianavarro]

Hola, buenas tardes!

Soy nueva en el foro, al menos en cuanto a registro y participación. No he visto donde poder presentarme, así que no lo he hecho. Imagino que con el perfil basta.


Necesito aplicar lo que dice el tótul odel tema:


Desplegar imagen al pasar sobre enlace.


Resulta que ya lo tengo aplicado, pero no actua de la manera que me gustaria.


Enlace a la web donde lo he aplicado: [URL]http://www.lidia.elementfx.com/sincro/Inicio.html[/URL]


El scrip lo aplico a los enlaces de pie de página, concretamente a estos:


Gemma Mengual
Andrea Fuentes


Como veréis, el efecto se consigue, pero no quiero que me desplace nada, o sea, que realmente se despliege sobre la web o no que se abra paso.


javascript:

Código:

$(".imagenurlpie").hover(
    function(){
        $(this).children().fadeIn("slow");
    },
    function(){
        $(this).children().fadeOut(0);
    }
)

HTML:

Código:

<li><a class="imagenurlpie" href="http://www.gemmamengual.com" title="Gemma"> Gemma Mengual<img src="Gemma Mengual.jpg"></a>
    </li>    
<li>    
<a class="imagenurlpie" href="http://www.andreafuentes.es" title="Andrea"> Andrea Fuentes <img src="Andrea Fuentes.jpg"></a>
</li>

Creo y deseo me podréis ayudar.


Gracias

[rosonator]

Se me ocurre a botepronto que igual esto te ayuda, ponlo en tus img:

style="position: absolute; top: XXXpx; left: YYYpx; z-index:100;"

Cuádra los X e Y y además pon style:"z-index:0;" a tus <a>.

[emprear]

en primer lugar, bienvenida a FDW @lidianavarro
Lo que te está haciendo el efecto es el css

Código CSS:

#pie a:hover img{
    display:block;
}
 

no el javascript, que utiliza jquery, y la librería jquery no se carga en ninguna parte, tenés que definirte como lo vas a hacer, con el css el fade no lo vas a conseguir.
Cargar jquery tan solo para eso es algo exagerado.

Por otra parte tu html tiene muchos errores que deben ser solucionados (algunos graves)

Result: 30 errors / 0 warnings

line 6 column 172 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 6 - Info: start tag was here
line 7 column 104 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 7 - Info: start tag was here
line 8 column 44 - Error: end tag for "meta" omitted, but OMITTAG NO was specified
line 8 - Info: start tag was here
line 49 column 59 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 49 column 4 - Info: start tag was here
line 52 column 12 - Error: ID "londres" already defined
line 47 column 12 - Info: ID "londres" first defined here
line 53 column 11 - Error: ID "titular" already defined
line 48 column 11 - Info: ID "titular" first defined here
line 54 column 59 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 54 column 4 - Info: start tag was here
line 63 column 11 - Error: ID "titular" already defined
line 48 column 11 - Info: ID "titular" first defined here
line 64 column 61 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 64 column 4 - Info: start tag was here
line 66 column 12 - Error: ID "retirada" already defined
line 62 column 12 - Info: ID "retirada" first defined here
line 67 column 11 - Error: ID "titular" already defined
line 48 column 11 - Info: ID "titular" first defined here
line 68 column 61 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 68 column 4 - Info: start tag was here
line 101 column 11 - Error: ID "titular" already defined
line 48 column 11 - Info: ID "titular" first defined here
line 124 column 8 - Error: end tag for element "ul" which is not open
line 125 column 16 - Error: there is no attribute "tableid"
line 128 column 8 - Error: end tag for "ul" which is not finished
line 137 column 119 - Error: required attribute "alt" not specified
line 137 column 123 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 137 column 91 - Info: start tag was here
line 140 column 123 - Error: required attribute "alt" not specified
line 140 column 127 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 140 column 94 - Info: start tag was here
line 163 column 9 - Error: ID "creditos" already defined
line 162 column 9 - Info: ID "creditos" first defined here
line 163 column 18 - Error: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag
line 163 column 122 - Error: required attribute "alt" not specified
line 163 column 123 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 163 column 36 - Info: start tag was here
line 164 column 85 - Error: required attribute "alt" not specified
line 164 column 86 - Error: end tag for "img" omitted, but OMITTAG NO was specified
line 164 - Info: start tag was here
line 164 column 206 - Error: required attribute "alt" not specified
line 164 column 238 - Error: ":" is not a member of a group specified for any attribute
line 164 column 250 - Error: "lidianavarro" is not a member of a group specified for any attribute
line 164 column 294 - Error: "lidianavarro" is not a member of a group specified for any attribute


Saludos

[lidianavarro]

Hola.

Muchas gracias por las respuestas.


emprear, eso era lo que me sospechaba, que lo que hace el efecto es el css.


El tema es que tengo que hacer ese efecto con javasript, ya sea con jquery o sin, pues así me lo piden en el curso que estoy haciendo. Tengo que dejar el css a un lado...


Estoy un poco pez en esto, se nota? je.


Es aconsejable usar onmouseover para esto? teniendo en cuanta que he de usar javascript.

[lidianavarro]

Nadie mas me puede echar una cable??

Por cierto, lo de los errores ya era consciente y todo así pasó por buena.