Javascript 使用$（this）添加不同<；p>'；在一组图像的上面是什么？_Javascript

Javascript 使用$（this）添加不同<；p>'；在一组图像的上面是什么？

javascript

Javascript 使用$（this）添加不同<；p>'；在一组图像的上面是什么？,javascript,Javascript,好吧，标题可能让人困惑，但这是我要找的，比如说我有4张图片 <img src="images/first.jpg" title="something" class="group"> <img src="images/fourth.jpg" title="something2" class="group"> <img src="images/sixth.jpg" title="something3" class="group"> <img src="ima

好吧，标题可能让人困惑，但这是我要找的，比如说我有4张图片

<img src="images/first.jpg" title="something" class="group">
<img src="images/fourth.jpg" title="something2" class="group">
<img src="images/sixth.jpg" title="something3" class="group">
<img src="images/tenth.jpg" title="something4" class="group">

现在，当我将鼠标悬停在每个图像上时，我希望在悬停图像的顶部显示一个包含单词的框，但是，根据图像的内容（first.jpg，fourth.jpg，sixth.jpg，tenth.jpg），我希望单词表达不同的意思，只是框应该是相同的。你知道我该怎么做吗？

试着显示和定位一个隐藏的DIV

<img src="images/first.jpg" class="myImage" title="something" class="group">
<img src="images/second.jpg" class="myImage" title="something" class="group">
<!-- more images.. -->
<div id='imageInfo' style='display:hidden; position:absolute;'>
  Populate some details here..
  <div id='imageInfo_title'></div>
<div>

$('.myImage').hover(
    function(){ showImageInfo( $(this));},
    ('#imageInfo').hide();
);
function showImageInfo (fromImg) {
    var infoDiv = ('#imageInfo');
    infoDiv.show();
    infoDiv.position( {
        my: "left top",
        at: "left top",
        offset: "0 0",    
        of: fromImg,
        collision: "flip"
    });

    // now get some details from the <IMG>, and populate the Info Div with them.
    //    -- something like this..
    var title = fromImg.attr( 'title');
    ('#imageInfo_title').text( title);
}


在此处填充一些详细信息。。
$（'.myImage'）。悬停(
函数（）{showImageInfo（$（this））；}，
（“#imageInfo”）.hide（）；
);
函数showImageInfo（来自IMG）{
var infoDiv=（“#imageInfo”）；
infoDiv.show（）；
资讯部职位（{
我的：“左上”，
在“左上角”，
偏移量：“0”，
作者：fromImg，
碰撞：“翻转”
});
//现在从获取一些详细信息，并用它们填充Info Div。
//--像这样的。。
var title=fromImg.attr（'title'）；
（“#图像信息"标题”）。文本（标题）；
}

包含jQuery的最简单方法是从像Google CDN这样的CDN中使用它

前


海关抢劫犯
jQuery（函数（$）{
$（文档）。工具提示({
轨迹：正确
});
});

演示：

您正在使用jQuery吗？你能使用吗？我想你要找的是一个工具提示，如果你能使用jQuery UI，那么看看是的，我可以使用jQuery，只要我知道要“导入”什么，我已经“导入”了，你需要下载jQuery以及js和css文件。嗯，好吧，我以前从未使用过jQuery，我有一个名为jQuery-ui-these1.10.3的zip文件，从中下载，我该怎么做？嗯，我有点迷路了，我对Javascript不太有经验。在你写的“在这里填充一些细节…”的地方，假设在第一张图片上，我希望它说“这是第一张”，在第二张图片上，我希望它说“你好，这是第二张”，在第三张图片上，我希望它说“欢迎”。。另外，嗯，你所说的“/”是什么意思？现在从中获取一些详细信息，并用它们填充Info Div。“？在获得的信息上取得一些进展，然后自己搜索进一步的答案/或问一个单独的问题。自己做一些工作很重要，需要学习。嗯，我如何编辑文本显示的位置，我希望文本显示在底部的图像中，而不是在鼠标移动时四处移动。@user216485您可以更改标题值来更改文本，也可以查看设置文本位置的选项

<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>

    <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
      jQuery(function($){
        $( document ).tooltip({
          track: true
        });
      });
    </script>
  </head>

  <body>
    <img src="http://www.google.co.in/images/srpr/logo4w.png" title="one" />
    <img src="http://www.google.co.in/images/srpr/logo4w.png" title="two" />
    <img src="http://www.google.co.in/images/srpr/logo4w.png" title="Three" />
    <img src="http://www.google.co.in/images/srpr/logo4w.png" title="Fout" />
  </body>

</html>