そんな疑問に答える本記事です！
こんにちは。いちかわともや（Twitter: @tomochan8282）です。
本日は、モノクロ画像上の人物をhoverした時にカラーにする方法をご紹介したいと思います。
このようなものを作る方法です。
本記事を読めば、モノクロ画像上の人物をhoverした時にカラーにする方法がわかります。
モノクロ画像上の人物をhoverした時にカラーにする方法
写真の作成
最初に、モノクロ写真を作ります。Photoshopを開き、「イメージ」＞「色調補正」＞「白黒」を選択します。
モノクロ写真ができました。
次に、男性のみがカラーの写真を作ります。「クイック選択ツール」を選びます。
男性をなぞります。
「選択範囲」＞「選択範囲を反転」を選びます。
「イメージ」＞「色調補正」＞「白黒」を選択します。
男性のみがカラーの写真ができました。
同様に、女性のみがカラーの写真も作ります。
HTML Imagemap Generatorでコードを生成
次に、イメージマップのコードを取得するため、HTML Imagemap Generator（http://labs.d-s-b.jp/ImagemapGenerator/）を使用します。ここに、モノクロ写真をドラッグします。
１つの画像内に、複数のリンク先を設定できる機能のこと。
「多角形を描く」を選択して、男性の輪郭に沿ってクリックをしていきます。
輪郭をとったら、最後に「escキー」を押します。すると、男性の輪郭に対応するコードが生成されました。
同様に、女性の輪郭に対応するコードも生成します。男性、女性、それぞれのcoordsの数字をコピーします。
そして、index.htmlに、こちらのコードを埋め込みます。coordsには、先ほどコピーした数字をペーストします。
完成です！モノクロ画像上の人物をhoverした時、カラーに変化するようになりました。
最後までお読みいただきありがとうございました！
初めまして、記事拝見させて頂きました
素人からもうしわけありませんが質問させてください。
waordpressを使って上記の画像をブログに入れたい場合、コードを『カスタムHTML』で入力でよろしいでしょうか？
CSSをいじる必要はありませんでしょうか？
非常に気になりぜひやってみたいと思い挑戦しましたが、画像がモノクロから切り替わりませんでした。
記事をご覧いただきありがとうございます。
WordPressの場合は、index.phpもしくはheader.phpに直接書き込めばできると思います。
有難うございました
無事出来ました
コピーするコードの範囲を間違えていたようです
よかったです。