J'expérimente une idée. J'ai un bloc de texte HTML, y compris des images en ligne. Certaines des images auront (ce que je pense s'appeler) flyouts. Autrement dit, survolez l'image pour faire apparaître un panneau de contrôle à sa gauche. À l'avenir, le panneau de contrôle bascule le mode d'affichage, change la taille de l'image, etc. Pour l'instant, je veux juste qu'il apparaisse. Et disparaître lorsque la souris quitte l'image ou le panneau de contrôle. JQuery UI a la fonction pratique "position" qui fait presque exactement ce que je veux. Quand je l'utilise sur Safari 5.0.1, ça marche la première fois mais les changements de souris suivants font que le panneau de contrôle soit de plus en plus décalé par ce qui semble être le même delta. Il semble que position() applique un décalage à chaque fois sur le panneau, lorsque je m'attendais à ce qu'il passe à une position fixe/statique. Quand je l'utilise sur Firefox 3.6.7, il y a un écart de 1 pixel entre l'image et le panneau de contrôle. Je veux que l'img et le div soient parfaitement alignés, ce que je pensais être le point de position.Déploiement de l'image en ligne à l'aide de l'interface utilisateur jQuery
Que dois-je faire pour que je sois à la bonne position à chaque fois? Et, est-ce que cette technique s'appelle un "flyout", "survol" ou un autre terme?
Voici mon code
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html><head>
<style>
.flyover {
border: 1px solid green;
position: absolute;
display: none;
}
img {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="flyover">*</div>
<P>Here is an image
<img width=30 height=30 src="http://www.dalkescientific.com/writings/diary/alcohol_terse.png">
Mouse over to get the flyover.
</P>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script>
var is_shown = 0;
var check_for_close = function() {
if (!is_shown) {
$(".flyover").hide();
}
};
// Don't check right away because the mouse might have
// moved from the image to the flyover or vice versa
var check_exit = function() {
is_shown = 0;
setTimeout(check_for_close, 0.0);
};
$(document).ready(function() {
$("img").mouseenter(function() {
$(".flyover").position({my: "right top",
at: "left top",
of: $("img")});
$(".flyover").show();
is_shown = 1;
}).mouseleave(check_exit);
$(".flyover").mouseenter(function() {
is_shown = 1;
}).mouseleave(check_exit);
});
</script>
</body> </html>