hover sobre texto?

lincenegro · #1 (**permalink**) 21/11/2011, 13:19

Buenas!

Tengo un problemilla, haber si alguien puede ayudarme. Tengo dos div, uno a la izquierda y otro a la derecha, identicos. La funcion del div de la izquierda es poner una imagen i el div de la derecha es poner un menu con enlaces a otras paginas. Lo que me gustaria hacer es que al pasar el raton sobre un enlace del div de la derecha (menu) la imagen del div de la izquierda cambie.

Decir que solo tengo conocimientos de xhtml y css basicos. Se podria hacer con la funcion hover? es algo que se me ha pasado por la cabeza, pero lo veo poco probable.

En fin, espero que alguien tengo respuesta a esta pregunta.

Agradeciendo de antemano las respuestas.

emprear · #2 (**permalink**) 21/11/2011, 16:51

vas a necesitar de javascript, algo asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
div.contiene_foto{
width: auto;
height:auto;
float: left;
}
div.contiene_foto{
width:200px;
height:200px;
float: left;
}
/*]]>*/
</style>
</head>
<body>
<div class="contiene_foto">
<img src="fotopordefecto.jpg" alt="" id="foto" width="200" height="200" />
</div>
<div class="contiene_menu">
<ul>
<li><a href="#" onmouseover="document.getElementById('foto').src='dos.jpg';"  onmouseout="document.getElementById('foto').src='fotopordefecto.jpg';">item menu</a></li>
</ul>
</div>
</body>
</html>

Saludos

lincenegro · #3 (**permalink**) 23/11/2011, 16:32

Buenas emprear:

Gracias por contestar tan rapido y perdona por la tardanza, pero he estado un poco liado y hasta ahora no me he podido poner.

No entiendo bien la estructura que has usado, ya que tiene dos div's identicos pero con diferentes atributos y como yo no soy muy avanzado en esto del html y css y menos en javascript que te parece si te pego el codigo y tu mismo lo modificas y asi voy probando.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Catalunya - Menu mitología catalana</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- begin #container -->
<div id="container">
    <!-- begin #header -->
    <div id="header">
        <div class="logo">Menu Mitología Catalana</div>
        <div id="navcontainer">
            <ul id="navlist">
                <li><a href="../index.html">INICI</a></li>
                <li><a href="index.html">INDEX</a></li>
                <li><a href="essers_mitologics.html">ÉSSERS MITOLÒGICS</a></li>
                <li id="active"><a href="essers_legendaris.html">ÉSSERS LEGENDARIS</a></li>
                <li><a href="ciencia_mitica.html">CIÈNCIA MÍTICA</a></li>
            </ul>
        </div>
    </div>
    <!-- end #header -->
    <div>
        <h2></h2>
        <h3></h3>
    </div>
    <div class="mainContent">
        <h1>MITOLOGÍA</h1>
        <p>
            El terme mitologia fa referència a un sistema relativament coherent de mites que es fonamenten una religió o un sistema de creences, o bé un conjunt de relats i personatges que es mantenen a la cultura popular. Un mite té com a característica principal ser una narració on no es pot destriar fàcilment el contingut i la història. Els temes es basen en explicar l'origen de l'univers o de la societat humana, dels costums o fets nacionals importants.<br /><br />
 
La mitologia rau en la base de la majoria de religions. Tot i que molts creients es poden ofendre si s'anomena mitologia al seu sistema de creences, d'altres accepten que no cal creure literalment en les històries que surten als textos sagrats, sinó que cal veure-les com a representacions figuratives (al·legories) del seu sistema de fe. Tot i això, el terme mitologia s'aplica més sovint a llegendes o històries de religions antigues, com la grega o la romana.<br /><br />
 
En moltes cultures sobreviuen de forma fragmentària mites o llegendes que són d'origen molt antic i que no estan lligades a la religió o religions majoritàries en aquella cultura en temps moderns. En la majoria de les societats modernes, aquests mites ja no es prenen com a veritables o com a explicació de cap fenomen, sinó com un llegat cultural d'altres temps o com a històries per a la mainada. D'altra banda, hi ha obres de ficció (per exemple, El Senyor dels Anells o Star Trek), que comparteixen moltes de les característiques dels relats mitològics clàssics. Moltes llegendes urbanes també tenen trets en comú amb els relats mitològics.<br /><br />
 
Actualment, moltes de les grans religions són monoteistes a diferència del que succeïa a l'antiguitat, quan diverses religions importants eren politeistes. Generalment, la mitologia admet l'existència d'un déu i de diverses criatures mitològiques i espirituals (com els àngels o els esperits), si bé hi ha alguna religió –com per exemple el budisme– que nega explícitament la idea d'un déu antropomòrfic; malgrat això, sí que admet l'existència d'alguna entitat sobrenatural. Els déus gairebé sempre són un exemple a seguir quant a moralitat i pauta de conducta, malgrat que en la religió grega antiga els déus tenien, curiosament, un comportament "arbitrari" i "desordenat". La mitologia presenta moltes similituds amb altres rondalles tradicionals que, en aquest darrer cas, no sempre tenen un origen i un contingut religiós.
      </p>
        <div class="leftSidebar"><img src="images/bruixa.gif" alt="" width="312" height="598" /><br /><br />
        </div>
        <div class="rightSidebar">
        <h1><u>ÉSSERS LEGENDADRIS</u></h1><br />
         <ul>
            <li><a href="#"><strike>Bruixes</strike></a></li><br />
            <li><a href="#"><strike>Bandolers</strike></a></li><br />
            <li><a href="#"><strike>Pirates</strike></a></li><br />
            <li><a href="#"><strike>Oficis màgics</strike></a></li><br />
        </ul>
                </div>
    
    <br class="clearfloat" />
    <!-- begin #footer -->
    <div id="footer">
        <p><a href="http://www.apple.com/es/" target="_blank"><img src="../imatges2/apple-logo.gif" alt="" width="15" height="15" /></a>&nbsp;&bull;&nbsp;&copy;2011 Tots els drets reservats &nbsp;&bull;&nbsp; Optimitzat per <a href="http://www.softcatala.org/wiki/Rebost:Firefox"/>Firefox</a> &nbsp;&bull; Resolució minima 1280x768&nbsp;&bull;&nbsp;<a href="mailto:[email protected]">Escriu-me</a></p>
</div>
    </div>
    <!-- end #footer -->
</div>
<!-- end #container -->
</body>
</html>

Espero que puedas ayudarme y agradeciendo tu respuesta.

Saludos!

emprear · #4 (**permalink**) 23/11/2011, 17:11

Que te parece mejor si te lo explico en detalle y vos lo adaptas, asi de paso aprendés un poco más

La situacion es esta:
vos tenes dos divs uno al lado del otro (imaginémoslos como dos cuadros. derecho e izquierdo)
El de la izquierda tiene una imagen que corresponde a cada elemento de un menu que está a la derecha(en forma de ul)
Ahora, al pasar el mouse en cada elemento de ese menú, la imagen debe cambiar por otra asociada a ese elemento.
Convengamos tambien en que al cargar la página ese espacio con la imagen puede cargar una imagen por defecto, que puede ser la del primer item del menu, otra imagen o simplemente una imagen en blanco, eso es a tu gusto.
Ahora, lo que en tu código es

Código HTML:

Ver original<div class="leftSidebar"><img src="images/bruixa.gif" alt="" width="312" height="598" /><br /><br />
        </div>
        <div class="rightSidebar">
        <h1><u>ÉSSERS LEGENDADRIS</u></h1><br />
         <ul>
            <li><a href="#"><strike>Bruixes</strike></a></li><br />
            <li><a href="#"><strike>Bandolers</strike></a></li><br />
            <li><a href="#"><strike>Pirates</strike></a></li><br />
            <li><a href="#"><strike>Oficis màgics</strike></a></li><br />
        </ul>
                </div>

Esos son los dos divs ó cuadros, y. por lo visto, pese a mi nulo catalán, la imagen por defecto corresponde al menu 1 (bruixa = bruixes)

en mi código, en lugar de eso, tenemos

Código HTML:

Ver original<div class="contiene_foto">
<img src="fotopordefecto.jpg" alt="" id="foto" width="200" height="200" />
</div>
<div class="contiene_menu">
<ul>
<li><a href="#" onmouseover="document.getElementById('foto').src='dos.jpg';"  onmouseout="document.getElementById('foto').src='fotopordefecto.jpg';">item menu</a></li>
</ul>
</div>

que no son ás ni menos que dos cuadros, uno a derecha con la foto y otro a la izquierda con el menú, posicionados con el css, aunque eso no viene al caso para el efecto.

La substitución de la imagen se consigue con

Código HTML:

Ver originalonmouseover="document.getElementById('foto').src='dos.jpg';"

que traducido al castellano significa que:

Al pasar el mouse sobre ese elemento <a> se va a reemplazar el atributo src del elemento que tenga por id el valor 'foto'
de la misma forma, y esto ya no lo traduzco, al hacer onmouseout, va a volver a reemplazar la imagen por la original (fotopordefecto.jpg)

Espero lo entiendas, y hay muy buenos manuales en librosweb.es

SAludos

lincenegro · #5 (**permalink**) 23/11/2011, 18:42

Buenas emprear!

Tu explicacion ha sido simplemente perfecta, desde el primer momento lo entendi y no me ha costado mucho aplicarlo y despues de tu explicacion he cogido bien la logica (creo).

Aun me falta un poquito de practica asi que ire jugando un poco con las imagenes y los enlaces, cualquier cosa lo pongo.

Una curiosidad es que antes de ponerlo en el documento he creado uno igual (copy + paste) y lo he modificado ahi, para hacer pruebas. La curiosidad es que la imagen no cambiaba al poner el raton encima del enlace, sino al dejarlo. Luego lo he probado en el documento que queria modificar pero ahi si que funciona.

Interesante la web de librosweb.es, directa a marcadores.

En fin... Muchas gracias porque me ha servido de mucho y lo podre aplicar en otra parte de la web que estoy haciendo.

lincenegro · #6 (**permalink**) 08/12/2011, 13:56

Buenas de nuevo!

Quisiera aprovechar este hilo para preguntar...

1.Como puedo hacer lo mismo pero en vez de que al poner el raton encima de la imagen salga un texto?

2.Para que salga ese texto tengo que hacer otra pagina html solo con el div o de que forma deberia hacerlo?

Pongo tal y como lo tengo ahora aunque sin mucho resultado, no se muestra ninguna imagen al poner o sacar el raton:

Código HTML:

Ver original<!-- start content -->
    <div id="content">
        <div class="post">
            <a href="#" onmouseover="document.getElementById('girona').src='images/img02.gif';"  onmouseout="document.getElementById('girona').src='../menu%20pobles/images/barcelona.gif';"></a>
        </div>
    </div>
    <!-- end content -->
  <div id="inici-index">
        <div id="inici"><a href="http://www.forosdelweb.com/f4/index.html"><h3>INICI</h3></a></div><div id="inici2"><a href="index.html"><h3>INDEX</h3></a></div>
    </div>
    <!-- start sidebar -->
    <!--[START-QM0]--><ul id="qm0" class="qmmc">
    <h1>GIRONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/girona.gif" alt="" id="girona" />
    <h1>BARCELONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/barcelona.gif" alt="" id="barcelona" />
    <h1>TARRAGONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/tarragona.gif" alt="" id="tarragona"  />
    <h1>LLEIDA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/lleida.gif" alt="" id="lleida" />
  <!-- end sidebar -->

Agradeciendo de antemano la ayuda.

emprear · #7 (**permalink**) 08/12/2011, 22:17

Como se entiende esto

Cita:

1.Como puedo hacer lo mismo pero en vez de que al poner el raton encima de la imagen salga un texto?

En el caso anterior en ningún momento se ponía el mouse sobre una imagen, se lo ponía sobre un link y se modificaba la imagen
Podés aclararlo?

lincenegro · #8 (**permalink**) 09/12/2011, 10:48

Buenas emprear!

Pues tienes toda la razon, estuve toda la tarde intentando hacer esto por mi mismo, pero sin mucho exito y el ultimo recurso fue escribir al foro, pero estaba algo espeso y me equivoque. Pido disculpas por el malentendido.

El tema es el siguiente:

Tengo una imagen al cual quiero que al ponerle el raton encima salga un texto a la derecha, como si fuera una capa oculta que al poner el raton donde yo quiero deje de estar oculta.

Dejo un enlace a una imagen, no consigo que salga:

http://imageshack.us/photo/my-images/819/capturadepantalla201112aa.png/

Como puedes ver sale la imagen de girona, pues quiero que al poner el raton encima de la imagen a la derecha salga un texto. Al igual que en el dibujo de barcelona y aun le faltan dos mas, que por no poner una foto muy grande no sale.

El html actual es el siguiente:

Código HTML:

Ver original<!-- start content -->
    <div id="content">
        <div class="post">
            <a href="#" onmouseover="document.getElementById('girona').src='images/img02.gif';"  onmouseout="document.getElementById('girona').src='../menu%20pobles/images/barcelona.gif';"></a>
        </div>
    </div>
    <!-- end content -->
  <div id="inici-index">
        <div id="inici"><a href="http://www.forosdelweb.com/f4/index.html"><h3>INICI</h3></a></div><div id="inici2"><a href="index.html"><h3>INDEX</h3></a></div>
    </div>
    <!-- start sidebar -->
    <!--[START-QM0]--><ul id="qm0" class="qmmc">
    <h1>GIRONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/girona.gif" alt="" id="girona" />
    <h1>BARCELONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/barcelona.gif" alt="" id="barcelona" />
    <h1>TARRAGONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/tarragona.gif" alt="" id="tarragona"  />
    <h1>LLEIDA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/lleida.gif" alt="" id="lleida" />
  <!-- end sidebar -->

Gracias!!!!

emprear · #9 (**permalink**) 09/12/2011, 11:48

Asi está mas claro
la cosa cambia un poco, ahora donde estaba el menu aparecería una descripción

podés hacer esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
div.contiene_foto{
width: auto;
height:auto;
float: left;
}
 
div#desc{
width:200px;
height:200px;
float: left;
border: solid 1px # 000;
margin-left: 5px;
font-family: arial, sans-serif;
color: red;
}
/*]]>*/
</style>
</head>
<body>
<div class="contiene_foto">
<img src="uno.jpg" width="100" height="100" alt="imagen 1"
 onmouseover="document.getElementById('desc').innerHTML='Esta es la descripción de la imagen 1';"  onmouseout="document.getElementById('desc').innerHTML='';" /><br />
<img src="dos.jpg" width="100" height="100" alt="imagen 2"
 onmouseover="document.getElementById('desc').innerHTML='Esta es la descripción de la imagen 2';"  onmouseout="document.getElementById('desc').innerHTML='';"/><br /> 
<img src="tres.jpg" width="100" height="100" alt="imagen 3"
 onmouseover="document.getElementById('desc').innerHTML='Esta es la descripción de la imagen 3';"  onmouseout="document.getElementById('desc').innerHTML='';"/><br />
</div>
<div id="desc">
<!-- descripción -->
</div>
</body>
</html>

el principio es similar, lo hacemos con javascript, pero en el mouseover en lugar de estar cambiando el valor del src para una imagen, hacemos que se cambie otra propiedad, el innerHTML del div que contiene la descripción. fijate que dicha div, ahora tiene un id, en lugar de un class, porque es necesario identificarla inequivocamente en el documento

Saludos

lincenegro · #10 (**permalink**) 09/12/2011, 17:00

Entiendo lo que has puesto y lo he estado provando y ya me funciona, pero quiza no me explique bien.

Este es mi codigo actual:

Código HTML:

Ver original<!-- start content -->
    <div id="content">
        <div class="post">
            <div id="desc1">
            </div>
        </div>
    </div>
    <!-- end content -->
  <div id="inici-index">
        <div id="inici"><a href="http://www.forosdelweb.com/f4/index.html"><h3>INICI</h3></a></div><div id="inici2"><a href="index.html"><h3>INDEX</h3></a></div>
    </div>
    <!-- start sidebar -->
    <!--[START-QM0]--><ul id="qm0" class="qmmc">
    <h1>GIRONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/girona.gif" alt="girona"
onmouseover="document.getElementById('desc1').innerHTML='hola';" onmouseout="document.getElementById('desc1').innerHTML='adios';" /><br />
    <h1>BARCELONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/barcelona.gif" alt="barcelona" onmouseover="document.getElementById('desc1').innerHTML='hola';" onmouseout="document.getElementById('desc1').innerHTML='adios';" /><br />
    <h1>TARRAGONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/tarragona.gif" alt="tarragona" onmouseover="document.getElementById('desc1').innerHTML='hola';" onmouseout="document.getElementById('desc1').innerHTML='adios';" /><br />
    <h1>LLEIDA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/lleida.gif" alt="lleida" onmouseover="document.getElementById('desc1').innerHTML='hola';" onmouseout="document.getElementById('desc1').innerHTML='adios';" /><br />
  <!-- end sidebar -->

Me refiero a que cuando pongo el mouse encima de la imagen me sale el"hola" y cuando quito el raton me sale el "adios". Yo me refiero a que cuando ponga el raton encima de la imagen me lea un div entero (texto, imagenes y otras cosas que ponga dentro del div) o en su defecto que me lea otro documento que yo haya creado.

Emprear, gracias por la paciencia.

emprear · #11 (**permalink**) 09/12/2011, 22:18

hay muchas formas de hacer eso

con la misma script que te pasé (el innerHTML bien puede ser contenido html)
<img src="uno.jpg" width="100" height="100" alt="imagen 1"
onmouseover="document.getElementById('desc').inner HTML='<p style="text-decoration: underline">Esta es la descripción de la imagen 1<br /><img src="lupa.jpg"><br />xxx</p>';" onmouseout="document.getElementById('desc').innerH TML='';" /><br />

lo que está en negrita seria lo que carga el div, pero para que funcione ese mismo código debería estar pasado a entidades html para evitar errores de javascript, lo que haría que te quede así

Código HTML:

Ver original<img src="uno.jpg" width="100" height="100" alt="imagen 1"
 onmouseover="document.getElementById('desc').innerHTML='&lt;p style=&quot;text-decoration: underline&quot;&gt;Esta es la descripci&oacute;n de la imagen 1&lt;br /&gt;&lt;img src=&quot;lupa.jpg&quot;&gt;&lt;br /&gt;xxx&lt;/p&gt;';"  onmouseout="document.getElementById('desc').innerHTML='';" /><br />

otra opción
que el div con descripciones sea un <iframe> y cargue otra página

una tercera, que uses Ajax, (con jquery podés usar la funcion load();)

Todo depende de que tan complejo sea el contenido html que querés cargar

Saludos

lincenegro · #12 (**permalink**) 11/12/2011, 12:17

Buenas!!!

No se si no me explico bien o no se que pasa. He intentado usar el ultimo script que me paso emprear para hacer lo que necesito pero sin ningun resultado.

Veo que una de las cosas que puedo modificar es donde pone:

Cita:

Esta es la descripción de la imagen 1

Pero intento meter <a href="">, <img>,<div id=""> y otras cosas ahi y no hace nada, como meto ahi dentro una pagina html entera si no me acepta nada?

Tambien me he fijado donde pone <img src="lupa.jpg"> que eso si que me pone una imagen, pero poco me sirve si no puedo poner nada mas.

He intentado usar los <iframe> aventurandome en ser un poco autodidacta pero tambien sin ningun resultado, aunque creo que es justamente lo que yo estoy pidiendo.

Mi codigo actual es este:

Código HTML:

Ver original<!-- start content -->
    <div id="content">
        <div class="post">
            <div id="desc">
            </div>
        </div>
    </div>
    <!-- end content -->
  <div id="inici-index">
        <div id="inici"><a href="../index.html"><h3>INICI</h3></a></div><div id="inici2"><a href="index.html"><h3>INDEX</h3></a></div>
    </div>
    <!-- start sidebar -->
    <!--[START-QM0]--><ul id="qm0" class="qmmc">
    <h1>GIRONA</h1>
            <img src="../menu%20pobles/images/girona.gif" alt="Girona"
    onmouseover="document.getElementById('desc').innerHTML='&lt;p style=&quot;text-decoration: underline&quot;&gt;Esta es la descripci&oacute;n de la imagen 1&lt;br /&gt;&lt;img src=&quot;images/img02.gif&quot;&gt;&lt;br /&gt;&lt;/p&gt;';"  onmouseout="document.getElementById('').innerHTML='';" /><br />
    <h1>BARCELONA</h1>
    <img src="../menu%20pobles/images/barcelona.gif" alt="Barcelona"
    onmouseover="document.getElementById('desc').innerHTML='&lt;p style=&quot;text-decoration: underline&quot;&gt;Esta es la descripci&oacute;n de la imagen 2&lt;br /&gt;&lt;img src=&quot;images/img02.gif&quot;&gt;&lt;br /&gt;&lt;/p&gt;';"  onmouseout="document.getElementById('').innerHTML='';" /><br />
    <h1>TARRAGONA</h1>
    <img src="../menu%20pobles/images/tarragona.gif" alt="Tarragona"
    onmouseover="document.getElementById('desc').innerHTML='&lt;p style=&quot;text-decoration: underline&quot;&gt;Esta es la descripci&oacute;n de la imagen 3&lt;br /&gt;&lt;img src=&quot;images/img02.gif&quot;&gt;&lt;br /&gt;&lt;/p&gt;';"  onmouseout="document.getElementById('').innerHTML='';" /><br />
    <h1>LLEIDA</h1>
    <img src="../menu%20pobles/images/lleida.gif" alt="Lleida"
    onmouseover="document.getElementById('desc').innerHTML='&lt;p style=&quot;text-decoration: underline&quot;&gt;Esta es la descripci&oacute;n de la imagen 4&lt;br /&gt;&lt;img src=&quot;images/img02.gif&quot;&gt;&lt;br /&gt;&lt;/p&gt;';"  onmouseout="document.getElementById('').innerHTML='';" /><br />
  <!-- end sidebar -->

y una imagen para que os hagais una idea:

http://imageshack.us/photo/my-images/819/capturadepantalla201112.jpg/
(sigue sin salir la foto)

Espero que me podais ayudar.

emprear · #13 (**permalink**) 11/12/2011, 12:57

@lincenegro
No alcanza con copiar y pegar, hay que entender, o intentar al menos , saber lo que se hace, las indicaciones que yo te pueda dejar en un post, de manera alguna igualan los conocimientos que puedas adquirir leyendo ó estudiando un buen manual sobre la materia.

Además si señalas

Cita:

Tengo una imagen al cual quiero que al ponerle el raton encima salga un texto a la derecha, como si fuera una capa oculta que al poner el raton donde yo quiero deje de estar oculta.

y resulta ser que ya no es un texto, sino contenido html... y al parecer no un html muy elaborado, la cosa se complica.

Me parece muy bueno eso de tratar de ser autodidacta, pero apoyate en algo
http://www.dyn-web.com/tutorials/iframes/ (un tutorial excelente)

aqui un ejemplo de como cargar un iframe, con javascript o un simple link

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<p>
<img src="uno.jpg" alt="" onclick="window.frames['detalles'].location = 'http://foros.emprear.com/css/tooltips';" width="100" height="100" /><br />
<a href="http://forosdelweb.com" target="detalles"><img src="dos.jpg" alt="" style="border: none;" width="100" height="100" /></a>
</p>
<iframe src="about:blank" width="500" height="500" name="detalles" frameborder="0" style="border: solid 1px #000;"></iframe>
</body>
</html>

Saludos

lincenegro · #14 (**permalink**) 18/12/2011, 17:46

Buenas!!!

Llevo como una semana intentando hacer eso, mirando tutoriales como el que me puso emprar [URL="http://www.dyn-web.com/tutorials/iframes/"]http://www.dyn-web.com/tutorials/iframes/[/URL] (aunque no se mucho ingles he usado el google traductor, pero claro, la traduccion es literal), mirando en google y habiendo entendido un poco la logica de los anteriores scripts que me han puesto no he conseguido con exito hacer lo que deseo.

Vuelvo a explicarme, el asunto esta en que hay dos columnas (div), la izquierda y la derecha. En la columna de la izquierda hay imagenes enlazadas a la columna de la derecha y en la columna de la derecha esta toda el texto (en html) que quiero que salga, junto con imagenes y enlaces.

Pues despues de tantos dias de romperme la cabeza no consigo encontrar la combinacion correcta para el onmouseover y el onmouseout. Le he dado tantas vueltas a todo que ya no se ni que quitar o poner para que funcione.

Pongo una imagen para que se entienda mejor:

http://imageshack.us/photo/my-images/18/capturadepantalla201112a.png/

Las 4 imagenes de la izquierda son las que estan enlazadas a la columna de la derecha, cada imagen enlaza a un div distinto, asi el contenido de la columna de la derecha cambia.

1.- Como deberia hacer para que el pergamino, solo entrar en la pagina salga vacio.

2.- Cual es la forma correcta de poner el onmouseover y el onmouseout para que funcione correctamente.

Comentarios como que todo lo que busco esta en google, en la web, en tutoriales, etc... pueden ahorrarselo, ya he investigado, re-investigado y mas y no he encontrado la solucion.

Pongo el codigo para que alguien me diga lo que tengo que modificar:

Código HTML:

Ver original<!-- start page -->
<div id="page">
<div id="dreta">
        <br />
            <div id="titul">
                <h1>PROVINCIA DE GIRONA</h1>
            </div>
            <div id="text">
            <p>La Cerdanya</p>
                <a href="videos/video_cerdanya.html" target=""><img src="images/puigcerda.JPG" alt="" /></a>
            <p>El Gironès</p>
                <a href="videos/video_girones.html" target=""><img src="images/girona.jpg" alt=""  /></a>
            <p>La Selva</p>
                <a href="videos/video_selva.html" target=""><img src="images/blanes.jpg" alt=""  /></a>
            <p>Alt empordà</p>
                <a href="videos/video_alt_emporda.html" target=""><img src="images/figueres.jpg" alt=""  /></a>
            </div>
        <div id="text1">
            <p>El Ripollès</p>
                <a href="videos/video_ripolles.html" target=""><img src="images/ripoll.jpg" alt="" /></a>
            <p>Pla de L'estany</p>
                <a href="videos/video_pla_estany.html" target=""><img src="images/banyoles.jpg" alt=""  /></a>
            <p>La Garrotxa</p>
                <a href="videos/video_garrotxa.html" target=""><img src="images/olot.jpg" alt=""  /></a>
            <p>Baix empordà</p>
                <a href="videos/video_baix_emporda.html" target=""><img src="images/bisbal.jpg" alt=""  /></a>
        </div>
        </div>
        </div>
<div id="page1">
<div id="dreta1">
    <br />
        <div id="titul">
            <h1>PROVINCIA DE BARCELONA</h1>
        </div>
        <div id="text2">
        <p>El Barcelonès</p>
            <a href="videos/video_barcelones.html" target=""><img src="images/barcelona.jpg" alt=""  /></a>
        </div>
        </div>
        </div>
  <div id="inici-index">
        <div id="inici"><a href="http://www.forosdelweb.com/f4/index.html"><h3>INICI</h3></a></div><div id="inici2"><a href="index.html"><h3>INDEX</h3></a></div>
    </div>
    <!-- start sidebar -->
    <div id="esquerra">
        <div id="mapa_girona">
    <h1>GIRONA</h1>
        <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/girona.gif"
    onmouseover="document.getElementById('').innerHTML='';"  onmouseout="document.getElementById('').innerHTML='';" /><br />
        </div>
        <br />
        <div id="mapa_barcelona">
    <h1>BARCELONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/barcelona.gif" alt="Barcelona"
    onmouseover="document.getElementById('').innerHTML=';"  onmouseout="document.getElementById('').innerHTML='';" />
    </div>
    <br />
    <div id="mapa_tarragona">
    <h1>TARRAGONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/tarragona.gif" alt="Tarragona"
    onmouseover="document.getElementById('div_dreta').innerHTML='&lt;p style=&quot;text-decoration: underline&quot;&gt;Esta es la descripci&oacute;n de la imagen 3&lt;br /&gt;&lt;img src=&quot;&quot;&gt;&lt;br /&gt;&lt;/p&gt;';"  onmouseout="document.getElementById('').innerHTML='';" />
    </div>
    <br />
    <div id="mapa_lleida">
    <h1>LLEIDA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/lleida.gif" alt="Lleida"
    onmouseover="document.getElementById('div_dreta').innerHTML='&lt;p style=&quot;text-decoration: underline&quot;&gt;Esta es la descripci&oacute;n de la imagen 4&lt;br /&gt;&lt;img src=&quot;&quot;&gt;&lt;br /&gt;&lt;/p&gt;';"  onmouseout="document.getElementById('').innerHTML='';" />
    </div>
    <br />
    </div>
</div>
<!-- end sidebar -->

Muchas gracias!