User:Eleanorg/1.2/Forbidden Pixels/jQuery reveal

python script with rudimentary jQuery script to reveal the pixel's info on click.
#print pixels [1][1]
    
##--------- reproduce pixels as an html table ------------------#		

##--------- print html page opener ------------#
print """
<!DOCTYPE html>
<html>
  <head>
    <title>Forbidden Pixels: Trial #1</title>
    <style type="text/css">
      body {
        background-color: #aaa;
        color: #eee;
      }
      
      .inner {
        margin:auto;
      }
      table {
        border-spacing: 0px;
      }
      
      .pixel {
        width: 50px;
        height: 50px;
        float: left;
        border: 1px #000 solid;
        padding: none;
        margin: none;
        font-size: 10px;
        color: #eee;
        background-color: #333;
      }
      
      .hide p {
        display: none;
      }
    </style>
    
    <script src="jquery-1.5.2.min.js"></script>
    
  </head>
  
<body>
  <div id="header">
    <h1>Forbidden Pixels</h1>
    <p>A 20 x 10 pixel section of a censored photograph</p>
  </div>
  
  <div class="inner">"""


##--------- print table with a loop, using list values ------------#
# '%03f' % row converts row number into 3 digits

print "<table>"
for row in range (0, rows):	
    print "<tr>"
    for column in range (0, columns):
        print """<td class="pixel" id=" """ + str('%03d' % row) + "." + str('%03d' % column) + """ "><p>Pixel position:"""+ str('%03d' % row) + "." + str('%03d' % column) + """; Color:""" + pixels[row][column] + """</p></td>"""
    print "</tr>"
print "</table>"

##---------- print jQuery to reveal colour string on hover -------------#

print """
  <script>
    (function() {
      var td = $('td');
      $(td).click(function(){
        console.log('hello');
        $(this).removeClass('hide');          
      });
    })();
  </script>
  """

##--------- print closing html tags ------------#
print """ 
  </div>
</body>
</html>"""