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>

<html>
<head>
<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>
</head>

<body>

       //I have 311 of these box divs//

</div>

<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’
});

});

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s