링크를 통한 스프라이트 이미지 대체

기본적으로 div 내에서 스프라이트 섹션을 표시하고 다른 링크를 클릭하면 표시되는 스프라이트 섹션이 변경되는 div 아래에 텍스트 메뉴가 표시됩니다. 지금까지이고 다음과 같이 표시 내 스프라이트을 모두 찍었을 경우 여기링크를 통한 스프라이트 이미지 대체

은 다음과 같습니다

INDEX

<html> 

<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 
<i class="sprite sprite-caramel"></i> 
<i class="sprite sprite-chocolate"></i> 
<i class="sprite sprite-empty"></i> 
<i class="sprite sprite-strawberry"></i> 
<i class="sprite sprite-vanilla"></i> 
</body> 

</html>

CSS

.sprite { 
    background-image: url(sprite1.png); 
    background-repeat: no-repeat; 
    display: block; 
} 

.sprite-caramel { 
    width: 176px; 
    height: 250px; 
    background-position: 0 0; 
} 

.sprite-chocolate { 
    width: 176px; 
    height: 250px; 
    background-position: -176px 0; 
} 

.sprite-empty { 
    width: 176px; 
    height: 250px; 
    background-position: -352px 0; 
} 

.sprite-strawberry { 
    width: 176px; 
    height: 250px; 
    background-position: -528px 0; 
} 

.sprite-vanilla { 
    width: 176px; 
    height: 250px; 
    background-position: -704px 0; 
}

내가 것 같은 일을하고 싶다면 기본적으로 div 안에 "empty"를 표시하고 div 아래에 텍스트 링크가 있습니다. s를 "초콜릿" "바닐라" "딸기"등으로 바꿉니다. 링크를 클릭하면 스프라이트 위치가 클릭되어 링크 이미지가 반영됩니다.

나는 단지 내가 스프라이트 100 % 새로운 오전과 지금까지 그들을 사용한 적이

... 구글로 검색 할 때 호버에서 이미지 교체를 찾을 수있을 것 같다.

출처

2013-06-26 Meta

스프라이트 이미지는 다음에서 찾을 수 있습니다. http://puu.sh/3orSM.png – Meta

호버에 이미지 세트가 있습니까? –

확실히 당신은 클릭 한 컨트롤에 반응하여 배경이 이동되는 단지 하나의'sprite' 엘리먼트를 원하십니까? 그대로, 모든 컨트롤에는 클래스 "스프라이트"가 있으며 클릭 한 컨트롤에 응답 할 요소가 없습니다. 이것은 틀린 것 같습니다. –

작업을 완료하는 데 Javascript가 필요합니다.

HTML

<body> 
    <div id="tumbler" class="sprite sprite-empty"></div> 
    <a class="flavor" data-flavor="caramel" href="#">Caramel</a> 
    <a class="flavor" data-flavor="chocolate" href="#">Chocolate</a> 
    <a class="flavor" data-flavor="empty" href="#">Empty</a> 
    <a class="flavor" data-flavor="strawberry" href="#">Strawberry</a> 
    <a class="flavor" data-flavor="vanilla" href="#">Vanilla</a>

CSS

.sprite { 
     background-image: url(http://puu.sh/3orSM.png); 
     background-repeat: no-repeat; 
     display: block; 
     width: 176px; 
     height: 250px; 
    } 
    .sprite-caramel { 
     background-position: 0 0; 
    } 
    .sprite-chocolate { 
     background-position: -176px 0; 
    } 
    .sprite-empty { 
     background-position: -352px 0; 
    } 
    .sprite-strawberry { 
     background-position: -528px 0; 
    } 
    .sprite-vanilla { 
     background-position: -704px 0; 
    }

자바 스크립트 -

jQuery를 필요

그리고 물론, demo 데모.

출처

2013-06-26 02:25:36

현재 코드는 스프라이트 만 표시합니다. 내가해야 할 일은 빈 컵 (div 내) 만 표시하고 그 아래에 텍스트 링크가 있기 때문에 "chocolate"을 클릭하면 div의 이미지가 빈 컵에서 채워진 "chocolate"컵으로 바뀝니다 . 마우스를 올리려고하지 않으려 고합니다. 클릭하면 완료됩니다. – Meta

업데이트 된 답변을 참조하십시오. –

데모는 정확히 필요한 방식으로 작동합니다! 내 파일에 제공된 코드를 옮겨서 파이어 폭스에서 테스트 해 보았는데 저장하면 링크가 이미지를 바꾸는 것처럼 보입니다. – Meta

링크를 통한 스프라이트 이미지 대체

답변

관련 문제