Question

所以我试图将图像保持在固定位置，但是更改每个部分的图像。最好不要使用JavaScript，或者尽可能少（或者，如果对像我这样的整体JavaScript-Noob有意义的话......）。

有人有任何想法吗？感觉像我一直看着自己对代码视而不见：

<div class="left">
     <img src="../img/orange.png" alt="orange" id="orange" />
     <img src="../img/banana.png" alt="banana" id="banana" />
     <img src="../img/apple.png" alt="apple" id="apple" />
</div>

<div class="right">
    <section id="section_orange">
       <h2>about</h2>
       <p>Something about oranges.</p>
     </section>

    <section id="section_banana">
        <h2>about bananas</h2>
        <p>Something about bananas.</p>
    </section>

    <section id="section_apple">
        <h2>about apples</h2>
        <p>Something about apples.</p>
    </section>
</div>

Answer 1

如果您试图让图像与该部分对齐，您可以将其拆分为行，而不是将图像放在一个div中，将文本放在另一个div中。然后使用css将图像放在左侧，将文本放在右侧。

<section>
<article id="section_orange">
   <img src="../img/orange.png" alt="orange" id="orange" />  
   <h2>about</h2>
   <p>Something about oranges.</p>
 </article>

<article id="section_banana">
    <img src="../img/banana.png" alt="banana" id="banana" />
    <h2>about bananas</h2>
    <p>Something about bananas.</p>
</article>

<article id="section_apple">
    <img src="../img/apple.png" alt="apple" id="apple" />
    <h2>about apples</h2>
    <p>Something about apples.</p>
</article>

Answer 2

我真的得不到你想要的东西。

像这样？

http://www.ringana.com/de/ueber-uns/so-fresh/

可以通过将img更改为background-img轻松实现，并为div赋予bg css值：background-attachment：fixed;

在此处查看背景附件：http://www.w3schools.com/cssref/pr_background-attachment.asp

Answer 3

我知道您是JavaScript的新手，但需要使用JS将图像更改为每个部分。为了帮助您理解，我对以下代码发表了评论。

＆＃13;

function placeimgs() {

  var fruit = ["orange", "banana", "apple"]; 
  // Creates an array that contains your fruit names to be used later.

  for (i = 0; i < fruit.length; i++) {
  // We use a "for" loop to run the folling code multiple times.  It means this:
  // "i" is set to 0, run the code while "i" is less than the number of items in "fruit".
  // Each time we run the code, add the number 1 to "i".
  // Note: In JS, the first item in an array is "0" the second is "1" and so on . . .

    document.getElementById('section_' + fruit[i]).innerHTML = document.getElementById('section_' + fruit[i]).innerHTML + '<img src="../img/' + fruit[i] + '.png" alt="' + fruit[i] + ' " id="' + fruit[i] + '"/>';
    
    // Each time we run this code, put the number "i" into the places that I did.
    // That will change which pictures are being displayed.

  }

  document.getElementById('button1').style.display = "none";
  
  // Hide the button after it is clicked.  Notice that this code is outside of the "for" loop.
  // That way we "hide" the button only once.

}

＆＃13;

<div class="right">
  <section id="section_orange">
    <h2>about</h2>
    <p>Something about oranges.</p>
  </section>

  <section id="section_banana">
    <h2>about bananas</h2>
    <p>Something about bananas.</p>
  </section>

  <section id="section_apple">
    <h2>about apples</h2>
    <p>Something about apples.</p>
  </section>
</div>

<button onclick="placeimgs()" id="button1">Place Images</button><br>
When you click this button, it will call function "placeimgs".

＆＃13;

希望这有帮助！

尝试通过该部分更改固定图像

3 个答案: