userscriptでmouseoverで画像のsrcを取得する方法

私はこのサイトで初めて、JavaScriptを使用しています。私は、この小さなUserScriptを最初に書き始めました。基本的には、マウスポインタをサムネイル画像の上に置くと、ポップアップウィンドウに拡大表示されます。userscriptでmouseoverで画像のsrcを取得する方法

私はFirebugを使用し、画像のURLを含む正しいコードブロックを特定しました。

<div id="profPhotos"> 
    <a class="profPhotoLink" href="photo.php?pid=6054657&uid=1291148517"> 
    <img width="163" height="130" src="http://th0.max.ipstatic.net/thumbs/163x130/0e/e9/604x402_1291148517_6054657.jpg"> 
    </a> 
<br> 
</div>

そして、変数にURLを取得するためのコードを書きました。

var thumbURL = document.getElementById("profPhotos").getAttribute("src");

しかし、私はちょうどそれをチェックするためにFirebugのコンソールでコードのその部分を実行すると、それはnullを取得します。

ここで何か問題がありますか？あなたの親切な助けは非常に高く評価されるでしょう。 :)

出典

2011-12-07 Isuru

img – JercSi

に「id」=「profPhotos」を入れてください。「src」のようなものでは、「getAttribute（）」は必要ありません。DOM要素のプロパティです。実際、Internet Explorerで「getAttribute（）」を使用すると、そのようなことはまったく機能しません（私は思う）。 – Pointy

'profPhotos'は' img'ではなく 'div'です。 –

あなたのホバーコードは表示されませんでしたが、これがキーです。私は<div id="profPhotos">に複数のイメージがあり、それぞれのイメージのホバーを操作したいと思いますか？

また、これはプレーン・ジャバスクリプトの痛みであり、you'll want to use mouseenter versus mouseover, but it's not supported natively in Chromeです。

これらの問題の両方に対する解決策は、use jQueryです。 jQueryのを使用して

は、このようなコードの何かがあなたのイメージsrc取得します。そのコードで

$('#profPhotos .profPhotoLink > img').bind (
    "mouseenter mouseleave", myImageHover 
); 

function myImageHover (zEvent) { 

    if (zEvent.type == 'mouseenter') { 
     console.log ('Entering src: ', this.src); 
    } 
    else { 
     console.log ('Leaving src: ', this.src); 
    } 
}

を、コンソールにログインしていずれかの画像のsrcが表示されます。

see this code in action at jsFiddleです。

マウスオーバービット（またはjQueryの）せずに、第1の画像のSRCを取得するには、使用：

var thumbURL = document.getElementById("profPhotos").getElementsByTagName('img')[0].src;

アクセス：

var thumbURL = document.querySelector ('#profPhotos .profPhotoLink > img').src;

出典

2011-12-07 19:35:10

私はこの時点でjQueryの知識は0ですが、私はいくつかのリソースを調べました。私はあなたのコードを理解できると思います。そして、はい、あなたは正しいです。複数の写真があり、すべての写真に影響を与えたい。したがって、私はあなたのjQueryソリューションと一緒に行くと思います。どうもありがとう。 btw少し質問、あなたは、マウスセンターはクロームで動作しないと述べた。だからjQueryを使うことで、その問題を克服できますか？ – Isuru

はい、jQueryはChromeとすべての主要ブラウザに標準化し、必要に応じて 'mouseenter'を作成します。 jQueryは標準化、シンプル化、追加を行います。 –

ところで、これは* userscript *でタグ付けされていて、Greasemonkey *ではないので、私はChromeについてのみ言及しました。あなたはGM（Firefox）を使用していると述べたので、この行をメタデータブロックに入れるだけでスクリプトにjQueryを追加できます： '// @require http://ajax.googleapis.com/ajax/libs/ jquery/1.6.2/jquery.min.js'。 –

profPhotosにはsrcという属性がありません。imgを見つけてソースを取得する必要があります。イメージにIDを指定すると、それを見つけてsrcのURLを取得できます。

出典

2011-12-07 18:28:52 Robo

ああ...私はそれを手に入れます。 :)しかし、事は、このコードブロックは私によって書かれていないということです。そのウェブサイトから。だから私はimgタグにIDを追加することはできません。 src属性にURLを取得する他の方法はありますか？ – Isuru

あなたは試すことができます： document.getElementById（ 'profPhotos'）。getElementsByTagName（ 'img'）。getAttribute（ 'src'）; – Robo

ありがとうございます – Isuru

<img id="profPhotos" width="163" height="130" src="http://th0.max.ipstatic.net/thumbs/163x130/0e/e9/604x402_1291148517_6054657.jpg">

出典

2011-12-07 18:32:03 Koerr

のimgタグにID

<img width="163" height="130" src="http://th0.max.ipstatic.net/thumbs/163x130/0e/e9/604x402_1291148517_6054657.jpg" id="imgPhoto"/>

を付けた後、そのIDのためのgetAttributeを呼び出します。

var thumbURL = document.getElementById("imgPhoto").getAttribute("src");

出典

2011-12-07 18:33:02

あなたは、コード、使用を変更することができない場合div、その中の唯一の（最初の）画像。

出典

2011-12-07 19:47:05 thexebolud

userscriptでmouseoverで画像のsrcを取得する方法

答えて

関連する問題