0

5 つの重なり合う四角形で構成される画像があります。そのすべてに関連する見出しがあり、対応するページにリンクする必要があります。コードを自動的に生成するオンライン画像マッピングジェネレーターに画像をアップロードしようとしましたが、CSS のみを変更でき、HTML は変更できません。画像マッピングは私の問題に対する最良の解決策でしょうか? または、HTML の変更を伴わない代替方法はありますか?

これは私のイメージです：

ここに画像の説明を入力

HTML:

<div style="text-align:center; width:406px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201310160406077" src="http://www.image-maps.com/uploaded_files/3201310160406077_home_image.png" usemap="#Image-Maps_3201310160406077" border="0" width="406" height="406" alt="" />
<map id="_Image-Maps_3201310160406077" name="Image-Maps_3201310160406077">
<area shape="rect" coords="72,3,192,43" href="#" alt="" title=""    />
<area shape="rect" coords="326,75,401,115" href="#" alt="" title=""    />
<area shape="rect" coords="4,290,118,330" href="#" alt="" title=""    />
<area shape="rect" coords="241,361,332,401" href="#" alt="" title=""    />
<area shape="rect" coords="158,180,249,220" href="#" alt="" title=""    />
<area shape="rect" coords="404,404,406,406" href="http://www.image-maps.com/index.php?aff=mapped_users_3201310160406077" alt="Image Map" title="Image Map" />

CSS:

dl.image_map {display:block; width:406px; height:406px; background:url(http://www.image-maps.com/uploaded_files/3201310160406077_home_image.png); position:relative; margin:2px auto 2px auto;}
a.LINK0 {left:72px; top:3px; background:transparent;}
a.LINK0 {display:block; width:122px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK0:hover  {background:transparent; border:1px dashed black; color:black;}
a.LINK1 {left:326px; top:75px; background:transparent;}
a.LINK1 {display:block; width:77px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK1:hover  {background:transparent; border:1px dashed black; color:black;}
a.LINK2 {left:4px; top:290px; background:transparent;}
a.LINK2 {display:block; width:116px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK2:hover  {background:transparent; border:1px dashed black; color:black;}
a.LINK3 {left:241px; top:361px; background:transparent;}
a.LINK3 {display:block; width:93px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK3:hover  {background:transparent; border:1px dashed black; color:black;}
a.LINK4 {left:158px; top:180px; background:transparent;}
a.LINK4 {display:block; width:93px; height:0; padding-top:42px; overflow:hidden; position:absolute;}
a.LINK4:hover  {background:transparent; border:1px dashed black; color:black;}
4

2 に答える 2

0

適切な位置に適切なサイズの z-index (CSS) を使用して html 要素をスタックし、それに画像付きのハイパーリンクを追加すると、正しく機能するはずです。

この例をチェックして、どのように機能するかを確認してください。

<html>
<head>
<style>
/* setup container */
.nav-wrapper
{
    position:relative;
    width:500px;
    height:500px;
    background:#f0f0f0;
}

/* on each item */
a.nav-item
{
    position:absolute;
    width:200px;
    height:200px;
}

/* per specific item, note the position and the z-index */
.home {
    left: 120;
    top: 135;
    z-index:5; /*on top*/
    background:rgba(250,50,50,.9);
}
.print {
    left:80;
    top: 30;
    z-index:1; /*on bottom*/
    background:rgba(60,60,60,.5);
}
.fileshare {
    left: 40;
    top: 180;
    z-index:2;
    background:rgba(50,50,50,.5);
}
.stock {
    left: 235;
    top: 220;
    z-index:3;
    background:rgba(70,70,70,.5);
}
.links {
    left: 240;
    top: 50;
    z-index:4;
    background:rgba(80,80,80,.5);
}

/* for example only */
.nav-item img
{
    width:200px;
    height:200px;
}
</style>
</head>
<body>
    <div class="link-wrapper">
        <!-- items over here. note the classes -->
        <a href="print.html" class="nav-item print">
            <img src="print.png" alt="print" />
        </a>
        <a href="fileshare.html" class="nav-item fileshare">
            <img src="fileshare.png" alt="fileshare" />
        </a>
        <a href="home.html" class="nav-item home">
            <img src="home.png" alt="home"/>
        </a>
        <a href="stock.html" class="nav-item stock">
            <img src="stock.png" alt="stock" />
        </a>
        <a href="links.html" class="nav-item links">
            <img src="links.png" alt="links" />
        </a>
    </div>
</body>
</html>
于 2013-10-16T08:04:30.153 に答える