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

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

 

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

 

こんにちは。ホテルマン兼エンジニア、いちかわともや(@tomochan8282)です。

 

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

 

 

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

 

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

 

未経験から
稼げるエンジニアになる
正しい方法

侍エンジニア塾なら、わずか6ヶ月で稼げるエンジニアを目指せます。IT業界が人手不足の今、思い切ってエンジニアになってみませんか?

 

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

◆もくじ

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

  1.  写真の作成
  2.  HTML Imagemap Generatorでコードを生成




写真の作成

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

 

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

 

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

 

男性をなぞります。

 

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

 

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

 

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

 

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

 

HTML Imagemap Generatorでコードを生成

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

イメージマップ

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

 

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

 

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

 

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

 

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

 

 

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

 

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

未経験から
稼げるエンジニアになる
正しい方法

侍エンジニア塾なら、わずか6ヶ月で稼げるエンジニアを目指せます。IT業界が人手不足の今、思い切ってエンジニアになってみませんか?

 

コメントを残す

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

CAPTCHA