윅스 (Wix) 코딩 강의 초급 (Beginner) - 이미지 숨기기 보이기 (Hide and Show an Image) - 상호작용 (Interaction)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 이미지 숨기기 보이기 (Hide and Show an Image) - 상호작용 (Interaction)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 이미지 숨기기 보이기 (Hide and Show an Image) - 상호작용 (Interaction)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

[ 보이기 ], [ 숨기기 ] 두개의 버튼을 생성해서 웹페이지 상에서 보여지는 이미지를 보여주거나 숨기는 기능을 만듭니다.

 

 

예제 보러가기 (View Example)

Home | Show Hide T

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

강의 내용 만드는 법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 숨기고 보이고자 하는 이미지
• 두 개의 버튼, 첫번째 버튼 ID는 "showButton", 두번째 버튼 ID "hideButton"

코드 (Code)

윅스 홈페이지 만들기의 웹에디터에서 개발자 모드/도구를 활성화하고 다음 코드를 복사하여 붙여넣습니다.

 

Home

$w.onReady(function () {

	$w('#hideButton').onClick((event) => {
		$w('#image').hide();
	})

	$w('#showButton').onClick((event) => {
		$w('#image').show();
	})
});

 

API

$w.Image API

$w.Image - Corvid API Reference

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 초급 (Beginner) - 축소 확장 구성요소 만들기 (Collapse Elements) - 상호작용 (Interactions)

윅스 (Wix) 코딩 중급 (Intermediate) - 사이트 구성요소 숨기기 보이기 (Hide & Show Elements) - 상호작용 (Interactions)

윅스 (Wix) 코딩 중급 (Intermediate) - 이미지 및 텍스트 애니메이션 (Image and Text Animation) - 상호작용 (Interactions)

 

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Hide and Show an Image | Corvid by Wix Examples | Wix.com