Mostrar imagenes

[xlos_mas_pro]

Bueno nose si entiendan muy bien lo que pasa es que estoy utilizando php con el frameworks codeigniter para mostrar los nombres de los usuarios en una tabla bueno lo que pasa es que el div tiene escondido un campo que se llama foto entonces cuando el visitante de la web pasa el mouse por ensima del div se tiene que mostrar la foto del usuario (Tomando en consideracion que esto se hace con foreach entonces los div se repiten sucesivamente y son muchos div todos con el campo foto ocualto)

Bueno aqui el codigo para que lo entiendan

Código PHP:

 <section id="perfiles">
 
<?php foreach($dis as $d): ?>
    
    <article id="usuario">
        <?php echo anchor('user/'.$d->usuario,$d->nombre.' '.$d->apellido,array('class' => 'nombre')); ?>
        <p id="user">Usuario: <?php echo $d->usuario; ?></p>
        <p id="yo">Es Diseñador</p>
 
        <div id="foto" style="display:none;"><img src="<?php echo base_url(); ?>css/image/fotosuser/<?php echo $d->foto; ?>" width="100" height="100" ></div>
 
    </article>
 
<?php endforeach; ?>
 
</section>  

ese es el codigo php si se fijan el div foto tiene display none y el article id usuario se repite hasta que se terminen los usuarios

Entonces yo tengo con jquery lo siguiente para que al pasar el mouse por ensima del article se visualice el campo foto

Código Javascript:

$(document).on("ready", function(){
       $('#usuario').mouseover(function(){
           
                     $('#foto').fadeIn(500);
});
});
 

PERO EL PROBLEMA ES QUE CUANDO LE PONGO EL MOUSE ENSIMA AL DIV ID = USUARIO SOLO ME MUESTRA LA FOTO DEL PRIMER USUARIO Y SI LE PONGO EL MOUSE ENSIMA A OTRO USUARIO ME SIGUE MOSTRANDO SOLO LA FOTO DEL PRIMER USUARIO

[miktrv]

Estas usando el mismo id para todos los usuarios... un id es único tendrías que usar un class y por ejemplo, encontrar la foto con children

Código PHP:

<section id="perfiles"> 
 
<?php foreach($dis as $d): ?> 
     
    <article class="usuario"> 
        <?php echo anchor('user/'.$d->usuario,$d->nombre.' '.$d->apellido,array('class' => 'nombre')); ?> 
        <p class="user">Usuario: <?php echo $d->usuario; ?></p> 
        <p class="yo">Es Diseñador</p> 
 
        <div class="foto" style="display:none;"><img src="<?php echo base_url(); ?>css/image/fotosuser/<?php echo $d->foto; ?>" width="100" height="100" ></div> 
 
    </article> 
 
<?php endforeach; ?> 
 
</section>
 

Código Javascript:

$(document).on("ready", function(){
       $('.usuario').mouseover(function(){
              $(this).children('.foto').fadeIn(500);
       });
});
 

[xlos_mas_pro]

Para que es el chlidren ?? es que estoy recien aprendiendo jquery estoy leyendo un manual y voy recien en la mitad acabo de empezar a leer lo de los metodos y esas cosas para que es el children ?

[IXtremeLT]

$elementoPadre.children(".foto") es para encontrar un elemento dentro del contexto en el que se ejecuta, es lo mismo que usar $elementoPadre.find(".foto") o $(".foto", elementoPadre), saludos!!!

[miktrv]

Pues básicamente children es para seleccionar elementos que son hijos del elemento selector.

Por ejemplo:

<ul><li><span>Text</span></li></ul>

li es children de ul, span es hijo de li y de ul

Entiendes?

Un saludo!

[xlos_mas_pro]

Si muchas gracias

[xlos_mas_pro]

Pero tengo otro problema el elemento al aparecer pestañea y aun que no saque el mouse de el div padre que seria el class="usuario" sigue pestañando me han dicho que le ponga z-index 999 pero no funciona sigue pestañando

[miktrv]

No entiendo a que te refieres, puedes colgar el ejemplo,

Un saludo!

[xlos_mas_pro]

Mira tengo este codigo:
jquery

Código Javascript:

$(document).ready(function(){
 
       $("article.usuario").mouseover(function(evento){
              if($(this).offset().left < 250)
              {
                     $(this).children('.foto').css({
                            'left': ($(this).offset().left - 130) + "px",
                            'top' : $(this).offset().top,
 
                     });
 
              }else{
                     $(this).children('.foto').css({
                            'left': ($(this).offset().left + $(this).innerWidth() + 10) + "px",
                            'top' : $(this).offset().top,
   
                     });
              }
  $(this).children('.foto').fadeIn(500);
 
 
       });
       $("article.usuario").mouseout(function(evento){
                      $(this).children('.foto').css({
                            'display': 'none',
                     });
       });
});
 

y el codigo html con php

Código PHP:

<section id="perfiles">
 
<?php foreach($dis as $d): ?>
    
    <article class="usuario">
        <?php echo anchor('user/'.$d->usuario,$d->nombre.' '.$d->apellido,array('class' => 'nombre')); ?>
        <p id="user">Usuario: <?php echo $d->usuario; ?></p>
        <p id="yo">Es Diseñador</p>
 
        <div class="foto"><img src="<?php echo base_url(); ?>css/image/fotosuser/<?php echo $d->foto; ?>" width="100" height="100" ></div>
 
    </article>
 
<?php endforeach; ?>
 
</section>
 

Si te fijas al pasar el mouse por el article usuario se muestra la capa foto y si es e se saca el mouse de la capa usuario se esconde la capa foto, ¿ cierto ?

Bueno hasta ahí el codigo esta perfecto pero el problema es que si es que pasa el mouse por la etiqueta P que hay adentro de la capa usuario osea no tendria por que desaparecer la capa foto pero no es haci desaparece y aparece de nuevo y pasa lo mismo con todas las etiquetas que ahy adentro de la capa usuario , si paso el mouse por cualquier etiqueta que este dentro de la capa usuario la capa foto desaparece y aparece de nuevo como dije como que pestañea no se por que pasa

[IXtremeLT]

Haa ya entendi, sucede que esos eventos se propagan y todos los elementos dentro de el tambien activan el mouseout y mouseover.

Mira hay algunos trucos para solucionarlo, pero ya que estas usando jQuery, no hay nada mejor que usar estos metodos que estan pensados justamente para lo que te sucede.

En vez de usar mouseover, usa "mouseenter" y en vez de mouseout usa "mouseleave".

Saludos!

[xlos_mas_pro]

Muchas Muchas gracias me ha servido de maravilla XD

[IXtremeLT]

= ) ..........