0

わかりましたので、ページ上の画像に静的なテキスト リンクを配置するための入力が必要です。画像は基本的にクラウドであり、製品はロゴで枝分かれしており、各製品にテキスト リンクが添付されています。

これについて最善の方法は何ですか？

現在、必要な幅と高さを設定して、div を作成することを考えています。それから。img を div 内に絶対配置し、リンクもすべて同じ div に絶対配置します...これは正しいと思いますか?

これに対する他のアプローチはありますか？

<div id="subheaderhome">

    <p class='hptext' id='wcp'> W</p>
    <p class='hptext' id='rp'> R</p>
    <p class='hptext' id='mp'> Meo</p>
    <img id="shopsol" src="images/solshairpiece.png" />
</div>
4

2 に答える 2

0

はい、そのアプローチは機能しますが、画像のみに従ってリンクを配置する場合は、position:absolute よりも position:relative を使用する必要があります。position:absolute は、配置する要素をドキュメントの通常のフローから削除し、ページ上の正確な位置に配置します。つまり、ブラウザーでズームインまたはズームアウトしても、ケース内のリンクは同じ位置に残ります。ページの残りの部分がビューで変更されます。これにより、ページが自分のものとは異なるサイズの画面でめちゃくちゃに見えるようになります.

于 2013-03-11T05:57:29.393 に答える
0

リンク付きの画像を作成していると思います。これは、箱から出して考える別のソリューションです。リンクの文言を画像デザイン自体に組み込み、画像マップを使用して、画像のどの部分をクリック可能なリンクとして扱うかをブラウザに伝えます。次に、リンクの位置は実際には画像自体の一部であり、これらのリンクを適切に動作させるために CSS をいじることをスキップできます。

まず、画像タグがあります。'#mapname' である必要がある usemap 属性を使用します。このコードでは、マップの名前は「home」なので、usemap 属性は「#home」です。

<nav>
    <img class="navbar" src="./images/navbar.gif" usemap="#home" alt="Home, Auto     Service, Hours & Location, Contact Info, Image Gallery" />

次に、マップをピクセル ペアで書き出します。ここの私のページでは、ボタンの画像を 5 回配置するのではなく、ボタンの長い画像を 1 つ配置しています。ボタンの 5 つのコピーで 1 つの画像を作成しました。各エリア タグは、画像の 1 つの長方形 (shape="rect") セグメントをカバーしています。ここの最初のものでは、画像の左上隅「0,0... (x,y)」から始めています。長方形の右下隅は右に 186 ピクセル、そこから 40 ピクセル下にあります。最初のポイントなので、...186, 40" です

<map name="home">
        <area shape="rect" coords=" 0, 0, 186, 40" href="index.html" alt="Mortensen Motors Homepage" />
        <area shape="rect" coords=" 186, 0, 372, 40" href="auto_service.html" alt="Tullahoma Auto Service" />
        <area shape="rect" coords=" 372, 0, 558, 40" href="hours_and_location.html" alt="Located in Tullahoma, Tennessee" />
        <area shape="rect" coords=" 588, 0, 744, 40" href="contact_info.html" alt="Contact info" />
        <area shape="rect" coords=" 744, 0, 930, 40" href="image_gallery.html" alt="Mortensen Motors image gallery" />
    </map>
</nav>

というわけで、1枚の画像を使って、5つのリンクを作りました。coords="" 属性は、実際の表示サイズではなく、画像ファイルによる画像のピクセルに基づいているため、これはあなたがしていることに最適です。したがって、ズームに基づいてイメージ カバレッジの意図した領域から逸脱することはありません。

于 2013-03-11T07:00:34.423 に答える