CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Captain BudderChunk
Captain BudderChunk

Reputation: 25

How to make an image pop-up on screen without opening another window

So I have made a simple game where there is a bunch of pictures onscreen and when you click them, you get a point. Here is the code for that:

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
    picturesRemoved++;
  });
});
</script>

Then I also have this later in the code:

var picturesRemoved = 0;

and this for the pictures:

<br><p><img src="test.jpg" border="0" width="1001" height="159"></p>

What I want is so that the pictures will keep popping up on the screen until you click a certain amount of them. The certain amount should be 20. I can use CSS, or JavaScript, or HTML, or jQuery. (Or all.)

Thanks!

Upvotes: 1

Views: 17628

Answers (5)

Minal Raniga
Minal Raniga

Reputation: 101

A method to do this is to use an "on mouse over" action in html.

Within the script tag:

<script>
function large(x) 
{
    x.style.height = "640px";
    x.style.width = "480px";
}

function normal(x) 
{
    x.style.height = "50px";
    x.style.width = "50px";
}
</script>

Within the image tag:

<img onmouseover="large(this)" onmouseout="normal(this)" border="0" src="x" alt="x" width="50" height="50">

NB: x = your image name

Upvotes: 0

ThermalCube
ThermalCube

Reputation: 168

HTML example:

<div class="cut_oak_tree">
  <img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" /> 
  <img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" /> 
  <img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" /> 
</div>
<div id='countervalue'>0</div>

And Javascript:

var inter;

$(document).ready(function(){
    inter  = setInterval(function(){
        $('.cut_oak_tree').append('<img src="http://www.pbpixels.com/x/images/oak.png"onclick="myFunction(this)">');
    },1000);
});

var counter = 0;

function myFunction(img) {
    counter++;
    document.getElementById('countervalue').innerHTML = counter;
    img.onclick = null;
    img.remove();
    if(counter === 20){
        clearInterval(inter);
    }
}

UPDATE

Try this:

http://jsfiddle.net/nd2w3/2/

Upvotes: 1

Sheldon Neilson
Sheldon Neilson

Reputation: 803

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function addImage() {
            $('body').append('<p class="click-me" onclick="onImageClicked(this)"><img src="test.jpg" border="0" width="1001" height="159"></p>');
        }
        function onImageClicked(s) {
            $(s).remove();
            if (++document.picturesRemoved == 20) {
                clearInterval(document.myInterval);
            }
        }
        $(document).ready(function () {
            document.picturesRemoved = 0;
            document.myInterval = setInterval(addImage,1000);  
        });
    </script>
</head>
<body>

</body>
</html>

Upvotes: 1

ZeCo
ZeCo

Reputation: 3

//for jquery mobile probably//

<script type="text/javascript">
    $( document ).on( "pagecreate", function() {
        $( ".photopopup" ).on({
            popupbeforeposition: function() {
                var maxHeight = $( window ).height() - 60 + "px";
                $( ".photopopup img" ).css( "max-height", maxHeight );
            }
        });
    });
   </script>

//after that, in html make a button or link like this//

<a href="#my_image" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline"><img src="img_folder/my_image.jpg" alt="my image"></a>

//place your image like this//

<div data-role="popup" id="my_image" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

Upvotes: 0

user3045711
user3045711

Reputation:

I am not a good javascript programmer, But I know you can use this code to make the element visible or invisible. You can zet the default property of all images to display:none; in css. And for the javascript:

Invisible

document.getElementById(picture").style.display="none";

Visible

document.getElementById("myP").style.display="inline";

Upvotes: 1

Related Questions