HTMLコードを使用してロールオーバー画像を作成する方法

著者: Virginia Floyd
作成日: 5 Aug. 2021
更新日: 1 J 2024
Anonim
HTML画像送信ボタン（ロールオーバー付き）チュートリアル
ビデオ: HTML画像送信ボタン（ロールオーバー付き）チュートリアル

コンテンツ

インターネット上に存在する何百万ものウェブサイトで、それはあなたのものがユニークであることが不可欠です。ウェブサイトに動的効果を加えるために使用される１つの技術は、「ロールオーバーボタン」としても知られる「ロールオーバー画像」である。基本的に、訪問者が画像の上にマウスを移動すると画像が変化し、マウスを離すと通常の状態に戻ります。これは、画像の色や文字の変更など、微妙な効果に使用できます。さまざまなデザインプログラムで、基本的なHTMLフォーマットを使用して独自のロールオーバーイメージを作成できます。


説明書

ロールオーバー画像を使用して動的Webサイトを作成する （Jupiterimages / Photos.com / Getty Images）

  1. Photoshopなどの画像編集ソフトウェアを使用して、目的のサイズ（ピクセル単位）の新しい文書を作成します。通常の画像と「ロールオーバー」画像を作成します。これらは同じサイズである必要があります。

  2. [ファイル]メニューから[保存]を選択して、両方の画像を個別に保存します。 JPEG、GIF、またはPNG形式を使用してください。最初の2つが最も一般的に使用されていますが、PNGは透明性を保持します。必ずあなたのサイトのローカルルートフォルダに画像を保存してください。

  3. Adobe Dreamweaverなどの適切なデザインソフトウェアを開きます。ライブラリの[更新]ボタンをクリックして、サイトのライブラリとローカルルートフォルダを更新します。ルートフォルダで画像を見つけます。

  4. Webページのコードビューに切り替えます。

  5. 「」と入力します

    「コードでは、開始引用符なし。

  6. あなたのウェブサイトのアドレスで "http://yoursite.com"を置き換えてください。また、 "IMAGE1"と "IMAGE2"をそれぞれ通常画像と "ロールオーバー"画像の名前に置き換えます。

必要なもの

  • 画像編集ソフトウェア
  • Webデザインソフトウェア