자바 스크립트 : URL에서 이미지로드 및 디스플레이

나는 자바 스크립트에 대해 매우 새로운 것을 전제로 이것을 서술하고자합니다. 양해 해 주셔서 감사합니다.자바 스크립트 : URL에서 이미지로드 및 디스플레이

사용자가 텍스트 영역에 이름을 입력 할 수있게 해주는 스크립트를 만들려고합니다. 제출을 누르면 해당 이름을 기반으로 이미지가 표시됩니다.

나는이 함께 와서 관리 :

거의 내가 필요로하는 것이 무엇인지 사용자 입력 주변 이미지를 -loads 정확히 않습니다

<html> 
<body> 
<form> 
<input type="text" value="" id="imagename"> 
<input type="button" onclick="window.location.href='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO"> 
</form> 
</body> 
</html>

. 하지만 내가 원하는 것은 이미지가 새 창에서 열리거나 내 컴퓨터에 다운로드되지 않기 때문입니다. the example here과 같은 이미지로 클릭하면 페이지에 표시하고 싶습니다.

Javascript에 대한 나의 미숙함이이 사실을 알 수없는 주된 원인이라고 확신합니다. 위의 스크립트는 내가 망쳐 놓지 않고 얻을 수있는 한 멀리입니다. 어떤 도움을 주셔서 감사합니다.

버튼 클릭

출처

2013-07-13 user2579872

당신은 일반 자바 스크립트 라이브러리를 사용하고 (미안 .. 내가 예로서 더 나은 이미지를 검색 할 시간이 없다)? –

window.location.href가 새 창에서 열리라고 말합니다. 내가 본 예제처럼 jQuery를 사용하는 것이 좋습니다. – dcodesmith

(다른 곳 또는) 상기 입력의 값을 취득하고, 체에 첨부 된 이미지 요소를 생성하는 데 사용

<html> 
<body> 
<form> 
    <input type="text" id="imagename" value="" /> 
    <input type="button" id="btn" value="GO" /> 
</form> 
    <script type="text/javascript"> 
     document.getElementById('btn').onclick = function() { 
      var val = document.getElementById('imagename').value, 
       src = 'http://webpage.com/images/' + val +'.png', 
       img = document.createElement('img'); 

      img.src = src; 
      document.body.appendChild(img); 
     } 
    </script> 
</body> 
</html>

FIDDLE

동일한에게 jQuery를에 :

$('#btn').on('click', function() { 
    var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'}); 
    img.appendTo('body'); 
});

출처

2013-07-13 20:43:36 adeneo

이것은 정확하게 내가 한 것입니다. 고맙습니다. 이제 어떻게했는지 알아 내야합니다. 나는 네가 말한 것을 이해하고, 내가 설정하기 전에 내 마음을 몇 번 더 감싸야만한다. – user2579872

방금 버튼에 id를 지정하고 onclick 핸들러를 첨부하고 해당 핸들러에서 버튼을 클릭하면 텍스트 입력 값을 가져 와서 변수에서 볼 수있는대로 URL을 생성 한 다음 image 요소는 이미지의 src 속성을 URL로 설정하고 해당 이미지를 본문에 추가합니다. 그러나 이미지를 제거하지는 않으나 알아 내기 쉽거나 다른 질문을해야합니다. 환영합니다. – adeneo

는 다음과 같이 후 있습니까

출처

2013-07-13 20:45:20

ID imgDiv와 사업부를 추가 할 스크립트 내가 jQuery를 당신을 압도하지 TP로 원본에 가깝게 유지하려고

document.getElementById('imgDiv').innerHTML='<img src=\'http://webpage.com/images/'+document.getElementById('imagename').value +'.png\'>'

및

출처

2013-07-13 20:46:02 mplungjan

당신이 바로 아이디어의 생성에있다 url은 입력 값을 기반으로합니다. 유일한 문제는 window.location.href를 사용하고 있다는 것입니다. window.location.href를 설정하면 현재 윈도우의 url이 변경됩니다. 당신이하고 싶은 것은 이미지의 src 속성을 변경하는 것입니다.

<html> 
<body> 
<form> 
    <input type="text" value="" id="imagename"> 
    <input type="button" onclick="var image = document.getElementById('the-image'); image.src='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO"> 
</form> 
<img id="the-image"> 
</body> 
</html>

출처

2013-07-13 20:46:17

src 특성이없는 이미지가 유효한 HTML이 아닙니다. http://w3c.github.io/html/single-page.html#the-img-element 그러나 적어도 Firefox에서는 원하는대로 작동합니다. –

당신은 단지의 "SRC"속성을 변경하려면 이미지 태그가 누락되었습니다 :

<html> 
<body> 
<form> 
<input type="text" value="" id="imagename"> 
<input type="button" onclick="document.getElementById('img1').src =   'http://webpage.com/images/' + document.getElementById('imagename').value +'.png'"  value="GO"> 
<br/> 
<img id="img1" src="defaultimage.png" /> 
</form> 
</body> 
</html>

출처

2013-07-13 20:51:41 Mike

-1

첫째, 난 강력하게 당신의 자바 스크립트를 할 수있는 라이브러리 또는 프레임 워크를 사용하는 것이 좋습니다. 그러나 아주 단순한 무언가를 위해서나, 배우는 재미를 위해서라면 괜찮습니다. (jquery, 밑줄, knockoutjs, 각을 사용할 수 있습니다)

두 번째로, onclick에 직접 바인딩하는 것은 권장되지 않습니다. 내 첫 번째 제안 역시 그렇게됩니다.

설명 : 필요한 것은 페이지의 img의 src를 수정하는 것입니다. 당신이 당신의 이미지를 표시 할 장소에서

, 당신은이 같은 img 태그를 삽입해야합니다

다음, 당신은 src 속성을 업데이트 할 수있는 온 클릭을 수정해야합니다.내가 생각할 수있는 가장 쉬운 방법은 그의 것 같습니다.

onclick=""document.getElementById('image-placeholder').src = 'http://webpage.com/images/' + document.getElementById('imagename').value + '.png"

그런 다음 다시 시도하는 것이 가장 좋은 방법은 아니지만 시작에 불과합니다. jQuery를 사용하고 onclick (팁 ... 이벤트에 대한 jquery 섹션 확인)을 사용하여 동일한 whitout을 수행 할 수있는 방법을 확인하는 것이 좋습니다.

몇 가지 Google 로고를 사용하여 간단한 예를 들었습니다. .. 상자에 4 o 3을 입력하면 크기가 다른 두 개의 이미지가 나타납니다.

http://jsfiddle.net/HsnSa/

출처

2013-07-13 21:02:47 Fernando

자바 스크립트 : URL에서 이미지로드 및 디스플레이

답변

관련 문제