이미지 URL을 사용하여 이미지에 대체 텍스트를 동적으로 추가 할 수 있습니까?

Question

이미지 원본을 기반으로 대체 텍스트를 변경해야하는이 문제가 있습니다. 예를 들어 프로젝트에 사용 된 모든 이미지가 포함 된 폴더가 있습니다. 내가 알고 싶은 무엇

<table id="OptionPics"> 
    <tr><td><img id="OptionPic1" alt="" src="images/selection1.png" /></td></tr> 
    <tr><td><img id="OptionPic2" alt="" src="images/selection2.png" /></td></tr> 
    <tr><td><img id="OptionPic3" alt="" src="images/selection3.png" /></td></tr> 
</table> 
<table id="SelectedPicTable"> 
    <tr> 
     <td> 
      <img id="SelectedPic" alt="" src="images/placeholder.png" /> 
     </td> 
    </tr> 
</table> 

는 클릭 된 이미지에 따라 SelectedPic의 고도를 변경할 수 있다면 무엇입니까? SelectedPic의 고도를 클릭 OptionPic1 예를 들어 는 ""selection1 " 대신 의 이미지/selection1.png해야합니다. 당신은 이미지의 클릭을 제어하는 ​​방법

Answer 1

? 그것은이다 ? 순수 자바 스크립트 또는 jQuery를 사용하는

오늘은 당신이 그것을 사용하고 있다고 가정합니다,보다, jQuery를 사용하는 것은 매우 흔한 일 :

<table id="OptionPics"> 
<tr><td><img id="OptionPic1" class="options" alt="" src="images/selection1.png" /></td></tr> 
<tr><td><img id="OptionPic2" class="options" alt="" src="images/selection2.png" /></td></tr> 
<tr><td><img id="OptionPic3" class="options" alt="" src="images/selection3.png" /></td></tr> 
</table> 

<table id="SelectedPic"> 
<tr><td><img id="SelectedPic" alt="" src="images/placeholder.png" /></td></tr> 
</table> 

보이는 모든 클래스에 옵션이라는 클래스를 삽입했습니다. 지금의 우리 jQuery를 쓸 수 : 당신이 jQuery를위한 분위기가 아닌 경우

$(document).ready(function(){ 
    $('img.options').on('click', function(){ //everytime a image is clicked 
     var i = $(this); //handle to the clicked image 
     $('img#SelectedPic').attr('src', i.attr('src')).attr('alt', i.attr('alt')); 
     //insert into image with the SelectedPic ID, the same src and alt attributes of the clicked image 
    }); 
}); 

Answer 2

, 여기에 순수 JS에 있습니다

http://jsfiddle.net/MaxPRafferty/6YUhg/

HTML :

<table id="OptionPics"> 
<tr><td><img class="OptionPic1 optPics" alt="" src="http://jsfiddle.net/img/logo.png?image=1" /></td></tr> 
<tr><td><img class="OptionPic2 optPics" alt="" src="http://jsfiddle.net/img/logo.png?image=2" /></td></tr> 
<tr><td><img class="OptionPic3 optPics" alt="" src="http://jsfiddle.net/img/logo.png?image=3" /></td></tr> 
</table> 

<table id="SelectedPicTable"> 
<tr><td><img id="SelectedPic" alt="" src="http://jsfiddle.net/img/logo.png" /></td></tr> 
</table> 

JS :

var imgs = document.getElementsByClassName("optPics"); 
for(var i = 0; i < imgs.length; i++) 
{ 
    (function(image){ 
     image.onclick=function(){ 
      var imageParts = image.src.split('/'); 
      var imageName = imageParts[imageParts.length-1]; 
      document.getElementById("SelectedPic").alt=imageName; 
      document.getElementById("SelectedPic").title=imageName; 
     } 
    }(imgs[i])) 
} 

위의 코드에 대한 몇 가지 간단한 참고 사항 : title 속성을 변경한다는 점에 유의하십시오. alt를 변경하면 FireFox의 일부 버전에서는 아무 효과가 없으며 다른 사용자도 alt 속성의 변경 사항을 무시할 수 있습니다. 'title'속성을 변경하면 마우스 오버 텍스트가 변경됩니다. 나는 둘 다 참조 용으로 포함시켰다.

또한 요청한대로 이미지 경로를 제거했지만 파일 이름 뒤에 어떤 이유로 이미지에 '/'문자가 있으면이 코드를 수정해야합니다. 위 예제에서는 이미지를 쿼리 문자열과 구별하기 때문에 확장명을 지우지는 않지만 파일 이름 만 사용하려면 해당 줄을 var imageName = imageParts[imageParts.length-1].split('.')[0];