1

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.

4

1 に答える 1

0

あなたのように聞こえますが、生成されるhtmlがなければ、適切な答えを出すのは難しいですが、最善を尽くします。例に JSFiddle を含めました。どのようにタグを追加しているのか完全にはわかりませんが、<span>怠け者なのでjQueryで処理しました。

http://jsfiddle.net/vmex151/xvvvy/

それはあなたが探しているもののようなものですか?

于 2013-03-21T13:55:23.400 に答える