css를 사용하여 마우스를 가리키면 이미지를 즉시 변경하는 방법

Question

안녕하세요. 마우스를 가져 가면 내 웹 사이트에서 흑백 이미지가 필요합니다. 이미지를 즉시 변경해야합니다. 나중에 처음으로 이미지를 변경하는 데 시간이 걸립니다. 그것은 즉시 이미지를 바꾸고 있습니다.

코드 :

<div id="content"> 
    <img src="<?php echo base_url();?>theme/images/expertise/1.png" class="images1" onmouseover="this.src='<?php echo base_url();?>theme/images/1.png'" onmouseout="this.src='<?php echo base_url();?>theme/images/expertise/1.png'" /> 
    <img src="<?php echo base_url();?>theme/images/expertise/2.png" class="images2" onmouseover="this.src='<?php echo base_url();?>theme/images/2.png'" onmouseout="this.src='<?php echo base_url();?>theme/images/expertise/2.png'"/> 
</div> 

CSS는

#content { 
    margin-top: 21px; 
    margin-bottom: 57px; 
} 
.images1,.images2 { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-property: transform; 
    transition-property: transform; 
} 
.images1:hover, 
.images1:focus, 
.images1:active, 
.images2:hover, 
.images2:focus, 
.images2:active 
    { 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
    } 

Answer 1

추가 프리 로더 스크립트는

<script type="text/javascript"> 
function preload(arrayOfImages) { 
var ImageContainer ="<div style='display:none;'>"; 
$(arrayOfImages).each(function(){ 
ImageContainer += "<img src='"+this+"''>"; 
}); 

ImageContainer +="</div>"; 
$(".ourexpertise").append(ImageContainer); 

} 
// Usage: 
var arrayOfImages =[ 
'http://www.example.com/theme/images/1.png', 
'http://www.example.com/theme/images/2.png', 
'http://www.example.com/theme/images/3.png' 
]; 
$(document).ready(function(){ 
preload(arrayOfImages); 
}); 
</script> 

Answer 2

가장 쉬운 방법은 하나 개의 파일에 모두 사진을 들고 이미지를 만드는 것입니다. 그러면 원하는 크기의 div와 이미지를 배경으로 사용합니다.

위치를 정의하면 첫 번째 그림이 보이고 다른 그림은 보이지 않습니다.

마우스를 올리면 위치가 변경되어 다른 그림이 표시됩니다. 당신은 URL의를 조정하지만,이 당신을 위해 작동하는지 알려해야합니다 CSS hover image position change

Answer 3

:

여기에 상대적으로 비슷한 질문입니다. header.php에서

.images1,.images2 { 
 
    display: block; 
 
    vertical-align: middle; 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
 
    transition: transform .3s ease; 
 
    will-change: transform; 
 
    margin-bottom: 20px; 
 
} 
 
.images1:hover, 
 
.images1:focus, 
 
.images1:active, 
 
.images2:hover, 
 
.images2:focus, 
 
.images2:active 
 
    { 
 
    transform: scale(1.1); 
 
    }

<div id="content"> 
 
    <img src="http://placehold.it/350x100/ffffff" class="images1" onmouseover="this.src='http://placehold.it/350x100/003500'" onmouseout="this.src='http://placehold.it/350x100/ffffff'" /> 
 
    <img src="http://placehold.it/350x100/ffffff" class="images2" onmouseover="this.src='http://placehold.it/350x100/003500'" onmouseout="this.src='http://placehold.it/350x100/ffffff'"/> 
 
</div>