<html>
<head>
<style type="text/css">
#con {
font-family:"휴먼매직체";
display:table;
}
#con2 {
position: absolute;
visibility: hidden;
background: pink;
font-family:"휴먼매직체";
width: 180px;
height: 30px;
text-align:center;
line-height:30px; /*line-height를 높이만큼 주면 위아래 높이중앙정렬이된다*/
}
td {
border: 1px solid navy;
width: 180px;
text-align: center;
font-size:30px;
}
</style>
<script>
window.onload = function() {
array = [ "여성영캐주얼", "여성커리어", "유니섹스캐주얼", "유아동" ];
array1 = [ "브랜드1", "브랜드2", "브랜드3" ];
var tableTag = document.createElement("table");
var trTag = document.createElement("tr");
for ( var i in array) {
tdTag = document.createElement("td");
tdTag.innerHTML = array[i];
trTag.appendChild(tdTag);
tdTag.onmousedown = mDown;
}
tableTag.appendChild(trTag);
con.appendChild(tableTag);
}
function mDown() {
for(var i in array){
this.parentNode.childNodes[i].style.background="";
}
this.style.background="pink";
con2.style.left = event.srcElement.offsetLeft+10;
con2.style.top =event.srcElement.offsetTop+50;
con2.innerHTML = "";
for ( var i in array1) {
var aTag = document.createElement("a");
aTag.href = "#";
aTag.innerHTML = array1[i];
con2.appendChild(aTag);
if(i<array1.length-1){
var strNode = document.createTextNode(" | ");
con2.appendChild(strNode);
}
}
con2.style.visibility = "visible";
}
</script>
</head>
<body>
<div id="con"></div>
<div id="con2"></div>
</body>
</html>
'개발하자 > 자바스크립트' 카테고리의 다른 글
| 이전페이지 다음페이지로 이동하기 (0) | 2015.03.03 |
|---|---|
| onmouseover,onmouseout (0) | 2015.03.03 |
| 과제1)토글기능 구현하기 (0) | 2015.02.28 |
| css바꾸기 확장성있는 코드 (0) | 2015.02.28 |
| className 바꾸기 (0) | 2015.02.28 |
