2010-10-28 4 views
-1
<!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" dir="ltr"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> 
<style type="text/css"> 
.user-bg { 
background:-moz-linear-gradient(center bottom , #0E0E0E 70%, #9B9B9B 100%) repeat scroll 0 0 transparent !important; 
} 
.user { 
    display:block; 
    padding:5px; 
    position:absolute; 
    width:auto; 
    z-index:5; 
} 

.ui-corner-all { 
    -moz-border-radius:4px 4px 4px 4px !important; 
} 
.ui-corner-all { 
    -moz-border-radius:6px 6px 6px 6px; 
} 
</style> 
</head> 
<body> 
<img src="4cc7ea9c6daee.jpg"> 
<div class="user ui-corner-all user-bg" id="user-1" style="left: 288px; top: 299px;"> 
    <div class="user-avatar-text ui-widget ui-corner-all" id="user-avatar-text-1" style="visibility: visible;">  
     <span class="user-name">Rahul</span><br>  
     <button id="user-info-1" class="ybutton user-info">Details</button>  
    </div> 
    <div class="ui-corner-all user-avatar user-active" id="user-avatar-1" style="visibility:visible;"> 
     <div class="ui-corner-all user-avatar-image-bg">  
      <div id="user-avatar-image-1" style="background:url('4cc7ea9c6daee.jpg') no-repeat scroll center center rgb(0, 0, 0);" class="ui-corner-all user-avatar-image">  </div> 
     </div> 
    </div>   
     <div class="user-halo ui-corner-all ui-resizable ui-resizable-autohide" id="user-halo-1" style="visibility: hidden;"> 
     <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; -moz-user-select: none; display: none;" unselectable="on"></div> 
     </div>  
     <div class="user-chat ui-state-error ui-corner-all" id="user-chat-1" style="visibility: hidden;"></div> 
    </div> 
</body> 
</html> 
<script type='text/javascript'> 
$(document).ready(function(){ 
    var popup_pos=$('#card-208').offset(); 
    var timer; 
    $("#card-208").bind('mouseover',{},function() { 

     setTimeout(function() { 
      $("#divtoshow").show(); 
     }, 1000); 
    });  
    $("#card-208").bind('click',{},function() { 
     $("#card-208").unbind('mouseover'); 
      alert('click event is triggered'); 





    });  

    $("#divtoshow").bind('mouseleave',{} ,function() { 
      $("#divtoshow").hide(); 
    }); 
}); 
</script> 

salut dans cette divimage de fond ne montre pas

mon image d'arrière-plan ne signifie montrer ce div n'est pas visible.

pourquoi? s'il vous plaît me dire ..

ce qui a trait

Rahul

Répondre

0

Parce que la div n'a pas de contenu, pas de hauteur et aucune largeur, il est rendu comme étant pixels 0x0 donc il n'y a pas d'espace pour afficher l'image.

L'image est, cependant, de contenu (l'avatar transmet des informations aux visiteurs) donc vous devriez utiliser un élément <img> et non une propriété d'image de fond CSS pour cela.

0

Cela fonctionne mais seulement dans Firefox, car le préfixe -moz est un préfixe de fournisseur spécifique à firefox.

également votre bloc <script> en dehors de <html>. Déplace-le à l'intérieur.

Voir votre exemple de code fonctionnant ici: http://jsbin.com/urupu3