3

これに対する多くの可能な解決策を見てきましたが、まだ機能する解決策が見つかりません。CSSを使用してホバー時にリンクを光らせようとしています

画像をリンクするためにすべてのバージョンの長方形を使用しようとしましたが、一部は非常に小さく、重なり合っています。ポリゴン座標を CSS に組み込む方法はありますか? 私の主な問題は、ホバー時に光る css コードが幅と hgt px でリンクのサイズを要求することだと思います。しかし、私のhtmlリンクは不規則な形のxとyのポリ座標です

これは、ホバーしようとしていた CSS の 1 つですが、x 座標と y 座標でない場合、幅/高さの領域に何を配置すればよいかわかりません。

/* wiki image glow */
.wikiimageglow 
{ 
    margin-bottom: 10px; 
    width: px; 
    height:px; 
    display:block; 
    background:transparent url('http://cdn.obsidianportal.com/assets/199195/weird4.jpg') center top no-repeat; 
 }

.wikiimageglow:hover 
{ 
    background-image: url('http://cdn.obsidianportal.com/assets/199539/character.jpg');     
}

ここにリンクがあります

<img src="http://cdn.obsidianportal.com/assets/199195/weird4.jpg" width="654" height="690" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="poly" coords="351,81,386,317,335,295,302,215" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/game-master-information" />
    <area shape="poly" coords="567,202,405,376,390,321,435,243" href="http://www.obsidianportal.com/campaigns/runelords-of-lord-ao/items" />
    <area shape="poly" coords="368,426,403,379,491,365,608,445" href="http://www.obsidianportal.com/campaigns/runelords-of-lord-ao/characters" />
    <area shape="poly" coords="308,430,364,427,430,489,443,628" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/critical-hits-and-misses" />
    <area shape="poly" coords="268,383,305,428,296,514,195,616" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/character-creation" />
    <area shape="poly" coords="279,323,270,378,198,431,53,412" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/adventure-log" />
    <area shape="poly" coords="126,173,332,296,281,321,197,298" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/geography" />
    <area shape="poly" coords="145,530,151,485,199,457,179,507" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/pride" />
    <area shape="poly" coords="109,352,99,318,107,288,139,270,159,305,151,335" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/wrath" />
    <area shape="poly" coords="220,144,232,139,286,143,292,164,254,189,228,185" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/gluttony" />
    <area shape="poly" coords="432,142,463,142,480,152,461,174,415,211,414,174" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/greed" />
    <area shape="poly" coords="524,287,551,302,564,358,535,355" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/sloth" />
    <area shape="poly" coords="520,469,501,506,459,524,463,499,498,472" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/envy" />
    <area shape="poly" coords="323,522,343,562,337,594,328,606,307,578" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/lust" />
</map>
4

2 に答える 2

1

最も簡単なことは、基本的に元の画像であるスプライトを作成し、ホバーしたときに表示したいホバー効果を横に持っているスプライトを作成することだと思います。それはある。

スプライト画像の例

別のリスト: スプライト

于 2013-04-06T02:39:28.953 に答える