묻고답하기
메뉴 배경이미지 변경
2014.10.13 16:09
White Square layout 이용중입니다.
현재 페이지에 해당하는 메뉴의 배경이미지를 지정해주고 싶습니다.
각 메뉴에 연결되어있는 링크주소가 서로 다른 페이지주소여서
현재는 URL을 이용하여 배경이미지가 변하도록 소스를 수정하고 있습니다.
아래는 현재 수정중인 소스입니다.
자바스크립트 부분은
var d_url = document.location.href;
varCut = d_url.indexOf("="); // url에서 '=' 뒤의 값과 일치하는 id영역의 배경이미지를 변경할 것입니다.
varCheck = d_url.substring(varCut+1);
window.onload=function()
{
document.getElementById(varCheck).style.background = "url('../img/menu_color.png')";
// 페이지가 열리면 처음에 menu_white.png로 지정된 배경이미지가 menu_color.png로 변경되도록 할 것입니다.
}
html부분은
<li loop="$main_menu->list=>$key1,$val1" cond="$val1['selected']">
<ul loop="$val1['list']=>$key2,$val2" id="$varCheck"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
</ul>
</li>
XE사용도 처음이고, varCheck를 저렇게 id값으로 줄 수 있는지 알지못하여 질문을 올립니다.
위에처럼 작성하여 실행하였더니 변화없이 모든 메뉴의 배경이미지가 menu_white.png로 적용되어 보여집니다.
나중에 추가되는 메뉴도 동일한 이벤트가 발생해야되기 때문에 html부분은 id값만 수정되었으면 합니다.
저렇게 menu01페이지에서는 menu01의 배경이 변경되고
menu02페이지에서는 menu02의 배경이 변경되도록 하려면 어느 부분을 수정해야하는지 아시는 분이 계시면 댓글달아주시면 감사하겠습니다.