swapImage {src : 'image2.jpg'}이 (가) Rails 3.1에서 응답하지 않습니다.

Question

2.3에서 3.2로 Rails 앱을 업그레이드하는 중이지만 지금은 3.1에 머물러 있습니다.

저는 현재 이미지 파일 이름에 대한 참조를 자산 파이프 라인과 함께 작동하는 구문으로 변환하는 데 어려움을 겪고 있습니다. 이 문제에 대한 도움이 필요한 주요 장소는 버튼 롤오버 swapImage 문입니다. 다음은 그 예입니다 :

<%= image_submit_tag "signin.jpg", {:class => "swapImage { src: '#{image_path('signinHover.jpg')}' }" %> 

이것은 개발 중입니다. 그러나 프로덕션 환경에이 코드를 배포하면 롤오버가 여전히 작동하지 않습니다. 롤오버 응답이 전혀 없습니다.

<input class="swapImage {src: &#x27;/assets/signinHover.jpg&#x27;}" src="/assets/signin.jpg" type="image" /> 

나는 이것이 내 문제의 일부가 될 수 같은데요 : 나는 소스를 볼 때 또한, 작은 따옴표는 여전히 탈출 나타납니다.

자산 파이프 라인을 사용하여 javascript/jquery 자산을 올바르게로드하지 않는지 궁금합니다. 하지만 https://staging.genlighten.com/assets/application.js을 확인하면 swapImage 코드가 제대로 표시됩니다.

나는 Rails 3.1에서 자산 파이프 라인에 의해 제공되는 이미지에 대한 적절한 구문을 사용하여 swapImage를 올바르게 구현하는 방법에 대해 조언 해 주시면 감사하겠습니다. 또는 대신 사용해야하는 롤오버 단추 이미지에 대한 더 나은 접근법이 있습니까?

덕분에 매우 사물의

딘 리처드슨 Genlighten.com

Answer 1

커플은 여기에 고정 필요가 없다. 먼저 입력 태그에 src 속성이 있습니다. 그 두 가지는 섞이지 않습니다. CSS로 입력을 스타일링하거나 이미지 요소를 어딘가에 넣어서이 작업을 수행해야합니다.

이미지 전환 효과가 나타나므로 CSS 스프라이트를 사용하는 것이 좋습니다. 브라우저가 내용을로드 할 때까지 버튼이 이 완전히 사라질 때까지이 사라 지므로 마우스를 대상 위에 올려 놓으면 이미지가로드됩니다.

체크 아웃 천만 bajillion의 CSS 스프라이트 중 하나가이 일 (나는 GOOG에서 발견 첫 번째)처럼, 거기 자습서 : 이제

http://css-tricks.com/css-sprites/

. 당신이 태그에 자신을 다른 소스를 넣고 호버에 그로드에 설정하는 경우, 당신은 데이터 속성에 넣어 제안 :

<img class="swapImage" data-image-swap="{src: &#x27;/assets/signinHover.jpg&#x27;}" src="/assets/signin.jpg" /> 

참고이 이미지 태그가 아닌 입력합니다. 입력을 어딘가에 추가해야합니다 :/

출력 할 코드를 게시 할 수 있습니까? 또한 swapImage() 메서드를 포함 시켜서 볼 수 있습니다.

다시 말하지만, 호버 효과를 발생 시키려면 javascript를 사용하는 것이 나쁜 실습입니다. 나는 네가 스프라이트를 가지고 가도록 적극 권할 것이다.

높음. :)