Javascript hover v klik

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 :)