Suppression de l'info-bulle

Question

Est-il possible de désactiver l'info-bulle par défaut qui s'affiche dans un navigateur lorsque vous passez la souris sur une image? C'est sans enlever le titre ou les balises alt. Une autre option, l'info-bulle peut-elle être faite pour afficher un texte spécifique pour certains types d'image (tels que JPG) et un autre texte pour un type d'image différent (tel que PNG)?

Answer 1

L'attribut title est utilisé comme texte de survol dans la plupart des navigateurs par défaut. La seule façon de les supprimer est de supprimer l'attribut title. JavaScript serait capable de le faire. Je suis sûr qu'il ya une façon pure DOM pour ce faire, mais je me sers un peu jQuery:

$(function() { // when the document becomes ready for manipulation 
    $("[title]").removeAttr('title'); // removes title from all things that have title 
    // your other options: 
    // all images who's src ends in .jpg  
    $("img[src$=.jpg]").attr('title','JPG Image'); 
    // all images who's src ends in .png 
    $("img[src$=.png]").attr('title','PNG Image'); 
} 

Si vous avez besoin de coller cela sur vos pages, je suggère faire un fichier site.js qui a ce code dedans. Ensuite, vous devez indiquer à vos pages HTML de le charger. Vous devriez avoir un fichier de modèle de site principal (et peut-être déjà jQuery - si donc sauter l'inclure pour jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script> 
<script type="text/javascript" src="/js/site.js"> </script> 

Réponse au commentaire: diriez-vous de limiter les caractères qui peuvent apparaître dans l'info-bulle à zéro ou jusqu'à disons 10

ce problème se complique un peu plus, car celui-ci permet de retirer .each() sur des éléments avec des titres:?

$("[title]").each(function() { 
    var $this = $(this); // shortcut for later 
    var title = $this.attr('title'); // get the title attribute 
    // if the length of our title was 10 characters or more, shorten it and set: 
    if (title.length>10) { 
     $this.attr('title', title.substring(0,10)); 
    } 
});