CSS / HTML로 마우스 오버시 이미지 변경
마우스를 가리킬 때 다른 이미지를 표시하도록 이미지를 설정했지만 첫 번째 이미지가 여전히 나타나고 새 이미지가 높이와 너비를 변경하지 않고 다른 이미지와 겹치는이 문제가 있습니다. 나는 여전히 HTML / CSS를 처음 접하기 때문에 간단한 것을 놓쳤을 수도 있습니다. 다음은 코드입니다.
<img src="LibraryTransparent.png" id="Library">
#Library {
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
}
한 가지 해결책은 다음과 같이 첫 번째 이미지를 배경 이미지로 사용하는 것입니다.
<div id="Library"></div>
#Library {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
}
호버 이미지의 크기가 다른 경우 다음과 같이 설정해야합니다.
#Library:hover {
background-image: url('LibraryHoverTrans.png');
width: [IMAGE_WIDTH_IN_PIXELS]px;
height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
또 다른 옵션은 JS를 사용하는 것입니다.
<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />
제가 일반적으로하는 일은 두 가지 상태의 이중 이미지를 만들어서 원본 요소의 배경으로 사용하는 2 프레임 필름처럼 작동하여 요소의 너비 / 높이가 픽셀 단위로 설정되도록하는 것입니다. 이미지의 절반 만. 그런 다음 호버 상태가 정의하는 것은 기본적으로 "다른 프레임을 표시하도록 필름을 이동"입니다.
예를 들어 이미지가 회색 Tux 여야하고 마우스를 올리면 화려한 Tux로 변경해야한다고 상상해보십시오. 그리고 "호스팅"요소는 ID가 "tuxie"인 범위입니다.
- 두 개의 Tuxes (하나는 컬러, 다른 하나는 회색)로 50 x 25 이미지를 만듭니다.
- 그런 다음 이미지를 25 x 25 범위의 배경으로 할당하고
- 마지막으로 배경을 25px 왼쪽으로 이동하도록 호버를 설정합니다.
최소한의 코드 :
<style>
#tuxie {
width: 25px; height: 25px;
background: url('images/tuxie.png') no-repeat left top;
}
#tuxie:hover { background-position: -25px 0px }
</style>
<div id="tuxie" />
그리고 이미지 :
장점은 다음과 같습니다.
두 프레임을 하나의 파일에 넣으면 한 번에로드됩니다. 이렇게하면 다른 프레임이 즉시로드되지 않을 때 느린 연결에서 발생하는 추악한 결함이 방지되므로 첫 번째 호버링이 제대로 작동하지 않습니다.
"페어링 된"프레임이 혼동되지 않기 때문에 이러한 방식으로 이미지를 관리하는 것이 더 쉬울 수 있습니다.
Javascript 또는 CSS 선택기를 스마트하게 사용하면이를 확장하고 하나의 파일에 더 많은 프레임을 포함 할 수 있습니다.
이론적으로는 단일 파일에 여러 개의 버튼을 넣고 좌표에 따라 표시를 제어 할 수 있지만 이러한 접근 방식은 빠르게 벗어날 수 있습니다.
이것은 backgroundCSS 속성 으로 빌드 되었으므로 실제로 <img />s 와 함께 사용해야하는 경우 배경과 겹치므로 속성을 설정 하지 않아야합니다 src. (여기에서 투명도를 현명하게 사용하면 흥미로운 결과를 얻을 수 있지만 아마도 엔진의 품질과 이미지의 품질에 크게 좌우 될 것입니다.)
사용 content:
#Library {
height: 70px;
width: 120px;
}
#Library:hover {
content: url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
height: 70px;
width: 120px;
}
.hover_image:hover {text-decoration: none} /* Optional (avoid undesired underscore if a is used as wrapper) */
.hide {display:none}
/* Do the shift: */
.hover_image:hover img:first-child{display:none}
.hover_image:hover img:last-child{display:inline-block}<body>
<a class="hover_image" href="#">
<!-- path/to/first/visible/image: -->
<img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_silverstone_2016.jpg" />
<!-- path/to/hover/visible/image: -->
<img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_malasia_2016.jpg" class="hide" />
</a>
</body>이 Rashid의 좋은 대답을 개선하기 위해 몇 가지 의견을 추가하고 있습니다.
트릭은 교체 할 이미지의 래퍼 (이번에는 'a'태그이지만 다른 태그 일 수도 있음)에 대해 수행되므로 'hover_image'클래스가 거기에 배치되었습니다.
장점 :
두 이미지 URL을 같은 위치에 함께 보관하면 변경해야하는 경우 도움이됩니다.
이전 네비게이터에서도 작동하는 것 같습니다 (CSS2 표준).
자명하다.
호버 이미지는 미리로드되어 있습니다 (호버 후 지연 없음).
이전의 모든 답변의 문제는 호버 이미지가 페이지와 함께로드되지 않아 브라우저가 호출 할 때로드하는 데 시간이 걸리고 모든 것이 제대로 보이지 않는다는 것입니다.
내가하는 일은 원래 이미지와 호버 이미지를 1 요소에 넣고 처음에는 호버 이미지를 숨기는 것입니다. 그런 다음 마우스 오버시 마우스 오버 이미지를 표시하고 이전 이미지를 숨기고 마우스 오버시 반대의 작업을 수행합니다.
HTML :
<span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')">
<img src="stylesheets/images/bell.png" class=bell col="g">
<img src="stylesheets/images/bell_hover.png" class=bell style="display:none" col="b">
</span>
자바 스크립트 / jQuery :
function hvr(dom, action)
{
if (action == 'in')
{
$(dom).find("[col=g]").css("display", "none");
$(dom).find("[col=b]").css("display", "inline-block");
}
else
{
$(dom).find("[col=b]").css("display", "none");
$(dom).find("[col=g]").css("display", "inline-block");
}
}
이것은 나에게 가장 쉽고 효율적인 방법입니다.
컨테이너 div에 대한 배경 이미지를 변경할 필요없이 HTML IMG의 이미지를 바꿀 수 있습니다.
이것은 CSS 속성을 사용하여 얻을 수 있습니다 box-sizing: border-box;( <IMG>매우 효율적 으로 일종의 호버 효과를 적용 할 수 있습니다.)
이렇게하려면 이미지에 다음과 같은 클래스를 적용하십시오.
.image-replacement {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */
width: 180px;
height: 236px;
padding-left: 180px;
}
샘플 코드 : http://codepen.io/chriscoyier/pen/cJEjs
원본 기사 : http://css-tricks.com/replace-the-image-in-an-img-with-css/
이것이 "호버"효과가있는 이미지를 얻기 위해 div를 넣기를 원하지 않는 일부 여러분에게 도움이되기를 바랍니다.
여기에 샘플 코드 게시 :
HTML :
<img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement">
jQuery :
$("#myImage").mouseover(function () {
$(this).attr("class", "image-replacement");
});
$("#myImage").mouseout(function () {
$(this).attr("class", "ClassBeforeImage-replacement");
});
CSS를 사용하여 이미지 SRC 속성을 변경할 수 없습니다 (브라우저가 지원하지 않는 한). hover 이벤트와 함께 jQuery를 사용할 수 있습니다.
$("#Library ").hover(
function () {
$(this).attr("src","isHover.jpg");
},
function () {
$(this).attr("src","notHover.jpg");
}
);
img태그를 div로 변경하고 CSS에서 배경을 제공합니다.
이 바이올린을 확인
귀하의 경우 이미지 경로가 잘못되었을 수 있습니다.
구문이 맞아 보인다
background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');
문제는 'src'속성을 통해 첫 번째 이미지를 설정하고 마우스 오버시 이미지에 배경 이미지를 추가한다는 것입니다. 이 시도:
HTML 사용 :
<img id="Library">
그런 다음 CSS에서 :
#Library {
height: 70px;
width: 120px;
background-image: url('LibraryTransparent.png');
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
}
당신이하는 방식에서는 일어나지 않을 것입니다. 원본 이미지에 의해 차단되는 이미지의 배경 이미지를 변경하고 있습니다. 높이와 너비도 변경되지 않습니다. 이미지의 src 속성을 변경하려면 Javascript 또는 jQuery와 같은 Javascript 라이브러리가 필요합니다. 그러나 이미지를 간단한 div (텍스트) 상자로 변경하고 div 상자 자체가 비어있는 경우에도 마우스를 올리면 배경 이미지가 변경되도록 할 수 있습니다. 방법은 다음과 같습니다.
<div id="emptydiv"></div>
#emptydiv {
background-image: url("LibraryHover.png");
height: 70px;
width: 120px;
}
#emptydiv:hover {
background-image: url("LibraryHoverTrans.png");
height: 700px;
width: 1200px;
}
나는 이것이 당신이 요구하는 것이기를 바랍니다 :)
모든 사람이 background-image 옵션을 사용하여 대답하면 하나의 속성이 누락됩니다. 높이와 너비는 이미지의 컨테이너 크기를 설정하지만 이미지 자체의 크기는 조정하지 않습니다. 이 컨테이너에 맞게 이미지를 압축하거나 늘리려면 background-size가 필요합니다. 나는 '우수 답변'의 예를 사용했습니다.
<div id="Library"></div>
#Library {
background-image: url('LibraryTransparent.png');
background-size: 120px;
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
}
그들 중 하나를 시도
<img src='images/icons/proceed_button.png' width='120' height='70' onmouseover="this.src='images/icons/proceed_button2.png';" onmouseout="this.src='images/icons/proceed_button.png';" />
또는 이미지를 양식의 버튼으로 사용하는 경우
<input type="image" id="proceed" src="images/icons/proceed_button.png" alt"Go to Facebook page" onMouseOver="fnover();"onMouseOut="fnout();" onclick="fnclick()">
function fnover()
{
var myimg2 = document.getElementById("proceed");
myimg2.src = "images/icons/proceed_button2.png";
}
function fnout()
{
var myimg2 = document.getElementById("proceed");
myimg2.src = "images/icons/proceed_button.png";
}
내 jquery 솔루션.
function changeOverImage(element) {
var url = $(element).prop('src'),
url_over = $(element).data('change-over')
;
$(element)
.prop('src', url_over)
.data('change-over', url)
;
}
$(document).delegate('img[data-change-over]', 'mouseover', function () {
changeOverImage(this);
});
$(document).delegate('img[data-change-over]', 'mouseout', function () {
changeOverImage(this);
});
및 html
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />
데모 : JSFiddle 데모
문안 인사
라이브 예제 : JSFiddle
Accepted answer에 문제가 있습니다. 이미지 크기가 조정되지 않았습니다. 이미지 크기를 조정하려면 background-size 속성을 사용하십시오.
HTML :
<div id="image"></div>
CSS :
#image {
background-image: url('image1');
background-size: 300px 390px;
width: 300px;
height:390px;
}
#image:hover{
background: url("image2");
background-size: 300px 390px;
}
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}<body>
<a class="foo" href="#">
<img src="http://lojanak.com/image/9/280/280/1/0" />
<img src="http://lojanak.com/image/0/280/280/1/0" />
</a>
</body>내가 권장하는 것은 가능한 경우 CSS 만 사용하는 것입니다. 내 솔루션은 다음과 같습니다.
HTML :
<img id="img" class="" src="" />
CSS :
img#img{
background: url("pictureNumberOne.png");
background-size: 100px 100px;
/* Optional transition: */
transition: background 0.25s ease-in-out;
}
img#img:hover{
background: url("pictureNumberTwo.png");
background-size: 100px 100px;
}
That (not defining the src attribute) also ensures that transparent images (or images with transparent parts) are shown correctly (otherwise, if the second pic would be half-transparent, you would also see parts of the first picture).
The background-size attribute is used to set the height and width of a background-image.
If (for any reason) you don't want to change the bg-image of an image, you could also put the image in a div-container as following:
HTML:
<div id="imgContainer" class="">
<img id="" class="" src="" />
</div>
... and so on.
Just use Photoshop and create two of the same image, the 1st one being how you want it to look, the 2nd being how you want it to look when it's hovered over. I'm wrapping the image in an <a> tag, because I'm assuming that it's what you want. For this example I'm doing a facebook icon which is desaturated, but when hovered over it will show the blue color of facebook.
<a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>
Here is the simple trick. Just copy and paste it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
.card {
width: 130px;
height: 195px;
background: url("../images/card-back.jpg") no-repeat;
margin: 50px;
}
.card:hover {
background: url("../images/card-front.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
I had a similar problem.
With my button defined like:
<button id="myButton" class="myButtonClass"></button>
I had the background styling like this:
#myButton{ background-image:url(img/picture.jpg)}
.myButtonClass{background-image:url(img/picture.jpg)}
.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}
When I switched it to:
#myButton{}
.myButtonClass{background-image:url(img/picture.jpg)}
.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}
The hover over feature worked just fine.
(not addressing other attributes like size and position of image or of container, just the background image changing)
참고URL : https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html
'IT TIP' 카테고리의 다른 글
| jQuery 테이블 행의 각 루프 (0) | 2020.10.27 |
|---|---|
| iOS의 모든 연락처 목록 가져 오기 (0) | 2020.10.27 |
| Angular 표현식에서 문자열을 Int로 구문 분석하려면 어떻게해야합니까? (0) | 2020.10.27 |
| phpmyadmin에서 대용량 SQL 파일을 가져 오는 방법 (0) | 2020.10.27 |
| LIKE를 사용한 Spring JPA @Query (0) | 2020.10.27 |