jQuery를 사용하여 이미지를 변경 하시겠습니까?

내가 가리키는 목록 항목에 따라 이미지를 변경하려고합니다.jQuery를 사용하여 이미지를 변경 하시겠습니까?

나는 ul이 들어있는 컨테이너가 있습니다. 세 개의 목록 항목 (작은 가로 탐색)이 있습니다. 목록 항목은 컨테이너 상단에 빈 공간을 남겨두고 있습니다. 나는 위의 빈 공간을 통해 내가 가리키는 항목에 따라 이미지를 변경하고 싶습니다. 3 가지 이미지가 있거나 CSS 스프라이트를 사용하고있을 것입니다.

jQuery에서 이런 일이 발생할 수있는 방법이 있습니까?

출처

2009-07-09 Anonymous

jQuery UI Tabs 플러그인을 사용할 수 있습니다. 조금 지나칠 수는 있지만 작동 할 수 있습니다. 이 같은 대신 호버에있을 탭을 선택하기 위해 사용되는 이벤트를 변경할 수 있습니다

$('.selector').tabs({ event: 'mouseover' });

(나는 시험했는데 작동) 도움이 될 슈퍼 빠른 데모입니다, 분명히 당신이 원하는 것이지만

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 
    <title>Tabs Test</title> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" type="text/css" media="screen" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.js"></script> 
    <script type="text/javascript"> 
     //<![CDATA[ 
     $(function(){ 
      $('#tabs').tabs({ event: 'mouseover' }); 
     }); 
     //]]> 
    </script> 
</head> 
<body> 
    <div id="tabs"> 
     <div id="tabs-1"> 
      <img src="images/image1.jpg" alt="image1" /> 
     </div> 
     <div id="tabs-2"> 
      <img src="images/image2.jpg" alt="image2" /> 
     </div> 
     <div id="tabs-3"> 
      <img src="images/image3.jpg" alt="image3" /> 
     </div> 
     <ul> 
      <li><a href="#tabs-1">Nunc tincidunt</a></li> 
      <li><a href="#tabs-2">Proin dolor</a></li> 
      <li><a href="#tabs-3">Aenean lacinia</a></li> 
     </ul> 
    </div> 
</body> 
</html>

출처

2009-07-10 00:40:44

너트 & 슬레지 해머 스프링. 왜 그가 원하는 걸 탭으로 사용하겠습니까? – redsquare

기본적으로 동일한 기능 (관련 콘텐츠를 숨기거나 표시하기 위해 목록 항목 위에 마우스를 올려 놓음)이기 때문에 특히 지식이 없으면 쉽게 삽입 할 수 있습니다 (특히 이미 사이트에서 jQuery UI를 실행중인 경우). 물론 코드를 게시하지 않았기 때문에 정확한 상황을 알 수 없습니다. 그가 할 수있는 100 가지의 다른 방법이 있습니다. 이것은 단지 하나입니다. 그가 실제로 원하는 방식에 따라 선호하는 방법은 순수한 CSS 솔루션이 될 것입니다. –

HTML :

<div id="container"> 
    <img id="yourImg" src="spacer.gif" width="..." height="..."> 
    <ul id="yourUL"> 
     <li data-imageswap="someimg.png">One</li> 
     <li data-imageswap="another.png">Two</li> 
     <li data-imageswap="andathird.png">Three</li> 
    </ul> 
</div>

스크립트 :

$('li','#yourUL').hover(function(){ 
    $('#yourImg').attr('src',this.getAttribute('data-imageswap')); 
}

자신의 CSS를 사용

data 속성 (예 : className 또는 id) 이외의 다른 것을 사용하여 이미지를 가리킬 수 있지만 그 요지가 있어야합니다.

이미지에 투명도 1x1 gif을 붙이면 시작하는 너비와 높이로 크기를 조절할 수 있습니다. 또는 이미지없이 시작하여 DOM없이 시작할 수 있습니다.

출처

2009-07-10 14:48:01 ajm

jQuery를 사용하여 이미지를 변경 하시겠습니까?

답변

관련 문제