モノクロ画像上の人物をhoverした時にカラーにする方法

みーちゃん
モノクロ画像上の人物をhoverした時にカラーにするには、どうしたらいいんだろう??

 

そんな疑問に答える本記事です!

 

こんにちは。いちかわともや(Twitter: @tomochan8282)です。

 

本日は、モノクロ画像上の人物をhoverした時にカラーにする方法をご紹介したいと思います。

 

 

このようなものを作る方法です。

 

本記事を読めば、モノクロ画像上の人物をhoverした時にカラーにする方法がわかります。

 

モノクロ画像上の人物をhoverした時にカラーにする方法

写真の作成

 

最初に、モノクロ写真を作ります。Photoshopを開き、「イメージ」>「色調補正」>「白黒」を選択します。

 

 

モノクロ写真ができました。

 

 

次に、男性のみがカラーの写真を作ります。「クイック選択ツール」を選びます。

 

 

男性をなぞります。

 

 

「選択範囲」>「選択範囲を反転」を選びます。

 

 

「イメージ」>「色調補正」>「白黒」を選択します。

 

 

男性のみがカラーの写真ができました。

 

 

同様に、女性のみがカラーの写真も作ります。

 

HTML Imagemap Generatorでコードを生成

 

次に、イメージマップのコードを取得するため、HTML Imagemap Generator(http://labs.d-s-b.jp/ImagemapGenerator/)を使用します。ここに、モノクロ写真をドラッグします。

 

イメージマップ

1つの画像内に、複数のリンク先を設定できる機能のこと。

 

 

「多角形を描く」を選択して、男性の輪郭に沿ってクリックをしていきます。

 

 

輪郭をとったら、最後に「escキー」を押します。すると、男性の輪郭に対応するコードが生成されました。

 

 

同様に、女性の輪郭に対応するコードも生成します。男性、女性、それぞれのcoordsの数字をコピーします。

 

 

そして、index.htmlに、こちらのコードを埋め込みます。coordsには、先ほどコピーした数字をペーストします。

 

 

完成です!モノクロ画像上の人物をhoverした時、カラーに変化するようになりました。

 

最後までお読みいただきありがとうございました!

 

4 件のコメント

  • 初めまして、記事拝見させて頂きました
    素人からもうしわけありませんが質問させてください。

    waordpressを使って上記の画像をブログに入れたい場合、コードを『カスタムHTML』で入力でよろしいでしょうか?
    CSSをいじる必要はありませんでしょうか?

    非常に気になりぜひやってみたいと思い挑戦しましたが、画像がモノクロから切り替わりませんでした。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA