클릭시 색상유지되는 디자인
본문
<style>
/*--end-header--*/
/*--start-about--*/
.about-main {
text-align:center;
margin-top: 5%;
.clients-bottom p {
padding: 0px 10px;
overflow: hidden;
height: 46px;
}
.callbacks_tabs {
left: 30%;
}
.callbacks_nav {
top: 37%;
}
.blog-left h4 {
font-size: 12px;
top: 52%;
letter-spacing: 2px;
left: 33%;
}
.clients-left:nth-child(2){
display:none;
}
.clients-left {
width: 100%;
}
.clients-bottom-top {
margin-top: 1em;
}
.quality-top-one:nth-child(3),.quality-top-one:nth-child(4),.quality-top-one:nth-child(5){
display:none;
}
.quality-top-one {
width: 50%;
}
.quality-top-one span {
width: 95px;
height: 115px;
}
.quality-bottom {
left: 30%;
top: 22%;
}
.quality-bottom-dsg {
top: 44% !important;
left: 35% !important;
}
.quality-main p {
font-size: 15px;
margin-top: 7px;
}
.col-md-4.price-left:nth-child(2),.col-md-4.price-left:nth-child(3){
display:none;
}
.price {
padding: 2em 0px 11px 0px;
}
.price-top {
margin-top: 25%;
}
.price-left-two, .price-left-top {
width: 105px;
height: 125px;
top: -24px;
left: 34px;
}
#hexagon:before, #hexagon1:before {
top: -45px;
border-left: 85px solid transparent;
border-right: 85px solid transparent;
border-bottom: 45px solid #b4b4b4;
}
#hexagon:after, #hexagon1:after {
bottom: -45px;
border-left: 85px solid transparent;
border-right: 85px solid transparent;
border-top: 45px solid #b4b4b4;
}
#hexagon {
width: 170px;
height: 240px;
}
.price-left-one ul {
padding: 0px;
position: absolute;
top: 56%;
left: 22%;
}
.price-left-two h5, .price-left-top h5 {
font-size: 13px;
margin: 30% 0px 0px 0px;
}
.price-left-two p, .price-left-top p {
font-size: 12px;
margin-top: 2px;
}
.price-left-two p sup, .price-left-top p sup {
font-size: 15px;
}
.price-left-two p span, .price-left-top p span {
font-size: 2.3em;
}
.price-left-two a, .price-left-top a {
width: 26px;
height: 29px;
top: 69%;
left: 60%;
}
}
/*--media-quaries-end-here--*/
/*----------------------------------------------------------헤드셋 색깔 변경------------*/
div#navi{width:1200px;}
div#navi ul li span{color:#9e9e9e;}
ul.p_left{position:relative;width:260px;left:0;top:100px;text-align:right;list-style:none;float:left;}
ul.p_right{position:relative;width:260px;right:0;top:100px;text-align:left;list-style:none;float:right;}
div#main{width:650px;left:0;top:0;float:left;padding:25px 10px;}
div#main > img{width:650px;left:0;top:0;float:left;padding:25px 10px;}
</style>
<!--start-quality-->
<script type="text/javascript">
$(function(){
$("div#navi ul li a").click(function(){
$("div#main img").attr("src",$(this).attr("href"));
return false;
});
});//jquery 끝부분
</script>
<div class="quality" id="color">
<div class="container">
<div class="quality-main">
<div id="navi">
<ul class="p_left">
<h2>첫번째 색상 </h2>
<li><span>BLACK MASH</span><a href="images/b-mash.png"/><img src="images/b-button.png"/></a></li>
<li><span>GRAY MASH</span><a href="images/g-mash.png"/><img src="images/g-button.png"/></a></li>
</ul>
<ul class="p_right">
<h2>두번째 색상 </h2>
<li><a href="images/orange.png"><img src="images/1.png"/></a><span>orange</span></li>
<li><a href="images/green.png"/><img src="images/2.png"/></a><span>green</span></li>
<li><a href="images/blue.png"/><img src="images/3.png"/></a><span>blue</span></li>
</ul>
</div><!--navi-->
<div id="main">
<img src="images/frame.png" alt="계속 유지되어야 할 이미지 (고정)" />
</div><!--main-->
</div><!--quality-main-->
</div><!--container--->
</div><!---id color--->
<!--end-quality-->
왼쪽 오른쪽 색상 버튼으로 조합해서 이미지가 보여지는 방식인데
버튼을 누르면 그 해당 이미지만 나타나고 (alt="계속 유지해야할 이미지)도 사라집니다.
방법을 어떻게 해야하는지 모르겠어요 ㅠㅠ
첫번째 색상버튼 누르면 해당 버튼 이미지가 생기고
두번쨰 색상버튼을 누르면 a버튼을 눌렀던건 사라지지 않고 유지가 되어야 합니다.
?
왼쪽 오른쪽 색상 버튼으로 조합해서 이미지가 보여지는 방식인데 버튼을 누르면 그 해당 이미지만 나타나고 (alt="계속 유지해야할 이미지)도 사라집니다. 방법을 어떻게 해야하는지 모르겠어요 ㅠㅠ a버튼 누르면 해당 버튼 이미지가 생기고 b버튼을 누르면 a버튼을 눌렀던건 사라지지 않고 유지가 되어야 합니다.
답변 4
function img(type){
if(type == 'orage){
$('#더미 이미지ID').hide();
$('#대상이미지ID').show();
} else if(type == 'red){
$('#더미 이미지ID').hide();
$('#대상이미지ID').show();
} else if(type == 'blue){
$('#더미 이미지ID').hide();
$('#대상이미지ID').show();
}
}
이런식으로 되는거죠.
다만 변수만큼 소스는 지저분해 집니다.
질문자님의 능력에 따라 case 문으로도 가능합니다.
이건 구글링 조금만 해보시면 이해 되실거에요.
한가지 팁을 더 드리자면
<img class="img" id="red">
이렇게 해놓고
$('.img').hide();
$('#red').show();
이런식으로 하면
기존에 열린 이미지 (.img) 는 숨기고
새로 #red id 를 가진 이미지가 보여지는 원리 입니다.
되는데까지 스스로 해결해보도록 노력 해보겠습니다ㅜ 답변주셔서 감사합니다~
그냥 간단하게 onclick 으로 가능할것 같은데요?
<div onclick="img('red');">레드</div>
function img(type){
if(type == 'red'){
$('#더미 이미지ID').hide();
$('#대상이미지ID').show();
}
}
죄송하지만 조금 더 자세히 알려주실 수 있나요~>
html/ script를 전부 수정해야 하나요??
1.
<div onclick="img('red');">레드</div>
function img(type){
if(type == 'red'){
$('#더미 이미지ID').hide();
$('#대상이미지ID').show();
}
}
2.
<div onclick="img('orange');">오렌지</div>
function img(type){
if(type == 'orage){
$('#더미 이미지ID').hide();
$('#대상이미지ID').show();
}
}
이런식으로 색상 숫자에 맞게 하나씩 늘어나나요?
alt는 이미지경로가 아니라 이미지명이나 아님 사이트명같은걸 넣으셔야되요
일단 a 버튼을 클릭하면 이미지를 생기는건
$('#a').css('background','url('./이미지경로')');
$('#b').hide();
이런식으로 비버튼은 숨김처리만 하면되구요 완전히 삭제 되지 않아서 다시 보임처리할수있어요
$('#b').show();
응용해보시면되요
제가 설명을 제대로 안했나봐요~ ㅠ A버튼 B버튼 한 개씩이 아니고 A라는 버튼 그룹에 4개 B라는 버튼 그룹에 10개에 버튼을 만들려고 합니다~ <ul>이 두개 있어요~ 그래서 A버튼 안에 1버튼 클릭하면 이미지가 뜨고 그 상태에서 B버튼안에 1버튼을 누르면 A버튼이 사라지지 않고 B버튼이 그대로 나타나는 방식이 만들고 싶네요 ㅠㅠ
그래서 버튼 두개를 왔다갔다 클릭하면서 색깔을 바꾸는 (z플립 비스포크) 처럼 색깔이 바뀌는 방식에 페이지를 만들고 싶습니다.
흠.. 일단 이해하기 어렵네요 ul li 내부면 셀렉터를 이용해서 보임 숨김처리 하면되요
거기 li에 클래스를 우선주고요
파런트나 클로셋으로 지정후에 자식을 찾아서 히든이나 쇼를 주면 될것같은데요
http://myhosting1313.dothome.co.kr/C-TEST.html
죄송합니다. url 올려드리겠습니다.
어디가 문제인지 모르겠으면 URL 부터 공개하세요...
http://myhosting1313.dothome.co.kr/C-TEST.html
사이트를 보시면 대충 이해가 가실 듯 합니다 ㅠㅠ
왼쪽에 블랙 메쉬를 클릭하고 오른쪽에 패브릭 색상을 클릭했을때
블랙 메쉬가 사라지면 안됩니다~
바퀴가 달린 의자 이미지가 항상 고정돼있어서 색깔이 바꿔
볼 수 있는 장면이 만들고 싶습니다.
