1

だから私は次のようなhtmlボタン属性でオーバーレイしたい画像を持っています：

これは空白の画像です プレーン画像

そのようなボタンを画像に重ねたい 私が欲しいもの

ボタンがクリックされた場合は、次のようになります。 ボタンをクリックしたときの画像

私が収集できるものから、これは{index-z}を使用してCSSを使用して行うか、html5キャンバスタグを使用して行うことができます。次に、実際のボタンクリックをJavaスクリプトで処理します。しかし、私はこれをどのように達成するか完全にはわかりません（私が知っているjavascriptでのボタンクリックの処理）。誰かがこれを行う方法についてのチュートリアルにリンクするか、それが大いにありがたい説明を与えることができますか？

注：これがこれを行う方法を変更する場合、画像自体もhref /リンクになります。さらに、画像自体は、約50の類似した画像がある一種のギャラリーになります。

4

2 に答える 2

6

ポジショニングを使用して、他の画像の上に「スター」ボタンを配置できます。画像とボタンは、相対位置に設定されたコンテナ内にある必要があります。次に、「星」を絶対位置に設定できます。その位置は、コンテナを基準にしています。

.image-container {
    display: inline-block;
    position: relative;
}

.star-button {
    position: absolute;    
    right: 10px;
    top: 10px;
}


<div class="image-container">
    <img src="main image here">

    <img class="star-button" src="star image here">
</div>

次に、JavaScriptで画像（またはボタン、または、またはあなたが持っているもの）のクリックを処理できます。

JSFiddle

于 2013-03-16T14:57:09.763 に答える
1

たぶん、この例は私の友人を助けるでしょう:

ソース: ye5

HTML :
<div id="header1" width="259px">
<a href="http://your-website-link"></a>
<img src='http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3b.jpg' style='margin-left:259px; margin-top:-128px;'/>


CSS :
#header1 a { 
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:link { 
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:hover { 
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a2.jpg);
height:128px;
width:259px;
display: block;
}

#header1 a:active { 
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5 templete/ye5Header3a3.jpg);
height:128px;
width:259px;
display: block;
}
于 2013-03-16T15:58:57.043 に答える