-1

I was wondering how one could load a text with a jquery .load() and then modify the text and display it on front of an image as an information text.

Any directions one can implement? I am really new to jquery.

Thanks

EDIT:

Sorry here is what I've tried:

    $().load("image1.jpg.txt");

But I am stuck on the idea on how to store it into a class element or variable such that I can display it. I am familiar with using html and importing an image and using css to modify and move it around, but I am confused in terms of doing the other way around such that we are loading from jquery and than putting it on the image.

4

2 回答 2

1

查看文档中的示例

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

您只需将其放在图像上的某个容器中

<div class='image-box'>
  <img src='...'/>
  <span id='img-description'></span>
</div>

在 JS 中

 $( "#result" ).load( "ajax/test.html", function(data) {
      $('#img-description').html(data);
      //or you can change data before puting to span
    });

我希望你能写 ccs 来在 img 上覆盖 span？

于 2013-10-18T01:32:43.490 回答
1

假设我理解正确，您可以使用 CSS 定位元素将包含原始文本的 a 定位在另一个包含您的图像的 div 下方，通过 CSS 定位元素： 定位：W3Schools

所以...假设你有两个这样的 div，使用 CSS 定位：

<div id="myText"></div>
<div id="myImage"></div>

然后你可以在 jQuery 中做这样的事情：

$(document).ready(function() {
    var $myText = $("#myText");
    $myText.text("Hello!");
    $myText.css("z-index", "2");
    $("#myImage").css("z-index", "1");
}

在这种情况下，它会在页面加载时设置它。

或者，您可以使用 bootstrap 工具提示，它将在悬停时显示信息： Bootstrap Tooltips

于 2013-10-18T01:34:20.010 回答