롤오버 다시좀 질문할께요 ㅠㅠ .. 정보
롤오버 다시좀 질문할께요 ㅠㅠ ..본문
http://cncgreen.co.kr/sub1_1.php
왼쪽메뉴 스타일시트를 이용해 하려고해요
그럼 왼쪽메뉴이미지가 바뀌어야되는데 그럼 이미지에 class지정을 해야하나요?
아니면 링크에다 클래스를줘야하나요? <a href="sub1.php" class="aa"> 이런식으로?
그리고 스타일시트를이용해 롤오버를 만들시 해당페이지에 롤오버 이미지를 고정할수있는지도
궁금해요
왼쪽메뉴 스타일시트를 이용해 하려고해요
그럼 왼쪽메뉴이미지가 바뀌어야되는데 그럼 이미지에 class지정을 해야하나요?
아니면 링크에다 클래스를줘야하나요? <a href="sub1.php" class="aa"> 이런식으로?
그리고 스타일시트를이용해 롤오버를 만들시 해당페이지에 롤오버 이미지를 고정할수있는지도
궁금해요
댓글 전체
네 사이트 확인해보니 롤오버 기능이 빠져있네요. ^^* 단지 스크립트를 활용하지 않고, CSS로만 만드신다면
씨엔씨 푸른변원 > 병원소개 left메뉴를 한번 살펴보죠.
left메뉴 소스가
<tr>
<td><a href="/sub1_1.php"><img src="/images/sub1_left_04.jpg" class="s1"></a></td>
</tr>
<tr>
<td><a href="/sub1_2.php"><img src="/images/sub1_left_05.jpg" class="s2"></a></td>
</tr>
<tr>
<td><a href="/sub1_3.php"><img src="/images/sub1_left_06.jpg" class="s3"></a></td>
</tr>
<tr>
<td><a href="/sub1_4.php"><img src="/images/sub1_left_07.jpg" class="s4"></a></td>
</tr>
이런식으로 되어있네요?
이부분에 img에 class를 주셨는데요. 이미지에 주지 마시구요.
a링크에 주시는게 맞습니다. ^^
<a href="#" class="s1">이미지</a>
<a href="#" class="s2">이미지</a>
<a href="#" class="s3">이미지</a>
<a href="#" class="s4">이미지</a>
이런식으로 주셨죠?
이런식으로 주셨다면
<a href="#" class="s1"></a>
<a href="#" class="s2"></a>
<a href="#" class="s3"></a>
<a href="#" class="s4"></a>
이렇게 바꿔주세요. a링크에 어떤 이미지도 없게요. ~그냥 비워주시면 됩니다.
이렇게 비워주신후
css 로 들어가신후
.s1 {
background: url("http://cncgreen.co.kr/images/sub1_left_04.jpg") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s2 {
background: url("http://cncgreen.co.kr/images/sub1_left_05.jpg") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s3 {
background: url("http://cncgreen.co.kr/images/sub1_left_06.jpg") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s4 {
background: url("http://cncgreen.co.kr/images/sub1_left_07.jpg") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
이런식으로 넣어주면 아마 이미지가 있을때와 같은화면으로 보여질건데요. 여기에 롤오버 기능을 추가하시려면
.s1:hover {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s2:hover {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s3:hover {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s4:hover {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
이렇게 해주시면 마우스오버했을때 이미지가 변하겠죠?
이렇게하면 다 끝났다고 생각하실수 있는데요. 해당페이지에서 롤오버 이미지 고정시키는 부분도 필요하신거잖아요?
그부분은 각페이지 <body> 부분마다 class나 id값을 주시고.
css에서 예를들어 <body id="page1"> 이부분이 소개에 연혁부분이면
#page1 .s2 {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
이렇게 지정해주면 연혁페이지에 들어왔을때 연혁 left 메뉴가 온이 되어있겠죠?
아님 인사말을 유지시키고 싶으시면
인사말 페이지 body에 id값 page2로 주시고
#page2 .s3 {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
이렇게 주시면 인사말 페이지에 들어왔을때 left메뉴가 활성화 되어있겠죠?
적용하셨는데도 잘 안되시면 말씀주세요.
그럼 감사합니다.
씨엔씨 푸른변원 > 병원소개 left메뉴를 한번 살펴보죠.
left메뉴 소스가
<tr>
<td><a href="/sub1_1.php"><img src="/images/sub1_left_04.jpg" class="s1"></a></td>
</tr>
<tr>
<td><a href="/sub1_2.php"><img src="/images/sub1_left_05.jpg" class="s2"></a></td>
</tr>
<tr>
<td><a href="/sub1_3.php"><img src="/images/sub1_left_06.jpg" class="s3"></a></td>
</tr>
<tr>
<td><a href="/sub1_4.php"><img src="/images/sub1_left_07.jpg" class="s4"></a></td>
</tr>
이런식으로 되어있네요?
이부분에 img에 class를 주셨는데요. 이미지에 주지 마시구요.
a링크에 주시는게 맞습니다. ^^
<a href="#" class="s1">이미지</a>
<a href="#" class="s2">이미지</a>
<a href="#" class="s3">이미지</a>
<a href="#" class="s4">이미지</a>
이런식으로 주셨죠?
이런식으로 주셨다면
<a href="#" class="s1"></a>
<a href="#" class="s2"></a>
<a href="#" class="s3"></a>
<a href="#" class="s4"></a>
이렇게 바꿔주세요. a링크에 어떤 이미지도 없게요. ~그냥 비워주시면 됩니다.
이렇게 비워주신후
css 로 들어가신후
.s1 {
background: url("http://cncgreen.co.kr/images/sub1_left_04.jpg") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s2 {
background: url("http://cncgreen.co.kr/images/sub1_left_05.jpg") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s3 {
background: url("http://cncgreen.co.kr/images/sub1_left_06.jpg") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s4 {
background: url("http://cncgreen.co.kr/images/sub1_left_07.jpg") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
이런식으로 넣어주면 아마 이미지가 있을때와 같은화면으로 보여질건데요. 여기에 롤오버 기능을 추가하시려면
.s1:hover {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s2:hover {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s3:hover {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
.s4:hover {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
이렇게 해주시면 마우스오버했을때 이미지가 변하겠죠?
이렇게하면 다 끝났다고 생각하실수 있는데요. 해당페이지에서 롤오버 이미지 고정시키는 부분도 필요하신거잖아요?
그부분은 각페이지 <body> 부분마다 class나 id값을 주시고.
css에서 예를들어 <body id="page1"> 이부분이 소개에 연혁부분이면
#page1 .s2 {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
이렇게 지정해주면 연혁페이지에 들어왔을때 연혁 left 메뉴가 온이 되어있겠죠?
아님 인사말을 유지시키고 싶으시면
인사말 페이지 body에 id값 page2로 주시고
#page2 .s3 {
background: url("온이 될 이미지경로") no-repeat left top;
display: block;
width: 179px;
height: 35px;
}
이렇게 주시면 인사말 페이지에 들어왔을때 left메뉴가 활성화 되어있겠죠?
적용하셨는데도 잘 안되시면 말씀주세요.
그럼 감사합니다.
에효... 저렇게 css 로만 하시면 무지 무지 복잡해 지시구요...
제가 처음에 말씀드린데로 간단한 javascript 을 쓰세요...
onmouseover="freezeImage()"
왜 다들 이렇게 문제를 복잡하게 만드는건지 도대체 이해가 안되네요.
css 도 잘 이해가 안되시는데, 저건 초보자에게 처음부터 너무 가혹하게 복잡해지는 css 네요.... -..-;;
1.jpg, 2.jpg 이렇게 이미지만 두개 만들어서 해보세요. 작동되는걸 직접 보셔야 이해가 빠르실 것 같네요...
///////////////////이 아래 부분을 그냥 Notepad 에 ctrl + c, ctrl + v 하셔서 쓰시면 됩니다./////
이거또 엉뚱한데 넣으시고 안된다고 하실라... 훔,.. 다 적어드릴게요.
<html>
<title></title>
<head>
<script type="text/javascript">
var image1Name = "1.jpg";
var image2Name = "2.jpg";
var image1 = new Image();
var image2 = new Image();
image1.src = image1Name;
image2.src = image2Name;
function freezeImage() {
var imageObject = document.getElementById("메뉴");
imageObject.src = image2Name;
}
</script>
</head>
<body>
<a href="http://hackya.com" onmouseover="freezeImage()" >
<img src="1.jpg" id="메뉴" alt=" " />
</a>
</body>
</html>
이제 본인이 원하시는데로 이미지 쓰셔서 메뉴 그림파일로 만들어 넣으시면 됩니다. 만족하십니까, 고객님? ^^
제가 처음에 말씀드린데로 간단한 javascript 을 쓰세요...
onmouseover="freezeImage()"
왜 다들 이렇게 문제를 복잡하게 만드는건지 도대체 이해가 안되네요.
css 도 잘 이해가 안되시는데, 저건 초보자에게 처음부터 너무 가혹하게 복잡해지는 css 네요.... -..-;;
1.jpg, 2.jpg 이렇게 이미지만 두개 만들어서 해보세요. 작동되는걸 직접 보셔야 이해가 빠르실 것 같네요...
///////////////////이 아래 부분을 그냥 Notepad 에 ctrl + c, ctrl + v 하셔서 쓰시면 됩니다./////
이거또 엉뚱한데 넣으시고 안된다고 하실라... 훔,.. 다 적어드릴게요.
<html>
<title></title>
<head>
<script type="text/javascript">
var image1Name = "1.jpg";
var image2Name = "2.jpg";
var image1 = new Image();
var image2 = new Image();
image1.src = image1Name;
image2.src = image2Name;
function freezeImage() {
var imageObject = document.getElementById("메뉴");
imageObject.src = image2Name;
}
</script>
</head>
<body>
<a href="http://hackya.com" onmouseover="freezeImage()" >
<img src="1.jpg" id="메뉴" alt=" " />
</a>
</body>
</html>
이제 본인이 원하시는데로 이미지 쓰셔서 메뉴 그림파일로 만들어 넣으시면 됩니다. 만족하십니까, 고객님? ^^
정말 감사해요 ㅠㅠ 친절히 잘가르쳐주셔서 감사해요 쉽게해결했네요^-^