【JavaScriptで不定形図系の表示をオン・オフさせたい】

複数の不定形のコマがあるマンガの1ページをユーザに示し、JavaScriptを用いて、あるコマをクリックしたらそのコマが消え、再度、クリックしたらそのコマが再び現れる、という機能を実現したいです。だいたいどのようなやり方で実現すれば良いか、大まかな方針のアドバイスをいただけないでしょうか。また、参考になる書籍もしくはサイトを紹介いただけるのでしたら大変嬉しいです。よろしくお願いいたします。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2017/04/02 08:09:59
  • 終了:2017/04/04 01:18:11

ベストアンサー

id:pogpi No.1

pogpi回答回数376ベストアンサー獲得回数502017/04/02 11:42:16

ポイント300pt

コマをそれぞれdivでくくって、onclickでstyleのvisibilityを切り替えればできそうですね。

id:lionfan2

pogpi様、ありがとうございます。たいへん参考になります。

2017/04/03 18:29:34
id:lionfan2

自分でも探してみましたが、これが近そうですね。
http://www.tagindex.com/html_tag/img/img_map.html

これに、「onclickでstyleのvisibilityを切り替え」でやってみます。
ありがとうございました!!

2017/04/04 01:17:49
  • id:a-kuma3
    そのマンガのページはどうやって作るつもりですか?
    「不定形図系」ということは、長方形だけではなく台形のコマもあるということですよね。
  • id:lionfan2
    a-kuma3様、そのとおりです。台形もしくはいろんな形のコマがあります。
  • id:a-kuma3
    現時点の HTML では、ほとんどの要素は矩形、もしくはそれの角を丸くした形にしかできません。
    回答のコメントにある URL のやつは、クリッカブルマップというやつなのですが、それを使う(座標を拾っていく)ことをいとわないのであれば、CANVAS 要素を使うことになります。

    素の状態では、「CANVAS 要素に書いた図形がクリックされたとき」というのがない(CANVAS 要素がクリックされたとき、というのはある)ので、それなりに面倒です。

    それなりに需要があるはずなので、何かのライブラリ(CreateJS とかかな)を導入すると、少し楽ができそうな気がします。


    あ、いや、透過GIF を使う方が良いかも。
    クリックの位置判定はクリッカブルマップで検出して、
    - マンガのページと同じサイズ
    - マンガのコマに合わせた白い図形
    - その周りが透明色
    というような透過GIF を、隠したいコマの種類だけ用意して、クリックされたらマンガの画像に重ね合わせる。

    これであれば、難易度はさして高くありません。
  • id:lionfan2
    a-kuma3様、たいへん役立つ情報でした!! 本当にありがとうございます。
    ポイント、別途、お送りいたします。
  • id:lionfan2
    a-kuma3様
    ポイントをお送りしたかったのですが、
    「送信先が正しく指定されていないか、ポイントを受信できないユーザーです。 (エラーコード: 8,107,413,004)」
    となってしまいました。申し訳ございません。
    また試してみます・
  • id:a-kuma3
    >ポイントをお送りしたかったのですが、
    いえいえ、お気を使わずに。
    ポイントが受信できない件については、思い当たるフシがないわけでもなく :-)

    >現時点の HTML では、ほとんどの要素は矩形、もしくはそれの角を丸くした形にしかできません。
    ちょっとだけ補足。
    これは、やや不正確な書き方で、CSS で transform というのを使うと、回転・変形ができます。
    矩形の領域を回転・変形することで、ひし形や台形の領域が作れるので、これらを複数重ねると、台形の目隠しを作れなくはないです。
    座標を拾うのと、どっちが楽だろう、という感じですが。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません