무꼬's Art Life

안녕하세요 무꼬입니다.~~

오늘은 div 혹은 span 혹은 table 자체에 링크를 걸어보는걸 알려드릴게요~

우선 DIV , SPAN, TABLE 은 보통 사용해보시면 아시다시피

어떤 박스의 개념이라고 말할수 있는데요.

이 분류된 박스 안에 글, 그림 등을 넣고 웹페이지를 표현할 수 있죠?

그런데!!! 이런 경우가 있습니다.

아, 그냥 DIV, SPAN, 테이블 자체를 클릭해도 링크가 걸리게 할순 없을까?

있지요!

우선 핵심 코딩 먼저 나열 하자면,

우리가 지금부터 알아야할 코드는 단 이거 하나입니다.

그럼, 어디다가 갖다 붙이냐?

사용하시는 해당 태그에다가 그냥 붙이시면 됩니다~

아 물론  

onclick="location.href='http://art-life.tistory.com'" 에서

http://art-life.tistory.com 이 부분은 원하시는 주소 적어 주시면

된다는 거 모르시는 분 없겠죠?ㅎㅎㅎ

자, 아주 좋은데 한 가지 문제점이 있어요.

이걸 클릭 할 수 있는 건지 아닌지 사용자가 분별하기가 힘들어요.

왜 일까요?

보통 하이퍼 링크의 경우에는 아래와 같이 마우스를 가져다대면 마우스의 커서가 손가락 모양으로 변하게 되어, 사용자에게

아 이건 클릭을 할 수 있는 링크 인가보다 라고 인식을 주게 되죠.

이와 같은 효과를 주기 위해서 STYLE 태그를 이용 해야 합니다~!

이것 역시 적용시킬 곳에 넣어 주시기만 하면 됩니다 ㅎㅎ

아래는 두가지를 동시에 적용 시킨 예제 입니다.

이상 무꼬였습니다~ ㅎㅎ

즐거운 JavaScript 되세요~ ㅎㅎ

P.S - 궁금하신 점은 댓글로 달아주시면 신속한 답변이 당신을 기다릴 것입니다~ ㅎㅎ

<script type="text/javascript">
var _clickedMenu=""; //클릭된 메뉴를 기억하기 위한 전역변수
function changeTextColor(clickedMenu){ //메뉴 클릭시 작동
for(i=0;i<=6;i++){
document.getElementById("m_"+i).style.color="#ffffff"; //모든 메뉴를 검정색으로 변경
}
clickedMenu.style.color="#aa5555"; //클릭한메뉴를 빨강으로 변경
_clickedMenu=clickedMenu.text; //클릭한메뉴를 전역변수에 저장
}
function setOnColor(hoveredMenu) { //메뉴에 마우스 오버시 작동
hoveredMenu.style.color="#aa5555"; //폰트색을 빨강으로 변경
}

//메뉴에 마우스 아웃시 작동
function setOutColor(outedMenu) {
//마우스 아웃한 메뉴가 클릭한 메뉴라면 함수를 바로 빠져나온다.
if(outedMenu.text==_clickedMenu) return false;
//색깔을 검정으로 변경
outedMenu.style.color="#ffffff";
}

//메뉴보이기 [저작권] 무예꼬마
function MenuView(Sub_m){
 for (i=1;i<=6;i++){
  var Onview = document.getElementById('sub_' + i);
  Onview.style.display = "none";
 }
if(Sub_m != 0){
var Onview = document.getElementById(Sub_m);
Onview.style.display = "";
}
}

</script>

<div class="menu_frame">
<div class="menu_group" style="position: absolute; left: 800px; top: 800px;">

<a href="https://art-life.tistory.com/" title="무꼬's Art Life" id="m_0" onclick="changeTextColor(this);" onmouseover="setOnColor(this);" onmouseout="setOutColor(this);">
<font size=1>무꼬's</font><br><font size=5>ArtLife</font></a>

 |<a href="http://art-life.tistory.com/category/Issue" id="m_6" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_6');" onmouseout="setOutColor(this);">
Issue</a></div>
 |<a href="http://art-life.tistory.com/category/Martial%20Art%27s" id="m_2" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_2');" onmousout="setOutColor(this);">
Martial Art's</a>
 |<a href="http://art-life.tistory.com/category/Programming" id="m_3" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_3');" onmouseout="setOutColor(this);">
Programming</a>
 |<a href="http://art-life.tistory.com/category/Game" id="m_4" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_4');" onmouseout="setOutColor(this);">
GAME</a>
 |<a href="http://art-life.tistory.com/category/Health" id="m_5" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_5');" onmouseout="setOutColor(this);">
Health</a>
|<a href="http://art-life.tistory.com/category/Daily" id="m_1" onclick="changeTextColor(this);" onmouseover="setOnColor(this); MenuView('sub_1');" onmouseout="setOutColor(this);">
Daily</a>
</div>
<div id="sub_1" style="display:none;">
<a href="http://art-life.tistory.com/category/Daily">Daily</a> |
<a href="http://art-life.tistory.com/category/Daily/외출">외출</a> |
<a href="http://art-life.tistory.com/category/Daily/Food">Food</a> |
<a href="http://art-life.tistory.com/category/Daily/일상">일상</a> |
</div>
<div id="sub_2" style="display:none;">
<a href="http://art-life.tistory.com/category/Martial Art's">Martial Art's</a> |
<a href="http://art-life.tistory.com/category/Martial Art's/기사">기사</a>
</div>
<div id="sub_3" style="display:none;">
<a href="http://art-life.tistory.com/category/Programming">Programming</a> |
<a href="http://art-life.tistory.com/category/Programming/PHP">PHP</a> |
<a href="http://art-life.tistory.com/category/Programming/JavaScript">JavaScript</a> |
<a href="http://art-life.tistory.com/category/Programming/기사">기사</a>
</div>
<div id="sub_4" style="display:none;">
<a href="http://art-life.tistory.com/category/GAME">GAME</a> |
<a href="http://art-life.tistory.com/category/GAME/Ragnarok">라그나로크</a> |
<a href="http://art-life.tistory.com/category/GAME/기사 & 리뷰">기사 & 리뷰</a> |
</div>
<div id="sub_5" style="display:none;">
<a href="http://art-life.tistory.com/category/Health">Health</a> |
<a href="http://art-life.tistory.com/category/Health/기사">기사</a>
</div>
<div id="sub_6" style="display:none;">
<a href="http://art-life.tistory.com/category/Issue">Issue</a>
<a href="http://art-life.tistory.com/category/Issue/유머">유머</a>
<a href="http://art-life.tistory.com/category/Issue/기사">기사[Hot issue]</a>
</div>