Preventing a Click Action

[snowfun87]

Here is the page that I am needing help with: http://gameageddon.com/elitetrainer/pokecenter.php

 

This page used to be super long and you had to scroll for each of the prizes, so I wanted to make it much simpler. I know it can be done also with AJAX/Javascript, but I was having trouble getting the coding to work so I found a php alternative. 

I have it so the players in my tcg can click on each box and the prizes will appear. I got that working, however, the players need to be able to save the images that appear in the box and also highlight the prize underneath. The problem is that any click will instantly close what was in the box.

 

How can I make it so that they can at least click inside of the box and it does not revert the box back to it's default view?

 

Here is a sample of the code from the page:

  <style>


  #button1:focus~#content #def,

  #button2:focus~#content #def,

  #button3:focus~#content #def,

  #button4:focus~#content #def {display:none;}


  #button1:focus~#content div:nth-child(2),

 #button2:focus~#content div:nth-child(3),

 #button3:focus~#content div:nth-child(4),

 #button4:focus~#content div:nth-child(5) {display:block;}


 #content {

     border:1px dashed black;

     color:white;

     font-size:10px;

     text-align:center;

  }


 #pokemon,#other,#elite, #champ {display:none;}


 </style>


                 <center><h2>Deck Mastery Rewards</h2></center>

                 <center>Pokemon (Non Legendary/Mega/Primal) - Please make sure you also have the appropriate pokeball.<br>

                         Other - Trainers, Gym Leaders, and Other Decks (For Trainers, please make sure to take 100 pokedollars for each mastery.)<br>

                         Elite - Elite 4 Decks<br>

                         Champion/Lendary - For Champions and also Legendary, Mega, and Primal Pokemon (Make sure you have master balls for these.)<br>

                         You will need to refresh for multiple masteries of the same type.<br><br></center>


 <center>

 <a id="button1" href="#" tabindex="1"><img src="img/icon-cappoke.png" alt=""/></a>

 <a id="button2" href="#" tabindex="2"><img src="img/icon-mastother.png" alt=""/></a>

 <a id="button3" href="#" tabindex="3"><img src="img/icon-mastelite.png" alt=""/></a>

 <a id="button4" href="#" tabindex="3"><img src="img/icon-champleg.png" alt=""/></a>


 <div id="content"> 

  <div id="def"><br>Reward cards will appear in this box.<br><br></div>

  <div id="pokemon"><br><?php 

 $card1= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)];

 $card2= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)];

 $card3= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)];


 echo "<img src=" . $card1 . ">\n";

 echo "<img src=" . $card2 . ">\n";

 echo "<img src=" . $card3 . "><Br>\n";


 $term1=explode("/cards/",$card1); $term1b=explode(".",$term1[1]);

 $term2=explode("/cards/",$card2); $term2b=explode(".",$term2[1]);

 $term3=explode("/cards/",$card3); $term3b=explode(".",$term3[1]);

 echo "<i>(deckname) Captured:</i> " . $term1b[0] . ", " . $term2b[0] . ", " . $term3b[0];

 ?><br><br></div>

  <div id="other"><br><?php 

 $card1= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)];

 $card2= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)];

 $card3= $medium[array_rand($medium,1)] . $digits[array_rand($digits,1)];


 echo "<img src=" . $card1 . ">\n";

 echo "<img src=" . $card2 . ">\n";

 echo "<img src=" . $card3 . "><Br>\n";


 $term1=explode("/cards/",$card1); $term1b=explode(".",$term1[1]);

 $term2=explode("/cards/",$card2); $term2b=explode(".",$term2[1]);

 $term3=explode("/cards/",$card3); $term3b=explode(".",$term3[1]);

 echo "<i>(deckname) Defeated/Mastered:</i> " . $term1b[0] . ", " . $term2b[0] . ", " . $term3b[0];

 ?><br><br></div>

  <div id="elite"><br><?php 

 $card1= $medium[array_rand($medium,1)] . $digits[array_rand($digits,1)];

 $card2= $medium[array_rand($medium,1)] . $digits[array_rand($digits,1)];

 $card3= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)];


 echo "<img src=" . $card1 . ">\n";

 echo "<img src=" . $card2 . ">\n";

 echo "<img src=" . $card3 . "><Br>\n";


 $term1=explode("/cards/",$card1); $term1b=explode(".",$term1[1]);

 $term2=explode("/cards/",$card2); $term2b=explode(".",$term2[1]);

 $term3=explode("/cards/",$card3); $term3b=explode(".",$term3[1]);

 echo "<i>(deckname) Defeated:</i> " . $term1b[0] . ", " . $term2b[0] . ", " . $term3b[0];

 ?><br><br></div>

  <div id="champ"><br><?php 

 $card1= $special[array_rand($special,1)] . $digits[array_rand($digits,1)];

 $card2= $special[array_rand($special,1)] . $digits[array_rand($digits,1)];

 $card3= $regular[array_rand($regular,1)] . $digits[array_rand($digits,1)];


 echo "<img src=" . $card1 . ">\n";

 echo "<img src=" . $card2 . ">\n";

 echo "<img src=" . $card3 . "><Br>\n";


 $term1=explode("/cards/",$card1); $term1b=explode(".",$term1[1]);

 $term2=explode("/cards/",$card2); $term2b=explode(".",$term2[1]);

 $term3=explode("/cards/",$card3); $term3b=explode(".",$term3[1]);

 echo "<i>(deckname) Defeated/Captured:</i> " . $term1b[0] . ", " . $term2b[0] . ", " . $term3b[0];

 ?><br><br></div>

 </div>

Edited July 27, 2017 by snowfun87

[requinix]

The Javascript is what matters here. You have to post that.