PHP 파일을 만들고 있습니다. 메뉴 바에서 작업하고 있는데, 메뉴 바에는 모든 이미지 버튼이 있습니다. 버튼 중 하나를 가리키면 이미지 (색상)를 바꿀 수 있습니다. 누군가 나를 도와 줄 수 있을까요?PHP : 이미지에 호버 효과 추가
$globalsettings = array(
'src' => $sImageURL.'global1.png',
'alt' => $clang->gT("Global participant settings"),
'title' => $clang->gT("Global participant settings"),
'style' => 'margin-left:5px',
'style' => 'margin-right:1px'
);
CSS (계단식 스타일 시트)를 사용하여 호버 효과를 만들 수 있습니다. CSS는 외부 스타일 시트 또는 포함 스타일 요소에 있어야합니다.
나는 모든 <button> 요소의 스타일을합니다 BUTTON을 사용하고 있습니다,하지만 당신은 당신이 그런 IMG (소문자 또는 대문자)과 <img>으로, 스타일에 원하는 요소로 교체 할 수 있습니다.
BUTTON {
background: url(my_bg.png);
}
BUTTON:hover {
background: url(my_hover_bg.png);
}
당신은 스타일 시트를 사용하는 방법을 모르는 경우, 당신의 HTML 문서의 <head>에 포함 된 스타일을 삽입합니다.
<style type="text/css">
/* Place CSS here */
</style>
원한다면 한 걸음 더 나아가 CSS 스프라이트 (오래된 비디오 게임처럼)를 사용할 수 있습니다. CSS 스프라이트는 하나의 단일 이미지에서 이미지 모음이며 배경 위치의 위치를 변경하기 만하면 효과가 만들어집니다. 이 같은이를 얻을 수 있습니다
#myelement {
background: url(my_bg.png) -0 -0;
}
#myelement:hover {
background: url(my_bg.png) -0 -100px;
}
이 호버 효과의 오래된 학교 방법도 있지만 그들이 FrontPage를 시대처럼, 그래서 내가 그들을 사용하지 않는 것이 좋습니다. CSS 호버 효과는 오늘날의 표준입니다.
한 단계에서 2 가지 문제를 해결하려고합니다. 표시 할 이미지를 가져온 다음 마우스를 올려 놓으면 이미지를 교환해야합니다.
JS에서 버튼을 동적으로 편집 할 수 없습니다 (괜찮습니다. 캔버스와 HTML 5로 할 수 있지만 그다지 중요하지 않습니다). 따라서 CSS (또는 JS)를 사용하여 2 개의 이미지를 교환해야합니다.
이미지의 출처는 당신에게 달려 있습니다. 약간 앞면이지만 미리 구현하기 쉽고 PHP는 필요하지 않습니다. 하나 또는 두 가지 색상의 변형이있는 경우이 옵션을 사용하는 것이 좋습니다.
다른 방법으로는 이미지를 즉석에서 생성하는 PHP 스크립트를 사용할 수 있습니다 (이상적으로는 캐시하여 나중에 다시 계산하지 않아도됩니다). 이는 무한 변형을 허용하지만 서버에 더 많은 오버 헤드가 필요합니다. 이 방법은 원본 이미지를 미리 알 수 없으므로 일반적으로 축소판을 생성하는 데 사용됩니다.
PHP는 각 이미지가 표시되는 시점을 제어 할 수 없으므로 다음과 같은 방식으로 CSS/JS에 이미지를 제공합니다. 웹 서버는 정적 이미지를 제공합니다. 선택기를 : 당신은 PHP에서 이미지를 편집하려면
, 당신은 당신이 내용을 사용하여 아주 쉽게이 작업을 수행하기 위해 CSS를 사용할 수있는 GD+ library
볼 필요가있다.
<div class="link" id="link1">
<a href="yourhref"><img /></a>
</div>
을하고, CSS는 무언가 같이 될 것이다 :
예를 들어, 마크 업은 다음과 같이 나타납니다 당신이 당신의 스크립트에 할당하는 선택기를 사용하여
#link1 a img{
content:url("http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg");
}
#link1:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}
, 당신이 그것을 찾아야한다 당신의 필요에 맞게 이것을 쉽게 수정할 수 있습니다. 여기
나는 이해하지만 나는 DIV를 $ home으로 만들지는 못한다. $ globalsettings는 이미 할당되어있다. –
당신은 스프라이트 이미지 및 변경 위치 onhover을 사용할 수 있습니다 보여주는 작업 바이올린입니다. 또한 성능의 이점을 얻을 수 있습니다.
[CSS 스프라이트] (http://css-tricks.com/css-sprites/) – HamZa
PHP는 이것을 처리하지 않습니다 ... CSS 또는 자바 스크립트가이 작업에 더 적합 할 것입니다. 배경색을 바꿀 수 있도록 CSS를'hover' 할 수 있습니다. – aug
이미지 일 때 어떻게 배경색을 바꿀 수 있습니까? 대답 전에 읽으십시오. –