Foros del Web » Programando para Internet » Javascript »

Al poner el raton encima de una imagen lea un div

Estas en el tema de Al poner el raton encima de una imagen lea un div en el foro de Javascript en Foros del Web. Buenas tardes! Para empezar dire que de javascript no se nada de nada, asi que supongo que un poco de paciencia tendreis que tener conmigo. ...
  #1 (permalink)  
Antiguo 30/09/2015, 12:14
 
Fecha de Ingreso: abril-2009
Mensajes: 16
Antigüedad: 15 años
Puntos: 0
Al poner el raton encima de una imagen lea un div

Buenas tardes! Para empezar dire que de javascript no se nada de nada, asi que supongo que un poco de paciencia tendreis que tener conmigo.

El asunto es que descargue una plantilla y tengo un carrousel de imagenes en el centro superior de la pagina y justo abajo tengo un cuadro en blanco (div) al que le quiero poner un texto pero que cambie solo poner el cursor encima de una foto. Anteriormente habia conseguido eso pero de texto a imagen y me costo lo suyo, he probado por logica hacer cambios a ese codigo pero no he conseguido nada.

Código HTML:
<div id = "carousel1" style="width:960px; height:280px;background:none;overflow:scroll; margin-top: 20px">            
        <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
        <!-- You can place links around these images -->
        <img class="cloudcarousel" src="images/slider/01.jpg" alt="" title="" />
        <img class="cloudcarousel" src="images/slider/02.jpg" alt="" title="" />
        <img class="cloudcarousel" src="images/slider/03.jpg" alt="" title="" />
        <img class="cloudcarousel" src="images/slider/04.jpg" alt="" title="" />
        <img class="cloudcarousel" src="images/slider/05.jpg" alt="" title="" />
        <img class="cloudcarousel" src="images/slider/06.jpg" alt="" title="" />
        <img class="cloudcarousel" src="images/slider/07.jpg" alt="" title="" />
        <img class="cloudcarousel" src="images/slider/08.jpg" alt="" title="" />
        <img class="cloudcarousel" src="images/slider/09.jpg" alt="" title="" />
        <img class="cloudcarousel" src="images/slider/10.jpg" alt="" title="" />
    </div>
    <!-- Define left and right buttons. -->
    <center>
    <input id="slider-left-but" type="button" value="" />
    <input id="slider-right-but" type="button" value="" />
    </center>
</div>
<div id="templatemo_main">
	
    <div class="col one_third fp_services">
    <h2>Welcome!</h2>
        <img src="images/templatemo_image_04.jpg" alt="Image 04 " class="image_fl" />
        <p><a href="http://www.templatemo.com" target="_parent">Carousel</a> is  free css template provided by <a href="http://www.templatemo.com">templatemo.com</a> for your personal or commercial websites. Quisque nec suscipit ipsum. Fusce vitae accumsan massa.</p>
  		<ul class="templatemo_list">
            <li class="flow">Integer placerat dolor vel</li>
            <li class="flow nomr">Condimentum vulputate</li>
            <li class="flow">Itristique non suscipit id</li>
            <li class="flow nomr"> Donec eget lacus vitae leo</li>
        </ul>
    </div>
    <div class="col one_third fp_services">
        <h2>Recent News</h2>
        <div class="rp_pp">
            <img src="images/templatemo_image_01.jpg" alt="Image 01" />
            <a href="#">Integer venenatis pharetra magna vitae   condimentum*  ultrices.</a>
            <p>Feb 27, 2048 - 140 comments</p>
            <div class="cleaner"></div>
        </div>
        <div class="rp_pp">
            <img src="images/templatemo_image_02.jpg" alt="Image 02" />
            <a href="#">Nulla facilisi. Vestibulum vel odio ac mi feugiat condimentum.</a>
            <p>Feb 21, 2048 - 154 comments</p>
            <div class="cleaner"></div>
        </div>
        <div class="rp_pp">
            <img src="images/templatemo_image_03.jpg" alt="Image 03" />
            <a href="#">Fusce dolor neque, placerat ac erat venenatis eu, venenatis ac leo.</a>
            <p>Feb 15, 2048 - 179 comments</p>
            <div class="cleaner"></div>
        </div>
    </div>
    <div class="col one_third no_margin_right fp_services">
        
        <h2>Testimonials</h2>
        <div class="testimonial">
            <p>Nunc vitae purus non augue scelerisque ultricies vitae et velit quis nulla id orci malesua tempus erat.</p>
            <cite>Rock  <a href="#"><span>- CEO, New Company</span></a></cite></div>
    	<div class="testimonial">
            <p>Curabitur sed felis urna, quis eleifend magna. Nunc quam mollis sem iaculis sed. Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow"><strong>XHTML</strong></a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a>.</p>
    		<cite>John <a href="#"><span>- Senior Director, Company</span></a></cite></div>
    </div>
    
    <div class="cleaner"></div>
</div> <!-- END of templatemo_main --> 
Aqui os dejo una imagen, que seguro que ayuda a entenderlo mejor.

  #2 (permalink)  
Antiguo 03/10/2015, 05:51
 
Fecha de Ingreso: noviembre-2014
Ubicación: Granada
Mensajes: 7
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Al poner el raton encima de una imagen lea un div

Puedes probar a poner el evento onmouseover en cada imagen del carousel, como
Código HTML:
<img class="cloudcarousel" src="images/slider/01.jpg" alt="" title="" onmouseover="document.getElementById('templatemo_main').innerHTML='Texto'" /> 
Si no funciona, tendrás que modificar el plugin del carousel.
  #3 (permalink)  
Antiguo 05/10/2015, 06:46
 
Fecha de Ingreso: abril-2009
Mensajes: 16
Antigüedad: 15 años
Puntos: 0
Respuesta: Al poner el raton encima de una imagen lea un div

Muchas gracias conik500, lo que has puesto si que funciona, pero solo puedo escribir una linea o varias y lo que me interesa es poner un contenedor con css, pero me has dado una base sobre la que romperme la cabeza.

He recuperado el codigo que use en la anterior pagina que tenia y que comento mas arriba. Estoy tratando de mezclar codigos por si hay suerte.

Ire poniendo los progresos, haber si entre una cosa y otra acaba saliendo.

De nuevo muchas gracias!

Última edición por lincenegro; 05/10/2015 a las 07:11
  #4 (permalink)  
Antiguo 05/10/2015, 14:02
 
Fecha de Ingreso: abril-2009
Mensajes: 16
Antigüedad: 15 años
Puntos: 0
Respuesta: Al poner el raton encima de una imagen lea un div

Bueno, pues en este punto lo dejo hoy, mañana seguire...

Código HTML:
<a href="http://www.puig-reig.cat/web/index.php"><img class="cloudcarousel" src="images/slider/51.jpg" alt="" title="Prem per anar a la web de l'ajuntament de puig-reig" onmouseover="document.getElementById('templatemo_main').innerHTML='Puig-reig'" onmouseout="document.getElementById('templatemo_main').innerHTML='None'"; /></a> 
He conseguido que en el cuadro blanco poner una imagen solo cargar la pagina. Al poner el raton encima la foto me sale el siguiente texto: Puig-reig y que cuando saco el raton ponga lo siguiente: None.

Mañana toca investigar como hago para poner el texto. Tambien comentar que googleando he visto como usaban el a:hover para poner un fondo semitransparente con un texto dentro, y creo que voy a utilizar ese sistema, ya que no se como llamar a un contenedor con java.

Seguire poniendo los avances.

Etiquetas: encima, html, input, raton
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:24.