HTML/Jquery Page – Creation

I have decided that for my webpage (that will include a css and jquery file) i am going to make a simple pixel paint webpage where the user can colour in individual boxes/pixels (or divs). I first started with the html side of the web page:

<!doctype html>

<title>Jquery Pixel Paint!</title>
<link href=”styles/styles.css” rel=”stylesheet”>
<h1>Jquery Pixel Paint!</h1>
<p>Click on the boxes to paint them in!</p>


       //I have 311 of these box divs//


<script src=”js/jquery.js”></script> //link to jquery.js
<script src=”js/scripts.js”></script> //link to my jquery script

Below is the code in my jquery script:

$( document ).ready(function() {       

$( “.box” ).mouseover(function() {    //this establishes that i’m using a mouseover function
$(this).toggleClass( “selected” );    //when mouse goes over a div, it changes class from ‘box’ to ‘selected’


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s