I am attempting to make a puzzle website for a university project and one of the puzzles I've thought of has been driving me a bit crazy. I want to have the page take a png image, split it into a bunch of 32px by 34px squares, and have those those squares disappear when the cursor is over them.
Here is a rough diagram of what I want: Rough Diagram (Ignore the slider things)
The closest I've found is a certain part of this tutorial where the image gets split into different puzzle pieces but I can't seem to take the code he uses and rework it to do what I need to do.
I know it's probably stupidly complicated and very situational, but I don't think it should be too hard... hopefully.
Edit: I've not tried much as I am not really a jQuery user or coder in any way. What I've used so far I barely understand and probably won't be of much use but I can post it.
I made a .js file called image_split.js and it contains this:
(function($)
{
$.fn.jSplit=function(options)
{
var piece=$('<span></span>').addId("curtain" + this.id.substring(4)).css(
{
'width': 32+'px',
'height': 34+'px',
'display': 'inline-block',
'float': 'left',
'background-image': 'url("images/curtain.png")',
'background-position': (-32)+'px '+(-34)+'px',
})
};
})(jQuery);
and then called it in the HTML.
<script>
$(document).ready(function() {
$('#actor').jSplit();
});
</script>
That was meant to split the image. As for making it disappear, I have this:
<script type="text/javascript">
$(document).ready(function() {
$("div[id^=curtain]").hover(
function(){
$("#curtain" + this.id.substring(4)).css({"visibility":"visible"});
},
function(){
$("#curtain" + this.id.substring(4)).css({"visibility":"hidden"});
}
);
});
</script>
I know it's not working and I'm sure all this code is terrible, but if it helps you guys than all the better, I guess.