소프트웨어 이미지에 Input버튼 효과를 주고 싶어요
2011.02.12 20:14
(죄송해요 버튼을 처음으로 만들어봐서 하다보니 글자를 잘못 적어서
수정하고 다시 글을 올려요 ㅎㅎ)
겨우겨우 아래 버튼 이미지를 만들었거든요!^.^
아래 이미지에 클릭을 하면 눌리는 효과를 input 버튼 효과라고 하는것 같던데..
그렇게 효과를 주고 싶은데요..!
어디서 html소스는 보긴 했는데
잘 모르겠더라구요
아래 이미지에 효과를 주어서 버튼을 클릭하면 원하는 게시판으로 이동하게끔 하고 싶거든요
어떻게 하면 될까요?
hmtl로는 불가능 할까요?
뭔가 버튼같은 효과를 주고 싶은데..플래쉬 밖에 안되는 걸까요~~?
그거는 저에게 너무 힘든 과정이라...ㅎㅎ;;
잘 몰라서 그러는데 조언좀 부탁 드려도 될까요~~?^.^
쇼핑몰에서 사용할꺼에요^^
댓글 [11]
-
Lime 2011.02.12 20:28 -
비비안린 2011.02.12 20:50 이런걸 원했어요!!!!^.^ 답변 감사합니다.ㅎㅎ
그런데 질문이 있는데요
바꿀이미지명 원래이미지 뭐 이런글자가 있는데요
거기에 이미지 url 주소를 넣으면 된다는 이야기인가요???
아 넣으니까 되네요
그다음에 링크는 어떻게 해요???
-
Lime 2011.02.12 21:17 <a href='여기가 url주소' onmouseover='img1.src="바뀌는이미지명' onmouseout='img1.src="원래이미지명'><img src='원래이미지명' name='img1'></a>
절대경로(h*t*t*p://bibianlin.com/shop/index.html)나 상대경로(./shop/index.html)중 쓰기 편한걸로 사용하세요.
상대경로는 현재 표시된 html 문서의 위치(h*t*t*p://bibianlin.com/index.htm)를 기준으로 해서 지정합니다.
-
비비안린 2011.02.12 21:27 <table>
<tr>
<td width="32" height="32" background="원래이미지" onmouseenter="img1.style.visibility='visible';" onmouseleave="img1.style.visibility='hidden';"><img id="img1" src="바뀔이미지" style="visibility:hidden;"></td>
</tr>
</table>
알려주신 사이트에서 두번째 태그인 이 태그로 하니까 사진이 잘 변하네요! 첫번째 태그는 이상하게 전 사진이 안변해요 ㅎㅎㅎ그런데요 이 두번째 태크에서는 어디에 url주소를 적으면 될까요?
자꾸 질문해서 죄송합니다..^^;
-
유민 2011.02.12 21:31 a href='주소' target='_blank'
_top = 프레임 제일 위
_self = 해당창
_parent = 전체창
_blank = 새창
img src='이미지경로' border='0' ; border값을 0으로 줘야만 테두리가 안생깁니다.
첨부파일확인하세요.
-
비비안린 2011.02.12 21:36 감사합니다! 테두리가 사라졌어요!^^
그런데 역시 이미지가 전 변하지 않고 한장만 나오는데 이유가 뭘까요 T.T
<a href='' target='_blank' onmouseover='img1.src="/files/attach/images/12257/442/921/001/BB.png" onmouseout='img1.src="https://windowsforum.kr/files/attach/images/12257/442/921/001/BBB.png"><img src='https://windowsforum.kr/files/attach/images/12257/442/921/001/BB.png' name='img1' border='0'></a>
-
Lime 2011.02.12 21:49 onmouseover에 절대 경로를 지정하세요.
그리고 ', " 사용시
'로 시작 -> '로 끝
"로 시작 -> "로 끝
이지 혼용해서
'로 시작 -> "로 끝
"로 시작 -> '로 끝
내거나 하면 안됩니다.
-
유민 2011.02.12 22:09 onmouseover='img1.src="images/BB.png"' 잘 보시면 onmouseover 이벤트 후에 'img1.src="이미지경로"' 따옴표를 잘 보세요. 괄호로 본다면 {[내용]} 처럼 따옴표 잘 보세요.
-
비비안린 2011.02.12 22:27 죄송합니다..전 안돼나 봐요..T,T
아직도 뭔가 이상하나요? 휴..T.T
<a href=' target='_blank' onmouseover='img1.src="https://windowsforum.kr/files/attach/images/12257/442/921/001/BBB.png" onmouseout='img1.src="https://windowsforum.kr/files/attach/images/12257/442/921/001/BBB.png"><img src="https://windowsforum.kr/files/attach/images/12257/442/921/001/BB.png" name='img1' border='0'></a>
-
유민 2011.02.12 22:35 onmouseover='img1.src="이미지1"' --->따옴표 주의 onmouseout='img1.src="이미지2"' --->따옴표 주의
-
비비안린 2011.02.12 22:46 아!!!!!!! "' '이 하나 더 있군요!!!! 감사합니다!!! 성공했어요~~~~!!!!!! 히야~~
번호 | 제목 | 글쓴이 | 조회 | 등록일 |
---|---|---|---|---|
[공지] | 질문과 답변 게시판 이용간 유의사항 | gooddew | - | - |
20116 | 윈 도 우| 윈도우 미디어 플레이어 재생이 안되요...~! [1] | BlueWhale | 4782 | 02-12 |
20115 | 윈 도 우| 파이어폭스 램디스크 설정 어떻게하나요..? [3] | Fringe | 2313 | 02-12 |
20114 | 윈 도 우| pirate7 | 초보초보초보 | 2495 | 02-12 |
20113 | 윈 도 우| Ultimate K 그리고 KN 두개의 차이점이 뭔가요? [3] | 맛참 | 5082 | 02-12 |
20112 | 윈 도 우| xp 볼륨버전 키..... [1] | 사랑 | 3774 | 02-12 |
20111 | 윈 도 우| win7+sp1 통합본 설치 후 sp1 제거방법 [2] | 다크케이 | 2649 | 02-12 |
20110 | 하드웨어| TV를 모니터로 사용할때 [4] | IS진 | 2000 | 02-12 |
» | 소프트웨어| 이미지에 Input버튼 효과를 주고 싶어요 [11] | 비비안린 | 2258 | 02-12 |
20108 | 윈 도 우| 이번 K.J 수동 토큰 최적화 기능 질문입니다 [2] | 공피 | 2514 | 02-12 |
20107 | 윈 도 우| 공cd 인식이 안되네요 [4] | 료애 | 2807 | 02-12 |
20106 | 소프트웨어| usb에 hierens 넣는 방법좀 알려주실분 없으신가요 [2] | kailcarson | 1459 | 02-12 |
20105 | 윈 도 우| 영문 xp 순정 만고 시드파일 부탁드립니다. [1] | 한스네 | 2165 | 02-12 |
20104 | 윈 도 우| 두대의 컴퓨터 네트워크 질문드려요 [7] | ss2939 | 5326 | 02-12 |
20103 | 소프트웨어| 게임을 하는데... [3] | mmorpgbara | 1519 | 02-12 |
20102 | 윈 도 우| 유튜브가 이상합니다. | 문용수 | 1836 | 02-12 |
20101 | 소프트웨어| IE9RC 개발자 모드 진입이 안됩니다. | 하솔 | 1639 | 02-12 |
20100 | 하드웨어| 레버노 b560 바이오스 다운로드 [3] | 어사또 | 2328 | 02-12 |
20099 | 윈 도 우| K.J_$OEM$_6T 질문드립니다. [2] | 성용 | 2168 | 02-12 |
20098 | 하드웨어| 오버클럭 방법 부탁합니다. [5] | 담장미인 | 2102 | 02-12 |
20097 | 하드웨어| DVD-R 공미디어 화이트 와 골드 차이점 문의드려요 [4] | 김무 | 1654 | 02-12 |
롤오버는 이미지 2개 사용합니다.
롤오버용으로 쓸 이미지는 원본에 약간 효과를 줘서 사용하세요.
아래는 스크립트가 필요없는 코드라고 하네요.
https://lia.pe.kr/zb41pl2/bbs/zboard.php?id=tip&page=10&sn1=&divpage=1&category=3&sn=off&ss=on&sc=on&select_arrange=headnum&desc=desc&no=374