HTML 버튼 이미지 출력 - HTML beoteun imiji chullyeog

Question

안녕하세요 오늘은 웹페이지를 꾸밀때 사용되는

목차 Show

1. 버튼 태그
2. 이미지 태그

버튼태그와 이미지 태그 예제에 대하여 알아 보겠습니다.

버튼 또는 텍스트를 클릭하면 원하는 페이지로 이동 할 수 있게 구현 할 수 있습니다.

관련 코드는 아래 스틱코드 링크를 참고해주세요

https://stickode.com/detail.html?no=2229

stickode.com

*결과

1. 버튼 태그

<button onclick="location.href='test.html'">사진보기</button>

위와 같이 버튼 태그 코드를 한줄만 적으면 매우 간단하게 '웹 페이지 이동'을 구현 할 수 있습니다.

미리 만들어 놓은 text.html 페이지로 이동 하게 되는 것이죠.

여기서 href는 무슨 뜻일까요?

href는 hypertext reference의 약자입니다. 다른 웹 페이지로 이동 할 수 있게 도와주는 기능이라고 보면 될 것 같습니다.

참고로 a태그를 활용하여 '텍스트 클릭으로 페이지 이동하기'는 상단에 링크된 스틱코드 포스팅에 있습니다.

2. 이미지 태그

<img src="" alt="이미지" />

이미지를 화면에 보여주기 위해서는 위 코드에서 src에 있는 쌍따옴표에 원하는 이미지의 절대 경로를 넣어주면 됩니다.

alt 속성은 해당 이미지를 가져오는 것에 문제가 생겼을때 출력되는 내용입니다.

Alternate(대체하다)의 줄임 말이죠.

위와 같이 문제가 생긴 이미지를 찢어진 아이콘으로 표시해주고

alt 속성에서 지정해준 메세지를 출력해줍니다.

테스트 버튼 을 눌러보자

첫번째 테스트 버튼은 그냥 일반 버튼에 CSS만 조금 아주 조그음 바꾼거고.

밑에 소스는 버튼 태그 <button> ~ </button> 사이에 <img>를 추가한것이다.

<button type="button" id="" class="btn btnEvent">
<img src="http://c.huv.kr/c/0b/0b8c4a6d60aea665193612bb31af071039da9e16.png" alt="btnImages" class="btnImages">
</button>

※ 기타 팁

만약 자신이 <form> 태그를 통해 데이터를 전달시에.

<button> 태그에 type 을 명시하지않으면 자동으로 submit 이벤트가 일어나버린다.

만약 <form> 태그안에 이미지 버튼이나 <button> 태그를 이용할때에는 항상 type을 명시해주자

그냥 form태그 안쓸때도 명시해주자. 그게맘편하다...

자바 스크립트는 그냥 on 함수를 이용해서 click 이벤트를 바인딩 시켜버린것.

$(".btnEvent").on("click", function() {
  alert("jsfiddle 동작 테스트");
});

풀이하자면 btnEvent 라는 클래스가 명시된 태그에는

(조금 어려운 말일수도 있지만 로딩시)

alert 경고창을 출력하겠다.

라고 해석할수있겠다...

이미지 버튼(Image Type)

CODEDRAGON ㆍDevelopment/Web, WWW

이미지 버튼(Image Type)

· 버튼이 이미지로 출력되며 전송버튼(Submit Button)의 역할을 하는 버튼입니다.

· 전송버튼이 아닌 일반적인 버튼을 이미지로 표시하려면 <img>태그 및 자바스크립트를 이용하여 액션을 지정해야 합니다.

javascript/HTML 수업 버튼 클릭 시 이미지를 변경하는 실습을 해보았다. 전구켜기 버튼과 전구끄기 버튼을 이용해서 전구 켜기 버튼을 클릭하면 버튼 색이 꺼진 상태로 바뀌고 전구끄기 버튼에 불이 들어오면서 전구가 켜진 이미지로 변경되는 이벤트이다. 반대로 전구끄기 버튼을 클릭해도 마찬가지이다. 처음에는 토글을 이용해야 하나 싶었는데 훨씬 쉬운 방법으로 만들 수 있다.

DOM 객체와 document.getElementById() 메서드를 실제로 활용해보면서 이해할 수 있었다. 다만 프로그래밍 초보자 입장에서 문제를 해결하는데 좀 애먹었다. 간단하게 2가지 문제로 볼 수 있다.

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>버튼 클릭하면 전구 on/off</title></head>
	<style>
		#b1 {background:lightyellow; left :50px; top : 10px;}/*전구 켜기 버튼 css속성*/
		#b2 {background:lightgray; left :150px; top : 10px; }/*전구 끄기 버튼 css속성*/

	</style>

	<script>
	
	//console.log(changeOn());
		//console.log(tag1);
	
		function changeOn() {
	
			var tag1 = document.getElementById("img");
			var switchOn = document.getElementById("b1");
			switchOn.style.background="lightgray";
			tag1.src="./media/onlight.png";//이미지 변경
			var switchOff = document.getElementById("b2");//전구끄기 버튼 색변경
			switchOff.style.background="lightyellow";	
		}	
		//첫번째 문제 chnageon() 함수  function을 안써서 오류
		//두번째 문제 전구켜기 이미지가 안나옴 "media\onlight.png"->"./media/onlight.png"로 변경했더니 인식 됨.
	
		function changeOff() {
		
			var tag1 = document.getElementById("img");
			var switchOff = document.getElementById("b2");
			switchOff.style.background="lightgray";		
			tag1.src="./media/offlight.png";//다시 이미지 변경
			var switchOn = document.getElementById('b1');//전구켜기 색변경
			switchOn.style.background="lightyellow";
		}
/*
	<button id = "b1" onclick="changeOn()">전구켜기</button>
	<img id="img" src="media\offlight.png" style="width:100px">
	<button id = "b2" onclick="changeOff()">전구끄기</button>
*/
	</script>
<body>
	<h3>What Can JavaScript Do?</h3>

	<button id = "b1" onclick="changeOn()">전구켜기</button>
	<img id="img" src="media\offlight.png" style=width:100px;>
	<button id = "b2" onclick="changeOff()">전구끄기</button>
</body>
</html>

1. Uncaught SyntaxError: Unexpected token '{' 에러문제

->함수 정의 문제였는데 function 을 빼먹었던 게 이유였다..java와 달리 HTML은 코드를 잡아주지 않아서 이런 기초적인 실수가 많이 발생하는 것 같다.( 오타나 ; 를 빼먹거나 {} 괄호 "" 문자열 부호를 잊거나 등)

console.log()로 디버깅하는 방법이 있으니 코드 작성 시 활용하면 좋다.

2. 변경할 이미지 출력이 안됨

'전구켜기'버튼 클릭 시 전구에 불이 들어온 이미지로 변경되어야 하는데 경로에 맞게 이미지를 저장했음에도 불구하고(오타X) 이미지가 출력되지 않아 상당히 애먹었다. 이것도 함수 한에 변경할 이미지 경로 설정을 "media\onlight.png"->"./media/onlight.png"로 변경했더니 인식되었다.

결과는 성공

html 이미지버튼 HTML 첨부파일 버튼 HTML 제출 버튼 버튼 이미지 변경 버튼 이미지 만들기

HTML 버튼 이미지 출력 - HTML beoteun imiji chullyeog

*결과

1. 버튼 태그

2. 이미지 태그

1. Uncaught SyntaxError: Unexpected token '{' 에러문제

2. 변경할 이미지 출력이 안됨

관련 게시물

크롬 알림 API - keulom allim API

부트스트랩 템플릿 사용법 - buteuseuteulaeb tempeullis sayongbeob

Html 검색박스 - html geomsaegbagseu

조직도 만들기 프로그램 - jojigdo mandeulgi peulogeulaem

Html 네이버 검색창 - html neibeo geomsaegchang

광고하는

최근 소식

디젤 엔진오일 감소 - dijel enjin-oil gamso

마비노기 밀 인형 - mabinogi mil inhyeong

을 보니 grammar - eul boni grammar

젤다 드래곤 안나옴 - jelda deulaegon annaom

전자담배 간접흡연 디시 - jeonjadambae ganjeobheub-yeon disi

파이썬 입력값이 정수가 아니면 에러 출력하고 다시 입력받기 - paisseon iblyeoggabs-i jeongsuga animyeon eleo chullyeoghago dasi iblyeogbadgi

독수리 오형제 결말 - dogsuli ohyeongje gyeolmal

타이어 공기압 보는 법 - taieo gong-giab boneun beob

정화조 20 인용 - jeonghwajo 20 in-yong

교육청 태블릿 초기화 - gyoyugcheong taebeullis chogihwa

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의