javascript mouseOver code

かなりシンプルな機能はこちらですが動作しません。 Javascriptだけで始まりましたので、私に優しくしてください。また、初心者のための良いコミュニティフォーラムを知っている人もいます。私はこれがここで尋ねるのはとても簡単な質問だと思っていますが、そうでないかもしれません。javascript mouseOver code

<html> 
<head> 
<script type="text/javascript"> 

var img; 

function mouseOver() 
{ 
    alert(img); 
    img.src ="button_over.jpg"; 
} 
function mouseOut() 
{ 
    img.src ="button_out.jpg"; 
} 

function init() 
{ 

    img = document.getElementById("buttonWrapper").getElementsByTagName('img')[0]; 
} 
</script> 
</head> 

<body onLoad="javascript:init()"> 
    <div id="buttonWrapper"> 
     <img border="0" src="button_out.jpg" width="62" height="74" onmouseover="mouseOver()" onmouseout="mouseOut()"/> 
    </div> 
</body> 
</html>

出典

2011-02-04 Chapsterj

...だけでなくそれにクリックイベントハンドラを追加することができます。専門知識のレベルに関係なく整形されたものはここで歓迎します:) – David

そのメモに...「機能しない」と定義します。コードはまったく起動しませんか？たとえば 'alert（）'は決して呼び出されません。 – David

答えを選択してください –

-4

javascriptを使い始めたばかりの場合は、jQueryを学ぶだけで大丈夫です。あなたがしようとしていることを大幅に簡素化します。この場合、here

に行く、あなたは簡単に例here.

出典

2011-02-04 21:44:58 n8wrl

-1実際には適切な答えではありません。 –

合意。 Javascript！= jQueryと質問は、特にJavascriptのヘルプのためのものでした。 – khr055

私は彼の特定の質問に答えなかったのは間違いありませんが、私が始めたときに数年前に誰かが私にjQueryを指摘してくれたらと思います。私は彼のjavascript - 生活を長期的に簡単にすることを望んでいたと思う。 – n8wrl

これはあなたの問題を修正する場合、私は知らないとあなたのimgタグにクリックイベントを結びつけることができますが、それを行うのは容易なことではないでしょうこのようなもの？

<html> 
<head> 
<script type="text/javascript"> 

function mouseOver(img) 
{ 
    img.src ="button_over.jpg"; 
} 
function mouseOut(img) 
{ 
    img.src ="button_out.jpg"; 
} 

</script> 
</head> 

<body> 
    <div id="buttonWrapper"> 
     <img border="0" src="button_out.jpg" width="62" height="74" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" /> 
    </div> 
</body> 
</html>

出典

2011-02-04 21:47:06 MarioVW

パーフェクトで清潔です。ありがとう – Chapsterj

JavaScriptは問題の解決方法ですが、別のアプローチをおすすめします：代わりにCSSを使用してください！私はGoogleで見つけここ

チュートリアル： http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/

これはまた、あなたが直面する「プリロード問題」を解決する、意味：あなたはホバーイメージをロードするための時間を必要とするボタンの上にマウスを使って行くとき。結果は画像の表示に隙間ができます（0.5秒間は画像が表示されません）。

出典

2011-02-04 21:50:11

リンクありがとう – Chapsterj

ライブデモ：http://jsfiddle.net/jTB54/

ジャスト（右</body>前の）ページの下部にこのコードを入れて、あなたはonloadイベントハンドラを必要としません。

var img = document.getElementById("buttonWrapper").getElementsByTagName('img')[0]; 

img.onmouseover = function() { 
    this.src = "button_over.jpg"; 
} 

img.onmouseout = function() { 
    this.src = "button_out.jpg"; 
}

出典

2011-02-04 21:50:19

私はまだ私のタグ – Chapsterj

の中にそれを必要としますか？だからjavascriptがページの先頭にある場合は、body onLoadイベントを使用する必要があります。すべてのjavascriptを本体に入れると、読み込むのを待つ必要はありません。これは正しい考えです。これは、ページの全体的な負荷を膨らませません。利点と欠点は何ですか？ – Chapsterj

@userはい、あなたはSCRIPT要素の中に入れなければなりません。 HTML文書に埋め込まれているJavaScriptコードは、SCRIPT内になければなりません。あなたの2番目の質問に答えるには：ブラウザはHTMLコードを順番に解析します。 JavaScriptコードをページの下部に配置すると、すべてのHTML要素が既に解析されているため、JavaScriptコードをすぐに実行することができます。また、ここで読んでください：http://developer.yahoo.com/performance/rules.html#js_bottom –

私は考え

http://jquery.com/

サイトには多くの優れたチュートリアルがあります.Googleではさらに詳しいことができます。

ここには、mouseover、mouseup、mousedown、およびhoverの各状態を持つボタンがいくつかあるサイトのスニペットがあります。各ボタンの状態はもちろん、独自のイメージを持っています

$(function() { 
    $("#btnPrintSheet").mousedown(function() { 
     $(this).attr("src", BASE_IMG_PATH + "printDN.gif"); 
    }).mouseup(function() { 
     $(this).attr("src", BASE_IMG_PATH + "printOV.gif"); 
    }).hover(function() { 
     $(this).attr("src", BASE_IMG_PATH + "printOV.gif"); 
    }, function() { 
     $(this).attr("src", BASE_IMG_PATH + "printUP.gif"); 
    }); 
});

あなたはこれが初心者の質問に完全に罰金会場で

出典

2011-02-04 21:51:25 camainc

答えて

関連する問題