이미지버튼도 클릭했을 때 색에 변화를 줄 수 있나요?
본문
오른쪽에 있는
인트라넷 - 사내소식, 신상명세서, 자유게시판, 포토앨범, 서식자료실을 각각 클릭하면 각 페이지로 넘어가는데요
예를 들어서 사내소식 페이지에 가 있는동안은 오른쪽의 사내소식 이미지 버튼 색에 변화를 주고 싶습니다
저 부분의 소스는
이렇게 되어있구요
어떻게 수정해줘야할까요?
답변 3
현재 캡쳐된 이미지로 보기에는 메뉴 항목이 모두 게시판형태로 보여집니다.
해당되는 게시판 페이지에서 메뉴 이미지가 활성화 되려면 일단은 활성화될때 이미지를 제작해 놓으시고요.
색상이 다른게 하셨으니 포토샵에서 색상이 다른 이미지로 준비해 두셔야 겠지요.
메뉴 하나만 예를 든다면 활성화될 때 이미지 하나를 smenu1_on.jpg라고 하겠습니다.(기본 이미지를 smenu1.jpg)로 생각하고요.
이 이미지에 클래스명을 smenu1이라고 지정해 주고요. 게시판명이 freeboard로 가정하고요.
head.sub.php 에서 </head>부분 바로 위에
<?php
if($bo_table =="freeboard"){
?>
<script>
$(function(){
$(".smenu1").attr("src", "smenu1_on.jpg");
});
</script>
<?php
}
?>
와 같은 코드를 넣어주시면 될것 같습니다. 메뉴 항목이 여러개 이므로 이 부분을 위의 코드에서 해당되는 부분들을 추가해서 구성해 주면 될겁니다.
감사합니다!
마우스 오버 했을 때 이미지를 만들어서
<img src='image.png' width='120' height='70' onmouseover="this.src='image_over.png';" onmouseout="this.src='image.png';" />
이런식으로 해주시던지...아니면 css로 background-url 을 hover이벤트로 변경하는 방법이 있습니다.
그런데 위와 같은 이미지의 형태라면 이미지로 하지 않고 html과 css로 하는 것이 좋아 보이긴 합니다.
css로 하려면 어떻게 해야할까요??
<ul id="side_menu"><li>사내소식</li><li>신상명세서</li></ul>
이런식으로 html 마크업을 하시고
<style>
#side_menu {
width: 300px;
}
#side_menu li:hover {
background-color: blue;
}
</style>
이런식으로 하면 됩니다. 그리 어렵지 않으니 검색해보시면 쉽게 해결하실 것 입니다.
감사합니다!
해당 메뉴가 활성화되었을 때 그 이미지만 다른 색깔의 이미지로 바꿔 주시면 되지 않을까요?
감사합니다