How to get the src of an image on mouseover in a userscript

Question

I'm new to the site and also to JavaScript. I started writing this little UserScript as a start. Basically what it does is, when you hover your mouse pointer over a thumbnail image, if enlarges that picture to a popup window.

I used Firebug and identified the right code block which contains the image 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>

And I wrote the below code to retrieve the URL to a variable.

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

But when I run that piece of code in the Firebug console just to check it, it retrieves null.

Am I doing something wrong here? Your kind help would be very much appreciated. :)

Also for things like "src" you don't need "getAttribute()" - it's a property of the DOM element directly. In fact, in Internet Explorer using "getAttribute()" won't work at all for such things (I think). — Pointy, Dec 07 '11 at 18:28
@Pointy: I think `getAttribute` is *mostly* IE safe if I remember correctly. But `.src` is almost definitely the way to go. — RightSaidFred, Dec 07 '11 at 19:02
Is this a userscript (Chrome)? Or a Greasemonkey script (Firefox)? — Brock Adams, Dec 07 '11 at 19:40

score 2 · Accepted Answer · edited May 23 '17 at 11:55

2

You didn't show your hover code, but that is the key. I assume that <div id="profPhotos"> has multiple images and you want to act on the hover of each one?

Also, this can be a pain in plain javascript, and you'll want to use mouseenter versus mouseover, but it's not supported natively in Chrome.

The solution to both these problems is to use jQuery.

Using jQuery, code something like this will get you the image 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);
    }
}

With that code, you will see the src of whichever image logged to the console.

You can see this code in action at jsFiddle.

To get the src of the first image without the mouseover bit (or jQuery), use:

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

edited May 23 '17 at 11:55

Community

1
1

answered Dec 07 '11 at 19:35

Brock Adams

90,639
22
233
295

I have 0 knowledge in jQuery as of this point but I looked up some resources and I think I can figure out your code. And yes, you are right. There are multiple photos and I want it to affect all of them. Therefore I think I'll go with your jQuery solution. Thanks very much. btw one little question, you said mouseenter won't work in Chrome. So by using jQuery, can I overcome that problem as well?? – Isuru Dec 08 '11 at 15:52
Yes, jQuery standardizes, and creates if necessary, `mouseenter` in Chrome and all major browsers. jQuery standardizes, simplifies and adds much. – Brock Adams Dec 08 '11 at 16:01
BTW, I only mentioned Chrome because this was tagged as *userscript* and not *Greasemonkey*. Since you stated that you are using GM (which is Firefox), you can add jQuery to the script merely by putting this line in the metadata block: `// @require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js`. – Brock Adams Dec 08 '11 at 16:05
I'm almost done. But there's a couple of snags. Here's my code so far [link](http://jsfiddle.net/JWcB7/6/) 1. when the mouseenter event fires, it spawns a popup and it **also** loads that same image in the webpage itself! Thus preventing it from executing the mouseleave part too, I think. 2. How do I set the width and the height of the popup dynamically according to the particular measurements of the loading image? 3. In the '/thumbs/75x60/' part, I want to use the * wildcard to replace '75x60' (as in '*x*') so that any size of thumbnail pic would be affected. How do I do that? – Isuru Dec 09 '11 at 18:07
I've tried accomplishing the above mentioned tasks using web tutorials but to no avail. Can you please help me out? hope I'm not being annoying. – Isuru Dec 09 '11 at 18:08
You're not being annoying, but you need to open a new question for the new bit. Generally, 1 problem at a time per question. It gets pretty cumbersome using comments for additional issues. – Brock Adams Dec 09 '11 at 19:29

score 0 · Answer 2 · answered Dec 07 '11 at 18:28

0

profPhotos has no attribute called src, you need to find the img then you can retrieve the source. If you give the image an ID you can then find that and retrieve the src url.

answered Dec 07 '11 at 18:28

Robo

45
8

Oh right... I get it. :) But the thing is, this code block is not written by me. Its from a website. So I can't add an id to the img tag. Is there any other way to get the URL in the src attribute?? – Isuru Dec 07 '11 at 19:07
You can try: document.getElementById('profPhotos').getElementsByTagName('img').getAttribute('src'); – Robo Dec 07 '11 at 19:22

score 0 · Answer 3 · answered Dec 07 '11 at 18:32

0

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

answered Dec 07 '11 at 18:32

Koerr

15,215
28
78
108

score 0 · Answer 4 · answered Dec 07 '11 at 18:33

Give img tag an id

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

and then call getAttribute for that Id.

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

score 0 · Answer 5 · answered Dec 07 '11 at 19:47

0

If you cannot modify the code, use:

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

Access the div, then the only (first) image in it.

answered Dec 07 '11 at 19:47

thexebolud

213
1
9

How to get the src of an image on mouseover in a userscript

5 Answers5