0

こんにちは: wordpress でサイトを作成していますが、2 つのコードが必要で、常に苦労しています。簡単だとわかっているのにうまくいかない。

  • 3つの画像のいずれかにマウスオーバー（または入力）すると、画像が説明テキスト付きの別の画像に変化（スライド）する必要があります。このサンプルコードに画像を含めるにはどうすればよいですか?

    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}

function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>

変更内容にマウスを合わせるhttp://www.nrgtechnologies.com.au/moreimages/plain-2.jpg

  • また、以下のリンクの画像のように、マウスオーバー時に 3 つまたは 4 つのメニュー要素の間をスライドして遷移する水平メニューと非常によく似た効果があります。

スライド メニューとコンテンツにマウスを合わせる: http://www.nrgtechnologies.com.au/moreimages/plain-1.jpg

助けてくれてありがとう

4

2 に答える 2

0

idに属性を追加しdiv、javascript ハンドラーを削除します。

<div id="description"></div>

次に、代わりにハンドラーを画像に追加します。

<img onmouseover="mOver(this)" onmouseout="mOut(this)" ... />

次に、関数で次のようなものを使用します。

function mOver(obj)
{
   var description = document.getElementsById("description");
   description.innerHTML="Thank You";
}

function mOut(obj)
{
   var description = document.getElementsById("description");
   description.innerHTML="Mouse Over Me";
}
于 2013-11-14T02:35:27.073 に答える