Permalink
Browse files

Choose your own image for the slider game

  • Loading branch information...
1 parent 5d07fae commit 5dddefa95c3f21c59572a4c49a98dc66da867fb1 @chilts committed Apr 19, 2012
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -10,35 +10,55 @@
- styles.css
---
-<p>
- <strong>Instructions:</strong> Click on a tile to move it into the space. Keep moving tiles until you have arranged
- all 15 in the right order. The blank space should end up in the bottom right hand corner.
-</p>
-
-<div id="board">
- <div id="0" class="tile" style="left: 0px; top: 0px; background-position: -0px -0px;"></div>
- <div id="1" class="tile" style="left: 115px; top: 0px; background-position: -105px -0px;"></div>
- <div id="2" class="tile" style="left: 230px; top: 0px; background-position: -210px -0px;"></div>
- <div id="3" class="tile" style="left: 345px; top: 0px; background-position: -315px -0px;"></div>
-
- <div id="4" class="tile" style="left: 0px; top:115px; background-position: -0px -105px;"></div>
- <div id="5" class="tile" style="left: 115px; top:115px; background-position: -105px -105px;"></div>
- <div id="6" class="tile" style="left: 230px; top:115px; background-position: -210px -105px;"></div>
- <div id="7" class="tile" style="left: 345px; top:115px; background-position: -315px -105px;"></div>
-
- <div id="8" class="tile" style="left: 0px; top:230px; background-position: -0px -210px;"></div>
- <div id="9" class="tile" style="left: 115px; top:230px; background-position: -105px -210px;"></div>
- <div id="10" class="tile" style="left: 230px; top:230px; background-position: -210px -210px;"></div>
- <div id="11" class="tile" style="left: 345px; top:230px; background-position: -315px -210px;"></div>
-
- <div id="12" class="tile" style="left: 0px; top: 345px; background-position: -0px -315px;"></div>
- <div id="13" class="tile" style="left: 115px; top: 345px; background-position: -105px -315px;"></div>
- <div id="14" class="tile" style="left: 230px; top: 345px; background-position: -210px -315px;"></div>
- <!-- the empty tile -->
-</div>
-
-<div id="preload">
- <img src="img/bee.png" alt="bee" />
- <img src="img/cow.png" alt="cow" />
- <img src="img/elephant.png" alt="elephant" />
-</div>
+<div class="row">
+ <div class="span12">
+ <p>
+ <strong>Instructions:</strong> Click on a tile to move it into the space. Keep moving tiles until you
+ have arranged all 15 in the right order. The blank space should end up in the bottom right hand corner.
+ </p>
+ </div>
+</div><!-- /.row -->
+
+<div class="row">
+
+ <div class="span8">
+
+ <div id="board">
+ <div id="0" class="tile" style="left: 0px; top: 0px; background-position: -0px -0px;"></div>
+ <div id="1" class="tile" style="left: 115px; top: 0px; background-position: -105px -0px;"></div>
+ <div id="2" class="tile" style="left: 230px; top: 0px; background-position: -210px -0px;"></div>
+ <div id="3" class="tile" style="left: 345px; top: 0px; background-position: -315px -0px;"></div>
+
+ <div id="4" class="tile" style="left: 0px; top:115px; background-position: -0px -105px;"></div>
+ <div id="5" class="tile" style="left: 115px; top:115px; background-position: -105px -105px;"></div>
+ <div id="6" class="tile" style="left: 230px; top:115px; background-position: -210px -105px;"></div>
+ <div id="7" class="tile" style="left: 345px; top:115px; background-position: -315px -105px;"></div>
+
+ <div id="8" class="tile" style="left: 0px; top:230px; background-position: -0px -210px;"></div>
+ <div id="9" class="tile" style="left: 115px; top:230px; background-position: -105px -210px;"></div>
+ <div id="10" class="tile" style="left: 230px; top:230px; background-position: -210px -210px;"></div>
+ <div id="11" class="tile" style="left: 345px; top:230px; background-position: -315px -210px;"></div>
+
+ <div id="12" class="tile" style="left: 0px; top: 345px; background-position: -0px -315px;"></div>
+ <div id="13" class="tile" style="left: 115px; top: 345px; background-position: -105px -315px;"></div>
+ <div id="14" class="tile" style="left: 230px; top: 345px; background-position: -210px -315px;"></div>
+ <!-- the empty tile -->
+ </div>
+
+ </div>
+ <div class="span4">
+ <h3>Choose Your Own Image!</h3>
+ <img class="select" src="img/bee.png" width="80" height="80" alt="bee" />
+ <img class="select" src="img/cow.png" width="80" height="80" alt="cow" />
+ <img class="select" src="img/elephant.png" width="80" height="80" alt="elephant" />
+ </div>
+
+</div><!-- /.row -->
+
+<div class="row">
+ <div class="span12">
+ <p class="c">
+ Thanks to .....!
+ </p>
+ </div>
+</div><!-- /.row -->
View
@@ -138,4 +138,13 @@ $(function() {
makeMove(pos, id);
});
+ // now, enable the user to change images
+ $('.select').click(function(ev) {
+ ev.preventDefault();
+
+ var img = $(this).attr('src');
+ $('.tile').css({
+ 'background-image' : 'url(' + img + ')'
+ });
+ });
});

0 comments on commit 5dddefa

Please sign in to comment.