2012-11-22 1 views
3

나는이 전문가가 아니므로 매우 기본적인 것이지만 답을 찾지 못했습니다.사이트의 기본 이미지로 되돌아가는 다른 위치에서 onmouseover로 이미지를 변경하는 방법은 무엇입니까?

페이지의 왼쪽에 범주가있는 탐색 섹션이 필요합니다. 각 카테고리는 서로 다른 사이트이며, 각 사이트마다 고유 한 이미지가 있습니다. 예. category1.htm에는 defaultpic1.jpg가 있고 범주 2.htm에는 defaultpic2.jpg가 있습니다.

nav 섹션의 category2 링크를 클릭하면 현재 사이트의 기본 이미지를 기본 이미지로 변경하기를 원합니다. category2, 그리고 onmouseout으로 되돌립니다. 기본으로 돌아가고 싶습니다.

또한 이미지의 크기, 높이 값이 다릅니다.

기본적으로 모든 페이지에서 defaultpic 소스를 변경할 수 있지만 항상 기본 경로를 찾고 모든 라인을 변경할 필요없이 동일한 스크립트를 사용하고 싶습니다. 범주.

미안하지만 나는 그것에 대해 아주 분명하지 않지만 최선을 다합니다.

내가 (그래서 난 그냥 도움이 필요한 붙여 다른 제거 다)이 있습니다

<html> 
<head> 
<script type="text/javascript"> 
      function mouseOverImage2() 
{ 
    document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';; 
} function mouseOverImage3() 
{ 
    document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';; 
} 
function mouseOutImage() 
{ 
    document.getElementById("catPic").src='???'; //here's what I don't know what to put 
} 
</script> 
</head> 
<body> 
<div class="nav"> 
      <ul> 
       <li><a href="subcategory2.htm" onmouseover="mouseOverImage2()" 
    onmouseout="mouseOutImage()">Subcategory One</a></li> 
       <li><a href="subcategory3.htm" onmouseover="mouseOverImage3()" 
    onmouseout="mouseOutImage()">Subcategory 2</a></li></ul> 
</div> 
<div> 
       <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt=""> 
      </div> 
</body> 
</html> 

답변

2

내가 데이터 - * 속성의 모든 값을 숨길 것, 그래서 동일한 기능을 다시 사용할 수 있습니다 함께. 예를 들어 , 당신이 완전히 HTML에서 자바 스크립트를 분리해서 수 있다는 뜻으로 또한, * 속성에 자바 스크립트에 청취자를 부착보다는 을 사용하는 것이 좋습니다

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"/> 
     <title>Cats</title> 
     <script type="text/javascript"> 
function mouseOverImage(elm) { 
    var img = document.getElementById("catPic"); 
    img.src = elm.getAttribute('data-cat-image'); 
    img.style.width = elm.getAttribute('data-cat-width'); 
    img.style.height = elm.getAttribute('data-cat-height'); 
} 
function mouseOutImage() { 
    var img = document.getElementById("catPic"); 
    img.src = img.getAttribute('data-default-image'); 
    img.style.width = img.getAttribute('data-default-width'); 
    img.style.height = img.getAttribute('data-default-height'); 
} 
     </script> 
    </head> 
    <body> 
     <div class="nav"> 
      <ul> 
       <li><a href="subcategory2.htm" 
         data-cat-image="images/defaultpic2.jpg" data-cat-width="280px" data-cat-height="420px" 
         onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()" 
         >Subcategory One</a></li> 
       <li><a href="subcategory3.htm" 
         data-cat-image="images/defaultpic3.jpg" data-cat-width="280px" data-cat-height="226px" 
         onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()" 
         >Subcategory 2</a></li> 
      </ul> 
     </div> 
     <div> 
      <img id="catPic" src="images/defaultpic1.jpg" alt="" 
       data-default-image="images/defaultpic1.jpg" data-default-width="280px" data-default-height="420px" 
       width="280" height="420" 
       /> 
     </div> 
    </body> 
</html> 

.

+0

고마워, 정말 재미있어 보이고 잘 작동한다! 나는 정말 나쁜 코더이지만 청중에 대한 의미가 뭔지 모르지만 당신의 도움에 감사드립니다. – Seb

+0

이벤트 리스너 [여기] (https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener)를 읽을 수 있습니다. 같은 이벤트에 대해 여러명의 청취자를 가질 수 있기 때문에 당신이 전에 그들을 만나지 않았다면 꽤 재미있을 것입니다. :) –

1

당신이 mousein의 기본 이미지 소스를 멀리 숨기고 다음로 마우스에 복원 할 수

<script type="text/javascript"> 
function mouseOverImage2() 
{ 
    if(typeof(document.getElementById("catPic").defaultSrc) == "undefined") 
     document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src; 
    document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';; 
} 
function mouseOverImage3() 
{ 
    if(typeof(document.getElementById("catPic").defaultSrc) == "undefined") 
     document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src; 
    document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';; 
} 
function mouseOutImage(e) 
{ 
    if(typeof(document.getElementById("catPic").defaultSrc) != "undefined") 
     document.getElementById("catPic").src= document.getElementById("catPic").defaultSrc; 
} 
</script> 
+0

고맙지 만이 이미지는 원본 이미지 크기를 사용하지 않으며 onmouseout에서 기본 이미지는 onmouseover로 대체 된 크기로 축소 또는 확대됩니다. – Seb

2

당신은 글로벌 사용, 예를 들어, 어딘가에 오래 된 이미지 임시 변수에 SRC, 또는 요소를 저장해야합니다

var originalImage; 
function mouseOverImage2() 
{ 
    originalImage = document.getElementById("catPic").src; 
    ... 

그리고 밖으로 마우스를 복원

document.getElementById("catPic").src=originalImage; 

편집

을 당신이 많은 같은 방법으로 다른 속성 (높이, 폭)를 캐시 할 수 있습니다. 한 가지주의해야 할 점은 구식 html height과 속성을 스타일의 높이와 너비와 섞지 않는 것입니다. 혼란을 야기 할 수 있습니다.

나는 바이올린 here

+0

정말이 접근법이 마음에 들지만 작동하도록하려면 모든 너비와 높이 값을 삭제해야했습니다. 그렇지 않으면 마우스를 올리면 이미지가 다른 경우 (되돌아온) 기본 이미지가 축소되거나 확대되어 표시되기 때문입니다. 코드에 너비와 높이 값을 계속 유지할 수 있습니까? 나는 유효한 매개 변수없이 의 유효성을 검사 할 사이트를 고려하여 유효한 페이지가 만들어지지 않습니다. 도움을 주셔서 감사합니다. – Seb

+0

@ user1844914 - 필자는 너비 + 높이를 유지하기 위해 바이올린을 업데이트했습니다. 이전 html 속성이 아닌 css 스타일 너비 + 높이를 사용하는 것이 좋습니다. – StuartLC

+0

멋진 직장! 감사! – Seb

1

에게 위의 단 하나 개의 기능을 사용하지 않고 매개 변수로 어떤 요소를 통과 장기적으로 쉬울 수 있습니다에 추가를 업데이트했습니다. 이 라인

<html> 
    <head> 
    <script type="text/javascript"> 
     function mouseOverImage(elementNo){ 
document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg';document.images['catPic'].style.width='280px';  document.images['catPic'].style.height='420px';; 
    } 

    function mouseOutImage(elementNo){ 
     document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg'; //here's what I don't know what to put 
    } 
</script> 
</head> 
<body> 
<div class="nav"> 
      <ul> 
       <li><a href="subcategory2.htm" onmouseover="mouseOverImage(2)" 
onmouseout="mouseOutImage(1)">Subcategory One</a></li> 
       <li><a href="subcategory3.htm" onmouseover="mouseOverImage(3)" 
onmouseout="mouseOutImage(1)">Subcategory 2</a></li></ul> 
</div> 
<div> 
     <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt=""> 
     </div> 

</body> 
</html> 
+0

도움을 주셔서 감사합니다. 그러나 크기가 다른 이미지가 있으며 잘 작동하지 않습니다. – Seb

+0

mouseOverImage (elementNo, imgWidth, imgHeight) { 당신의 코드를 장기간에 걸쳐 훨씬 깨끗하게 유지할 수 있습니다. – Taff

+0

글쎄 그것은 깨끗해 보입니다. 그러나 나는 내 요구에 맞게 수정하기에는 너무 바보 같아요. 내 이미지의 이름이 defaultpic1.jpg, defaultpic2.jpg가 아니지만 pricing.jpg, contact.jpg 등과 같고 높이 값이 다른 경우 어떻게해야합니까? 그러면 코드는 어떻게 생겼을 까? 숫자가 바뀌면서 이미지의 이름이 비슷한 경우 사용자의 접근 방식이 좋다고 믿지만 그렇지 않은 경우 가능합니까? – Seb

관련 문제