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

スクリプトだけで何を意味するのかわからないので、目的の結果を達成するための 2 つの方法を提供しDOMます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 に答える