binding two elements together....sort of
Hey Folks, here's something I'm trying to do....
I have this HTML code which is on the page. (image with anchor tag around it)
<a href="javascript:" class="bookmark_this"><img class="bookmark" src="/images/spacer.gif" alt="Bookmark and Share" title="Bookmark and Share" style="width:79px;height:18px;" /></a>
popup code
<div id="bookmark">
-- bookmark code --
</div>
when I hover over it, a Popup appears with bookmark options. What I'd like to do, is for the popup to automatically disappear on moveout from the image above (that works) UNLESS the mouse is over the popup window. If the mouse is not on the popup window or image code above, then disappear.
Jquery so far...
<script type="text/javascript">
$(document).ready(function() {
$('.bookmark_this').live('mouseover',function (e) {
var relativeX = e.pageX;
var relativeY = e.pageY;
var winH = $(window).height();
var winW = $(window).width();
$("#bookmark").css('top', relativeY-175);
$("#bookmark").css('left', relativeX-75);
$("#bookmark").fadeIn('fast');
var id = $(this).attr('id').substring(5);
// $("#file_id_tag").attr('value',id);
return false;
});
$('.bookmark_this').live('mouseout',function (e) {
$("#bookmark").fadeOut(5000,function () {
$("#bookmark").attr('value','');
});
});
});
</script>
Would anyone be able to provide some assistance. Thanks!
Tom