단일 onclick에서 이미지 이름과 src를 모두 얻는 방법은 무엇입니까?

Question

이미지 한 번 클릭으로 이미지 이름과 src를 모두 얻을 수 있습니까?

저는 (는) 자바 스크립트와 새로운 스크립트입니다.

<script language="javascript" type="text/javascript"> 
function SetImageName(strName) 
{ 
document.getElementById("ImageName").value = strName; 
} 
</script> 

<div id="Images"> 

<img src="images/image1.jpg" name="image1.jpg" onclick="SetImageName(this.name)"/></a> 
<img src="images/image2.jpg" name="image2.jpg" onclick="SetImageName(this.name)"/> 

</div><input type="hidden" value="" id="ImageName" name="ImageName"/> 

Answer 1

가능합니까? 당연하지. 당신의 JS에서 다음

onclick="SetImageName(this)" 

: 그리고 당신의 HTML 마크 업에서

방금보다는 SetImageName()가 this와 클릭 된 요소 자체에 대한 참조를 전달 호출 할 때,

function SetImageName(imgElement) { 
    var theName = imgElement.name; 
    var theSrc = imgElement.src; 
    // etc. 

그 이름은 this.name입니다. 그런 다음 함수 내에서 필요한 모든 속성에 액세스 할 수 있습니다. 사용자가 이미지를 클릭 할 때

Answer 2

기능 SetImageName가 호출됩니다

onclick="SetImageName(this)" 

의미

<img src="images/image1.jpg" name="image1.jpg" onclick="SetImageName(this)"/> 

SetImageName 기능 구현이 image.name에 의해 이름과 이미지의 SRC를 얻을 것이다 image.src

Answer 3

이 기능을 사용하여 이미지의 'src'를 얻을 수 있습니다 :

document.getElementById("imagename").src 

그래서 코드는 다음과 같습니다

<script language="javascript" type="text/javascript"> 
    function SetImageProperties(control) 
    { 
     // Populate hidden fields with properties of the control 
     document.getElementById("ImageName").value = control.name; 
     document.getElementById("ImageSource").value = control.src; 
    } 
</script> 

<div id="Images"> 

<img src="images/image1.jpg" name="image1.jpg" onclick="SetImageProperties(this)"/> 
<img src="images/image2.jpg" name="image2.jpg" onclick="SetImageProperties(this)"/> 

</div><input type="hidden" value="" id="ImageName" name="ImageName"/> 
</div><input type="hidden" value="" id="ImageSource" name="ImageSource"/> 

대신

this.name 

당신이 전체 DOM 객체에 대한 참조를 전달하는의

this 

를 전달하여. 위의 수정 된 코드와 같이 각 속성을 별도로 사용할 수 있습니다.