0

我是脚本新手，花了很多时间尝试编写一些代码。

我想读取某个图像的动态写入源，然后在页面下方写下另一个具有稍微不同来源的图像，例如 -

这张图片是动态写在页面顶部的

<img src="chrome.jpg" id="test1">

然后降低我想写 -

<img src="chrome2.jpg">

非常感谢艾米对此的帮助。

4

2 回答 2

0

我假设您使用“页面”指的是一个 html 页面...并且我进一步假设您想在客户端执行此操作...

为此，您将需要 javascript，将 javascript 库用于此类任务是有意义的，这样事情会变得更容易。例如，使用 jQuery 库，您可以使用“选择器”来识别和使用 dom 树元素并添加或更改您想要的所有内容。就像是：

source=$('img#test1').attr('src');
// do something with the source url contained now inside source
$('p#further_down').append('<img>).attr('src',source);

<html>
<head>  

  <!-- inclusion of the jQuery Javascript library -->
  <script 
    type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
  </script>

  <!-- this is 'your' function -->
  <script type="text/javascript">
    function doubleImg(){
      // you 'get' the source url of the upper image:
      var topSrc=$('#top img').attr('src');
      // no you can do something with that url
      // for this demo I replace the 'direction' inside the icons name: 
      var bottomSrc=topSrc.replace(/up/, 'down');
      // now you create a new <img> tag 
      // and 'set' the changed url as 'src' attribute:
      var img=$('<img width="100">').attr('src',bottomSrc);
      // and finally you 'add' that <img> tag into your dom tree ("the page"): 
      $('#bottom').append(img);
    }
  </script>

  <!-- this gets 'your' function executed ->
  <script type="text/javascript">
    $(window).load(doubleImg);
  </script>
</head>

<body>
  <!-- the "top" frame, note that it DOES hold an <img> inside -->
  <fieldset id="top" style="border=2px solid green;">
    <legend>TOP</legend>
    <img width="100" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Actions-arrow-up-icon.png">
  </fieldset>
  <br>
  <!-- the "bottom" frame, note that it DOES NOT hold an <img> inside -->
  <fieldset id="bottom" style="border=2px solid blue;">
    <legend>BOTTOM</legend>
  </fieldset>
</body>
</html>
于 2012-11-14T08:55:19.267 回答
0

我不确定你所说的仅脚本是什么意思，所以我提供了两种方法可以实现你想要的结果，通过DOM& through jQuery。

  • Using jQuery:

检索图像的`src：

var src = $(“#test1”).attr('src');

更改src图像的：

$("# test1").attr("src","chrome2.jpg");
  • Using DOM:

检索图像的`src：

document.getElementById("test1").src;

更改src图像的：

document.getElementById("test1").src="chrome2.jpg";

希望能帮助到你。

于 2012-11-14T08:55:34.823 回答