Javascript 如何在用户脚本中获取鼠标上方图像的src

我对这个网站和JavaScript都是新手。我开始写这个小用户脚本作为开始。基本上，当你将鼠标指针悬停在缩略图上时，它会将图片放大为弹出窗口

我使用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>

但是当我在Firebug控制台中运行这段代码只是为了检查它时，它会检索

null

---

我做错什么了吗？非常感谢您的帮助。：）

profPhotos没有名为src的属性，您需要找到img，然后才能检索源。如果您给图像一个ID，那么您可以找到该ID并检索src url。

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

给img标签一个id

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

---

您没有显示悬停代码，但这是关键。我假设

有多个图像，您想对每个图像的悬停进行操作吗

此外，这在普通javascript中可能是一个难题，而且

解决这两个问题的办法是

使用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

你可以

---

要获取第一个图像的src而不使用mouseover位（或jQuery），请使用：

---

如果无法修改代码，请使用：

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

---

访问div，然后访问其中唯一的（第一个）图像。

将id=“profPhotos”放到imgAlso中，例如“src”，您不需要“getAttribute（）”—它直接是DOM元素的属性。事实上，在Internet Explorer中，使用“getAttribute（）”对这样的事情根本不起作用（我想）。

profPhotos

是你的

div

，而不是你的

img

。我想你应该从

@Pointy获取
href
：如果我没记错的话，我认为
getAttribute
基本上是IE安全的。但是
.src
几乎肯定是一条路要走。哦，对了。。。我明白了。：）但问题是，这个代码块不是我写的。它来自一个网站。因此，我无法将id添加到img标记。是否有其他方法获取src属性中的URL？您可以尝试：document.getElementById（'profPhotos'）。getElementsByTagName（'img'）。getAttribute（'src'）；到目前为止，我对jQuery一无所知，但我查阅了一些参考资料，我想我可以理解您的代码。是的，你是对的。有多张照片，我希望它能影响所有照片。因此，我想我将使用您的jQuery解决方案。非常感谢。顺便提一个小问题，你说mouseenter在Chrome中不起作用。因此，通过使用jQuery，我也可以克服这个问题吗？是的，jQuery在Chrome和所有主要浏览器中标准化并创建了
mouseenter
。jQuery标准化、简化并添加了很多内容。顺便说一句，我只提到了Chrome，因为它被标记为userscript，而不是Greasemonkey。由于您声明使用的是GM（即Firefox），因此只需将这一行放在元数据块中即可将jQuery添加到脚本中：
/@requirehttp://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
。我快做完了。但是有几个障碍。这是我到目前为止的代码1。当mouseenter事件触发时，它会生成一个弹出窗口，并在网页本身中加载相同的图像！因此，我认为它也无法执行mouseleave部分。2.如何根据加载图像的特定测量值动态设置弹出窗口的宽度和高度？3.在“/thumbs/75x60/”部分中，我想使用*通配符替换“75x60”（如“x”）以便任何大小的缩略图图片都会受到影响。我如何做到这一点？我已经尝试过使用web教程完成上述任务，但没有效果。你能帮帮我吗？希望我没那么烦人。
$('#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);
    }
}

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

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