how to change opening a new window method - html

Question

I have the code below in a webpage and it's job is: when the mouse just goes over the image, a new window shows up and when the mouse goes out, it disapears. All it does is ok but i just want it to shows up when i CLICK on the image and it disapears when i CLICK on outside of the new window. Check it out.Help is needed
The code in header:
<style type="text/css">
a.imPop {
position:relative;
z-index:0;
}
a.imPop:hover {
display:inline;
z-index:auto;
}
a.imPop span {
display:none;
}
a.imPop:hover span {
display:inline;
position:left;
top:1em;
left:1em;
width:128px;
height:128px;
}
</style>
The code in body:
<a class="imPop" title="" style="color:#0000FF" font:large"">
<img src="images/1.gif" alt="" /><span>
<img src="images/2.jpg alt="" />
</span> </a>

Answer 1

something like this will do it in jquery if you have it on page:
jQuery(document).ready(function($) {
//this tracks the click on the class
$('.imPop').on('click', function(event) {
event.preventDefault();
/* Act on the event */
//this shows your span
$('.imPop span').show();
});
//now this is flaky because you are looking for a click on the body tag of the html it would be better to look for your page wrapper div and track clicks on that outside of the box
$('body').on('click', function(event) {
event.preventDefault();
/* Act on the event */
//this hide's the one you just showed!
$('.imPop span').hide();
});
});
Place this just before the closing tag:
<script>
jQuery(document).ready(function($) {
$('.imPop').click( function(event) {
event.preventDefault();
/* Act on the event */
$('.imPop span').show();
});
$('body').click(function(event) {
event.preventDefault();
/* Act on the event */
$('.imPop span').hide();
});
});
</script>
try this one:
<script>
jQuery(document).ready(function($) {
$('.imPop').click( function(event) {
event.preventDefault();
/* Act on the event */
$(this).children('span').show().addClass('showed');
});
$('body').click(function(){
event.preventDefault();
$('.showed').hide().removeClass('showed');
});
});
</script>