사용자 스크립트에서 마우스 오버시 이미지의 src를 얻는 방법

나는 사이트와 JavaScript를 처음 사용합니다. 이 작은 UserScript를 시작으로 작성하기 시작했습니다. 기본적으로 마우스 포인터를 썸네일 이미지 위에 올리면 팝업 창으로 확대됩니다.사용자 스크립트에서 마우스 오버시 이미지의 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");

는하지만 파이어 버그 콘솔 코드의 조각을 실행하면 그냥 확인하기 위해서는 null를 검색합니다.

여기 뭔가 잘못 되었나요? 당신의 친절한 도움은 대단히 감사하겠습니다. :)

출처

2011-12-07 Isuru

img – JercSi

에 id = "profilPhotos"입력 또한 "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 수 있습니다.

는, 마우스를 두었을 비트없이 첫 번째 이미지의 SRC를 얻을 수 (또는 jQuery를) 사용하여 다음

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

출처

2011-12-07 19:35:10

이 시점에서 jQuery에 대한 지식은 0이지만 리소스를 찾아 보았고 코드를 파악할 수 있다고 생각합니다. 네, 맞습니다. 여러 장의 사진이 있으며 모든 사진에 영향을주고 싶습니다. 따라서 jQuery 솔루션을 사용하겠습니다. 매우 감사합니다. btw 한 가지 질문에, 당신은 mouseenter가 Chrome에서 작동하지 않을 것이라고 말했습니다. 그래서 jQuery를 사용하여, 그 문제를 극복 할 수 있습니까 ?? – Isuru

예, jQuery는 Chrome 및 모든 주요 브라우저에서 'mouseenter'를 표준화하고 필요한 경우 생성합니다. jQuery는 표준화, 단순화 및 추가 작업을 많이합니다. –

BTW, Chrome이 * userscript *로 태그 되었기 때문에 Chrome에 대해서만 언급했지만 * Greasemonkey *가 아닙니다. 당신이 GM (파이어 폭스)을 사용하고 있다고 말했기 때문에이 라인을 메타 데이터 블록에 넣는 것만으로 스크립트에 jQuery를 추가 할 수있다 : // //require http://ajax.googleapis.com/ajax/libs/ jquery/1.6.2/jquery.min.js'. –

profPhotos에는 src라는 속성이 없으므로 img를 찾아 소스를 검색 할 수 있습니다. 이미지에 ID를 지정하면 해당 URL을 찾고 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 태그

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

다음 그 이드의 getAttribute 부르는 ID입니다.

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

출처

2011-12-07 18:33:02

당신이 코드를 사용, 수정 할 수없는 경우 :

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

액세스 div, 그 다음 유일한 (첫 번째) 이미지.

출처

2011-12-07 19:47:05 thexebolud

사용자 스크립트에서 마우스 오버시 이미지의 src를 얻는 방법

답변

관련 문제