Как получить Src изображения при наведении курсора в usercript - PullRequest
Новая
       15

Как получить Src изображения при наведении курсора в usercript

2 голосов
/ 07 декабря 2011

Я новичок на сайте, а также в JavaScript. Я начал писать этот маленький UserScript для начала. В основном это происходит, когда вы наводите указатель мыши на миниатюру изображения, если увеличиваете эту картинку до всплывающего окна.

Я использовал 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.

Я что-то здесь не так делаю? Ваша помощь будет очень ценится. :)

Ответы [ 5 ]

0 голосов
/ 07 декабря 2011

Если вы не можете изменить код, используйте: 

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

Получите доступ к div, затем к единственному (первому) изображению в нем.

0 голосов
/ 07 декабря 2011

Вы не показывали свой код при наведении, но это ключ. Я предполагаю, что <div id="profPhotos"> имеет несколько изображений, и вы хотите воздействовать на каждое из них?

Кроме того, это может быть проблемой в простом javascript, и вы захотите использовать mouseenter против mouseover, но это не поддерживается в Chrome .

Решением обеих этих проблем является использование 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 любого изображения, записанного на консоль.

Вы можете увидеть этот код в действии на jsFiddle .

Чтобы получить src первого изображения без бита при наведении курсора (или jQuery), используйте: 

var thumbURL = document.querySelector ('#profPhotos .profPhotoLink > img').src;
0 голосов
/ 07 декабря 2011
0 голосов
/ 07 декабря 2011

Дайте тегу img идентификатор 

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

и затем вызовите getAttribute для этого идентификатора. 

var thumbURL = document.getElementById("imgPhoto").getAttribute("src");
0 голосов
/ 07 декабря 2011

profPhotos не имеет атрибута с именем src, вам нужно найти img, после чего вы сможете получить источник.Если вы дадите изображению идентификатор, то сможете найти его и получить URL-адрес src.

...