Javascript hover v klik

2 naročnika

Spodnjo skripto bi rad preuredil iz zdajšnjega stanja (pri hoverju na img area map-u se ob "preleteni" sliki pokaže oblaček) tako, da bi se oblaček pokazal samo ob kliku ter na fiksni poziciji. Prosim za napotke, hvala lepa.

/function show_popup(rel)
{
jQuery.get("trgovine.xml", function(data){
jQuery(data).find("trgovina[rel="+rel+"]").each(function() {
var content = jQuery(this);
jQuery("#popup-content").html(content);
console.log(content.text());
});
}, "html");
jQuery("#popup").css("top", window.mouseY - 720 + "px");
jQuery("#popup").css("left", window.mouseX -300 + "px");
jQuery("#popup").fadeIn(200);
}/
function showpopup(rel, width, height, top, left)
{
height = height/2;
width = width/2;
console.log("width: " + width + " height: " + height + " top: " + top + " left: " + left);
jQuery.get("trgovine.xml", function(data){
jQuery(data).find("trgovina[rel="+rel+"]").each(function() {
var content = jQuery(this);
jQuery("#popup-content").html(content);
//console.log(content.text());
});
}, "html");
jQuery("#popup").css("top", window.mouseY - 720 + "px");
jQuery("#popup").css("left", window.mouseX -300 + "px");
jQuery("#popup").fadeIn(200);
}
function hidepopup()
{
jQuery("#popup").hide();
jQuery("#popup-content").empty();
}

jQuery(document).ready(function(){
jQuery("area").hover(function(){
var rel=jQuery(this).attr('rel');
doover(rel);
},
function(){
var rel=jQuery(this).attr('rel');
doout(rel);
});

jQuery(document).mousemove(function(e){
    window.mouseX = e.pageX;
    window.mouseY = e.pageY;
});

jQuery("#popup-content").jScrollPane();

});

načeloma bi moralo to biti to, tam ko je POZICIJA zamenjaj z številom od vrha pa od leve za fiksno pozicijo

/*function show_popup(rel)
{
 jQuery.get("trgovine.xml", function(data){
 jQuery(data).find("trgovina[rel="+rel+"]").each(function() {
 var content = jQuery(this);
 jQuery("#popup-content").html(content);
 console.log(content.text());
 });
 }, "html");
 jQuery("#popup").css("top", window.mouseY - 720 + "px");
 jQuery("#popup").css("left", window.mouseX -300 + "px");
 jQuery("#popup").fadeIn(200);
}*/
function show_popup(rel, width, height, top, left)
{
 height = height/2;
 width = width/2;
 console.log("width: " + width + " height: " + height + " top: " + top + " left: " + left);
 jQuery.get("trgovine.xml", function(data){
 jQuery(data).find("trgovina[rel="+rel+"]").each(function() {
 var content = jQuery(this);
 jQuery("#popup-content").html(content);
 //console.log(content.text());
 });
 }, "html");
 jQuery("#popup").css("top", "FIKSNA POZICIJA OD VRHApx");
 jQuery("#popup").css("left", "FIKSNA POZICIJA LEVOpx");
 jQuery("#popup").fadeIn(200);
}
function hide_popup()
{
 jQuery("#popup").hide();
 jQuery("#popup-content").empty();
}

jQuery(document).ready(function(){
 jQuery("area").click(function(){
 var rel=jQuery(this).attr('rel');
 do_over(rel);
 },
 function(){
 var rel=jQuery(this).attr('rel');
 do_out(rel);
 });

 jQuery("#popup-content").jScrollPane();
});

Žal ne dela, ob vsakem kliku slikico pomakne za 5px navzdol. Prej jo je moralo ob preletu vzdignit za 5 in zamenjati s hover sličico. Zdaj jo pa potiska navzdol, kr fajn zgleda, mogoče za kaj drugega uporabnega :) Hvala vseeno.

V bistvu sem samo zbrisal tam kjer si ti rekel in nastavil v css position absolute in pozicijo.

Moti me še samo, da ne vem kako naj tale hover (oblaček) zaustavim- nekako "zafiksiram" s klikom na posamezno sličico v area-map, da se ob preletu prek drugih ne bo menjaval.

bi pomagalo če daš primer kje deluje ta skripta :)