4

2つの質問があります：

  1. mouseover特定の位置の画像のイベントで画像の周りに6つのボタンを表示したい。出来ますか？

  2. onclickそれらのボタンのイベントを書くことは可能ですか？

私はウェブデザインの経験がありません。以下のコードを使用しました

Javascript：

function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
document.getElementById('imageshow').style.display='';
}

function hideIt()
{
document.getElementById('imageshow').style.display='none';
}

HTML：

<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button1"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button2"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button3"/><br>
<img src="Images/Image1.jpg" onmouseover="showIt(this.src)"><br>
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button4"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button5"/>&nbsp;&nbsp;&nbsp;
<input type="button" id="imageshow" Onclick="onClickFunc()" style="display:none" value="Button6"/>

しかし、私mouseoutが画像から見ると、ボタンが消えています。イベントを削除するonmouseoutと、ボタンはそのようなままになり、望まないものになります。そして、私は実際に画像の周りに6つのボタンを配置する方法を理解していませんでした。私はこのようにすることを計画しています： ここに画像の説明を入力してください

とても親切に私を助けてください。ありがとうございました

4

4 に答える 4

1

はいなぜそうではありません!!!

  1. 特定の位置の画像の上にマウスオーバーすると、画像の周りに6つのボタンを表示したいと思います。出来ますか？ANS：-すべてのボタンに「imgBtn」のような同じクラスを与え、デフォルトで何も表示しないようにします。画像上のマウスオーブンの時にあなたはコードを書くことができます

jqueryのように：- 

jQuery('#imageID').hover(function(){
    jQuery('imgBtn').show();
})

javascriptで：

この行をimgタグに貼り付けます

onmouseover="document.getElementsByClassName("redText").style.visibility = 'visible';"
  1. それらのボタンのonclickイベントを書くことは可能ですか？私はウェブデザインの経験がありません。とても親切に私を助けてください。ありがとうございました

ANS：はい、ボタンをクリックすると次のような関数を記述できます。

jQuery('#buttonID').click(function(){

    //button functionality
})
于 2012-09-03T12:17:08.867 に答える
1

はい、これは可能です。必要に応じて6つのボタンすべてを定義し、プロパティをスタイルで設定しますdisplay:none。画像上でマウスを操作し、6つの画像すべてを表示したい場合は、関数を呼び出してプロパティonmouseoverを設定します。このように、画像にマウスを合わせると、すべての画像が表示されますdisplay:nonedisplay:''

2番目に、各ボタンでを書くことができonClick、それはうまく機能します。

希望があなたのために働くでしょう。

これは、6つのうちの各ボタンのコードになります

<input type="button" id="btn1" Onclick="onClickFunc()" style="display:none" value="Button1" />
于 2012-09-03T12:46:45.927 に答える
0

OK、私の頭に浮かぶ唯一の解決策は、画像マップとjqueryを利用することです。

大まかなデモを作成しました。要件に応じて拡張する必要がある場合があります。

これがデモです

中央のボックスを除くすべてのボックスはイメージマップです。いずれかの画像マップにマウスを合わせると、jqueryを使用してボタンが表示されます。

于 2012-09-03T12:56:09.293 に答える
0

画像を1つのdivの背景として設定します。そのdiv内に別のdivを作成し、その中に6つのボタンのコードを記述します。

通常display:none、このボタンdivに設定されます。javascript関数からその画像にカーソルを合わせると、javascriptdisplay:blockから設定でき、6つのボタンが画像に表示されます。

以下は、ボタンのonclickイベントをワイトするためのコードです。

<button type="button" Onclick="alert('hai')">Click Me!</button>
于 2012-09-03T12:17:39.490 に答える