jquery: displaying image in top right corner

Question

hello, i am pretty new to jquery and hope this is the right place to ask.

my problem is the following. when i mouseover a certain element on a page, i want that a certain image is displayed in the top right corner of the page, no matter where the it is currently scrolled.

how can i achieve that? thanks a lot!

Answer 1

$(function(){
  $("#certain_element").mouseover(function(){
    $("#certain_img").css({position:"fixed",right:"0px",top:"0px"});
  });
});

see working example on http://jsbin.com/orace/

Answer 2

You want to use the position: fixed CSS property with top: 0; right: 0.

If you need IE 6 support, check this page.

$("#triggerId").mouseover(function (e) {
    $("#cornerImageId").show();
});

And have in your CSS:

#cornerImageId {
    position: fixed;
    top: 0;
    right: 0;
}