자바 스크립트 버튼 클릭으로 여러 이미지 변경

좋아,이 일은 내가하고 싶은 일이다. 이전에는 너무 모호하여 더 나은 설명이 떠 올랐다. 이제 2 주 정도의 페이지 만 프로그래밍했음을 명심하라. 도움을 주시면 감사하겠습니다.자바 스크립트 버튼 클릭으로 여러 이미지 변경

각 이미지의 캡션 (설명)과 함께 세 개의 이미지를 표시하는 HTML/JavaScript 웹 페이지를 만들어야합니다. 각 이미지에 대해 동일한 제목의 다른 이미지로 첫 번째 이미지를 변경하는 단추를 만들고 필요에 따라 캡션을 변경해야합니다. 또한 세 이미지를 모두 원래 이미지로 복원하는 버튼이 있어야합니다.

하나의 이미지가 버튼 클릭시 다른 이미지로 변경 될 수 있도록 코드가 생성되었지만 두 번째 및 세 번째 코딩을 추가 할 때 더 이상 작동하지 않습니다. 문서 유형 선언을 누락, head 여러 body 태그 title 태그, 실제 내용 HTML 누락 :

<html> 
<head> 
<script> 

function changeImage() 
{ 
var img = document.getElementById("image"); 
img.src="http://cdn.memegenerator.net/images/300x/159304.jpg"; 
return false; 
} 

</script> 

</head> 
<body> 
<img id="image" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" /> 
<br><br><br> 
<button id="clickme" onclick="changeImage();">Click to change image!</button> 

<script> 

function changeImage() 
{ 
var img = document.getElementById("image1"); 
img.src="http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg"; 
return false; 
} 

</script> 

<body> 
<img id="image1" src="http://static.guim.co.uk/sys- images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" /> 
<button id="Click1" onclick="changeImage();">Click to change!</button> 
</body> 

<br> 

<script> 

function changeImage() 
{ 
var img = document.getElementById("image2"); 
img.src="http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg"; 
return false; 
} 

</script> 

<body> 
<img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master- chief-1.jpg" /> 
<button id="Click2" onclick="changeImage();">Click to change!</button> 
</body> 

<br> 

</html>

출처

2012-11-04 Circus

안녕하세요 Chad 및 Stackoverflow에 오신 것을 환영합니다. 이 포스트에서 당신은 이전 질문에서 당신이 너무 애매하다는 것을 언급했습니다. 이 방법이 조금 나아졌지만 코드를 게시하거나 jsfiddle.net으로 가서 문제가있는 문제의 예제를 제공 할 것을 제안합니다. 이것은 우리가 더 잘 당신을 도울 수 있도록 당신의 대답을 강화하고 질문에 대한 답변을 얻을 수 있습니다! 희망이 당신에게 조금 도움이되고, 다시 환영합니다! – JasCav

이 I는 제 1 화상 스위치에 사용되는 부호화 된 다음 I는 IMG ID를 변경하면서이를 복제 시도하고 코드 정지 작업의 나머지 제조 : – Circus

<버튼 ID = "clickme"의 onclick = "changeImage();"> 이미지를 변경 클릭! – Circus

이 페이지에 몇 가지 문제가 있습니다. 이 외에도 changeImage()은 모든 script에서 새 것으로 바뀝니다. 마지막으로 에 대해 src을 변경하는 마지막 기능 만 있습니다. 당신이 할 수

<body> 
    <button onclick="changeImage(-1);" >Click to restore all!</button> 
    <div> 
     <h1 id="caption0">Caption for image 1.1</h1> 
     <button onclick="changeImage(0);">Click to change!</button> 
     <img id="image0" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" /> 
    <div> 
     <h1 id="caption1">Caption for image 2.1</h1> 
     <button onclick="changeImage(1);">Click to change!</button> 
     <img id="image1" src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" /> 
    </div> 
    <div> 
     <h1 id="caption2">Caption for image 3.1</h1> 
     <button onclick="changeImage(2);">Click to change!</button> 
     <img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg" /> 
    </div> 
</body>

다음 head에

script :

function changeImage (element) { 
    var n, 
     imageData = [ 
      [ 
       { 
        src: "http://thechive.files.wordpress.com/2011/10/william-defoe.jpg", 
        caption: "Caption for image 1.1" 
       }, 
       { 
        src: "http://cdn.memegenerator.net/images/300x/159304.jpg", 
        caption: "Caption for image 1.2" 
       } 
      ], 
      [ 
       { 
        src: "http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg", 
        caption: "Caption for image 2.1" 
       }, 
       { 
        src: "http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg", 
        caption: "Caption for image 2.2" 
       } 
      ], 
      [ 
       { 
        src: "http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg", 
        caption: "Caption for image 3.1" 
       }, 
       { 
        src: "http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg", 
        caption: "Caption for image 3.2" 
       } 
      ] 
     ]; 
    if (element > -1) { 
     document.getElementById('image' + element).src = imageData[element][1].src; 
     document.getElementById('caption' + element).innerHTML = imageData[element][1].caption; 
    } else { 
     for (n = 0; n < imageData.length; n++) { 
      document.getElementById('image' + n).src = imageData[n][0].src; 
      document.getElementById('caption' + n).innerHTML = imageData[n][0].caption; 
     } 
    } 
    return; 
}

그리고 body 내가 제대로 질문을 이해 한 경우

, 당신은이 같은 뭔가가 필요 경로 및 캡션에 대한 데이터는 중첩 배열의 객체에 있습니다. 이렇게하면 실제 콘텐츠와 분리되며 코드를 유지 관리하기가 더 쉽습니다.

이미지 캡션에 대한 레이아웃 예를 제공하지 않았으므로 캡션 정보를 이미지 위의 H1 태그에 넣었습니다. 요소와 위치를 자유롭게 변경하십시오. 캡션 텍스트 내에 HTML 태그를 사용할 수도 있습니다.

그러나이 코드를 실행할 때 몇 가지 제한 사항과 CPU 시간 낭비가 있습니다. imageData은 클릭 할 때마다 만들어지며 요소 당 두 개의 다른 경로 만 사용할 수 있습니다.

나는 더 많은 객체 지향 접근 방식을 제안한다. 상당히 유사한 기능을 보여주는이 JSfiddle을 살펴보고 더 유연하고 유지하기가 더 쉽습니다.

출처

2012-11-04 15:14:11 Teemu

코딩에 대한 둘러보기와 도움을 주셔서 감사합니다. – Circus

매력처럼 작동했기 때문에 3 개의 스크립트를 모두 하나의 코드로 작성할 수 있다는 것을 알지 못했고 레이아웃으로 인해 각 스크립트를 구분해야한다고 생각했습니다. – Circus

고마워, 내 JSfiddle이 너무 무거울 것 같아.). https://developer.mozilla.org/en-US/에서 방문 했습니까? 거기에서 JS, CSS, HTML 등의 기본 정보와 고급 정보를 찾을 수 있습니다. – Teemu

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script> 
     var dd = 5; 
     var cnt = 0; 
     function chng() { 

      var rotator = document.getElementById('rr'); // change to match image ID 
      var imageDir = 'Images/';       // change to match images folder 


      var images = ['2.jpg', '3.jpg', '4.jpg', '5.jpg']; 

      cnt++; 

      var len = images.length; 
      if (cnt < dd) { 
       rr.src = imageDir + images[cnt]; 
      } 
      else if (cnt == len) { 
       rr.src = imageDir + images[0]; 
       cnt = 0; 
      } 
     } 

</script> 

</head> 
<body> 
<img src="Images/1.jpg" id="rr" height="500" width="650"> 

    <input type="button" value=" next. . " onclick="chng()" /> 
</body> 
</html>

출처

2013-04-19 08:22:32

자바 스크립트 버튼 클릭으로 여러 이미지 변경

답변

관련 문제