css 또는 js 고정 된 이미지 롤오버가 "배경에 붙임"효과를 사용하여 창 크기를 조정합니다.

Question

나는 100 % 작동 결과없이 며칠 동안 이것을 만들려고했습니다. 내 웹 사이트에 5 개의 앵커 이미지 롤오버 (nav 메뉴 용)를 만들고 싶습니다. 지금까지 12 개의 튜토리얼을 끝내야합니다. 그들 중 일부는 js를, 다른 사람들은 css를 추천했습니다. 이들 모두는 대부분 문제를 야기했다. 가장 보편적 인 문제는 기능적 이미지 롤오버를 만들고 CSS를 사용하여 위치를 지정할 때 브라우저의 크기를 조정할 때 이미지의 나머지 부분과 비례하여 위치를 변환하지 않습니다 (배경에 붙인 효과가 있음). 창문. 기본적으로 나는 모든 이미지 (롤오버 포함)에 "배경에 붙인"효과를주기를 원합니다.

제가 지금 원하는 것은 가장 가까운 효과입니다. firefox에서 마우스 오버가 이미지의 상위 25 %를 가리키고 "배경에 붙인"효과가 작동하지 않는 경우에만 롤오버가 작동합니다. 크롬에서는 고정 된 롤오버 이미지가 제대로 작동하지만 '배경에 붙인'효과는 작동하지 않습니다. 여기 코드는 다음과 같습니다

#news { 
position:relative; 
left:180px; 
bottom:450px; 
width:210px; 
height:67px; 
} 


<div id="news" align="center"> 
<a href="news.html" 
onmouseover="document.news.src='newsRO.png'" 
onmouseout="document.news.src='news.png'"> 
<img src="news.png" name="news" width="210px" height="67"/> 
</a> 
</div> 

여기 살아있는 예에 대한 링크입니다 : http://www.scissormanmusic.com/index_new2.html 분명히 난 여전히 사이트의 다른 요소들과 함께해야 할 위치 & 컨텐츠 개발의 많은있다 . 하지만 일단 제대로 작동하려면 메뉴를 얻을 수있는 적절한 장소에서 그들을 얻을 수 있어야합니다 ... 내 생각 엔 ...

주십시오. 어떤 통찰력이라도 대단히 감사하겠습니다. 고맙습니다!!

Answer 1

더 이상 코드를 보여? 실례가 있습니까? 추측으로

: 시도 display:block 당신의 앵커 여기