CSSを使用した画像のマッピング

イメージマッピング -これは、イメージマッピングのメリットが表示されます理由を構築する際にWebサイトに実装する必要がチュートリアルです。 私は、方法と理由に加え、あなたのアクションのマッピング画像を表示するまで表示されます。 このイメージは、マッピングチュートリアルでは、初心者を狙ってのみ、HTMLやCSSの基本を知っている必要があります。

ここでアクションをクリックして画像マッピングのデモを参照するには

なぜイメージマップ使用しますか？

次のイメージを考えてみましょう。 注意して、実際には、同じファイル内に配置されている2つの画像です。 これはPhotoshopなどの最も良いイメージングソフトウェアを使用して達成することができます。

あるイメージをマッピングする2つの主要な利点があります。 最初にされてクリーンなコードは、すべてのWebデザイナーを達成するため、目指すべきもので、2番目のイメージマッピングのユニークな機能に問題のボタンの状態によってスローさを克服することです。

時のロールオーバーイメージを使用する場合よりもわずか1のイメージよりダウンロードする必要がある場合も、このときに、イメージの状態の変更を、お使いのブラウザは、2番目のダウンロードされたイメージをレンダリングする必要があることを意味するため、ロールオーバーされるように滑らかされません表示する必要があります。最初の時間が表示されます。 というのは、元の画像のように、2番目がダウンロードされ、イメージマップを使用して完全に、この問題を停止します。 がないの遅れ、それはそのような単純なことだ。

どのように地図画像を使用する

のは、私は上記のアイコンを使用したい場合を考えてみましょうロールオーバーイメージとして。 ときは、このページが最初にロードグレー2つの状態：必要があります、それから色のときにそれ以上のユーザーが残る。 いくつかの単純なCSSスタイルを使用する必要がこれを行うには、コードは、このような何かを調べる必要があります。

body{
font-size: 12pt;
font-family: Arial;
}
#links {
padding:10px;
}
a.bookmark {
background: url('/images/delicious.gif') left no-repeat;
background-position: 0px -17px;
text-decoration: none;
pointer:cursor;
padding-left: 18px;
margin-left:5px;
}
a.bookmark:hover {
background: url('images/delicious.gif') left no-repeat;
background-position: 0px 1px;
text-decoration: none;
padding-left: 18px;
margin-left:5px;
pointer:cursor;
}


このように両方のスタイルの状態に適用されているのと同じイメージを表示できますが、我々は状態を変更するすべてのやっているので、背景の位置を変更されたときにリンクを介してユーザーが置いた状態の変化が、すべてのことは、実際に変更されページの背景画像の位置を返します。 この本当の美しさ、実際のHTMLは、ページ上で必要なの少量、一度これを行っています。 実際のHTMLは次のように見えるこの例では。

< a class = "bookmark" href = "#" >Delicious</ a >


これで設定は完了です。 CSSのほんの少しの量とHTMLのも少量では、我々のロールオーバー画像には非常に迅速かつ効果的な方法を作成することができます。 ここでアクションをクリックしてデモを参照するには。