programing

jQuery를 사용하여 이미지 원본 변경

shortcode 2022. 9. 25. 15:12
반응형

jQuery를 사용하여 이미지 원본 변경

DOM은 다음과 같습니다.

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

를 src로 .<img src="imgx_off.gif">서 ''는x12.이미지 번호 1 또는 2.이미지 번호 2를 .

이것이 가능한가요?아니면 이미지를 변경하려면 CSS를 사용해야 하나요?

jQuery의 attr() 함수를 사용할 수 있습니다.예를 들어 다음과 같은 경우img태그에는 다음이 있습니다.id'의 속성, 'my_image'의 속성 'my_image'는 할 수.

<img id="my_image" src="first.jpg" alt="Insert link 1 alt text here" />

수 요.srcjQuery를 사용하다

$("#my_image").attr("src","second.jpg");

을 「 」에 하려면 , 「 。clickevent라고쓸 수 요.

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

이미지를 회전시키려면 , 다음의 조작을 실시합니다.

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

이미지 소스를 변경할 때 흔히 저지르는 실수 중 하나는 이미지 크기 성숙 등의 후속 작업을 대기하지 않는 것입니다. jQuery를 ..load()이미지 로드 후 작업을 수행하는 방법.

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

편집 이유 : https://stackoverflow.com/a/670433/561545

이미지를 여러 번 업데이트해도 이미지가 CASHE되고 업데이트되지 않는 경우 마지막에 랜덤 문자열을 추가합니다.

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

자세한 정보는.를 사용하여 를 들어 attr jquery는 attr src입니다.다음 구문을 사용합니다.$("#myid").attr('src', '/images/sample.gif');

이 솔루션은 유용하고 효과적이지만 경로를 변경하면 이미지의 경로도 변경되지만 작동하지 않습니다.

이 문제를 해결하려고 검색했지만 아무것도 찾지 못했습니다.

해서 에 붙이는 이 해결책입니다.$("#myid").attr('src', '\images/sample.gif');

이 속임수는 나에게 매우 유용하고 다른 사람에게도 유용하기를 바란다.

jQuery 또는 기타 자원 킬링 프레임워크가 있는 경우(단순한 트릭을 위해 각 사용자가 다운로드해야 하는 1회당 많은 kb), 네이티브 JavaScript(!)가 있는 경우:

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

이것은 일반적이고 우아하게 쓰여질 수 있습니다.

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

src내의 (HTML 내의 가d1 및 id »c1특정 클래스)...HTML에 이미지가 2개 이상 있는지 확인합니다.

또, 처음에 1개의 이미지만 표시되도록, 문서 준비 후에 페이지를 정리하는 방법도 나타냅니다.

풀코드

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

고장

  1. 이미지를 포함한 링크의 복사본을 만듭니다(주의: 링크의 href 속성을 사용하여 추가 기능을 사용할 수도 있습니다).예를 들어, 각 이미지 아래에 동작하고 있는 링크를 표시합니다).

        var $images = $("#d1 > .c1 > a").clone();  ;

  2. HTML 내의 이미지 수를 확인하고 표시되는 이미지를 추적하는 변수를 만듭니다.

    var $length = $images.length;
var $imgShow = 0;

  3. 첫 번째 이미지만 표시되도록 문서의 HTML을 수정합니다.다른 모든 이미지를 삭제합니다.

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

  4. 이미지 링크를 클릭할 때 처리할 함수를 바인딩합니다.

        $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });

    은 '''를 사용하고 .++$imgShow % $lengthjQuery jQuery 。 ++$imgShow % $length먼저 카운터를 1씩 늘린 다음 이미지 수에 따라 숫자를 조정합니다. 결과 가 계속 합니다.0로로 합니다.length-1$images 는 2, 5,, 100개의 이미지로합니다.즉, 이 코드는 2, 3, 5, 10, 또는 100개의 이미지로 동작합니다.각 이미지를 순서대로 순환하고 마지막 이미지에 도달하면 첫 번째 이미지로 재시작합니다.

    또한 이미지의 "src" 속성을 가져오고 설정하는 데 사용됩니다.여러 요소 중에서 요소를 선택하려면$images 브브,, 정 object를 설정합니다.$images형식을 사용하여 jQuery 컨텍스트로 지정합니다.$(selector, context)그리고 제가 관심 있는 특정 인덱스를 가진 요소만 골랐습니다.

3개의 이미지를 사용한 jsFiddle 예제


도 할 수 요.src을 사용하다
3개의 입니다.

이미지 주위에 있는 앵커 태그의 href를 통합하는 방법은 다음과 같습니다.
examplejsFiddle "

이것이 효과가 있기를 바란다.

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

다음과 같이 id 속성을 이미지 태그에 추가해야 합니다.

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

그런 다음 이 코드를 사용하여 이미지의 소스를 변경할 수 있습니다.

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

다음과 같은 방법으로 jQuery를 사용하여 이 작업을 수행할 수도 있습니다.

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

이미지 소스의 상태가 여러 개일 경우 조건이 있을 수 있습니다.

re captcha 버튼을 호출할 때도 같은 문제가 있었습니다.검색 후, 다음의 기능은, 거의 모든 유명한 브라우저(chrome, Firefox, IE, Edge, ...)에서 정상적으로 동작합니다.

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl'은 새로운 captcha 이미지를 렌더링하는 데 사용되며 이 경우 무시해도 됩니다.가장 중요한 점은 새로운 URL을 생성하여 FF와 IE가 이미지를 다시 렌더링하도록 강제하는 것입니다.

jQuery를 사용하여 합니다.click()

요소:

    <img class="letstalk btn"  src="images/chatbuble.png" />

코드:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

이 기능을 갖춘 코드펜을 만들었습니다.여기에서도 코드에 대한 설명을 드리겠습니다.

코드펜

$(function() {

  //Listen for a click on the girl button
  $('#girl-btn').click(function() {

    // When the girl button has been clicked, change the source of the #square image to be the girl PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/girl.png");
  });

  //Listen for a click on the plane button
  $('#plane-btn').click(function() {

    // When the plane button has been clicked, change the source of the #square image to be the plane PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
  });

  //Listen for a click on the fruit button
  $('#fruits-btn').click(function() {

    // When the fruits button has been clicked, change the source of the #square image to be the fruits PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/fruits.png");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" id="square" />
<div>
  <button id="girl-btn">Girl</button>
  <button id="plane-btn">Plane</button>
  <button id="fruits-btn">Fruits</button>

  <a href="https://homepages.cae.wisc.edu/~ece533/images/">Source of Images</a>
</div>

나도 오늘 같은 의문을 가지고 있어, 나는 이 방법으로 했어:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

이것은 Vanilla(또는 단순히 Pure) JavaScript를 사용하는 확실한 방법입니다.

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

한 가지 추가 사항으로, 더 작게 만들 수 있습니다.

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

짧지만 정확한

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );


let pic=[
  "https://picsum.photos/id/237/40/40", // arbitrary - eg: "img1_on.gif",
  "https://picsum.photos/id/238/40/40", // arbitrary - eg: "img2_on.gif"
];

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

CSS에서는 이미지 소스를 변경할 수 없습니다.

가능한 방법은 Javascript 또는 jQuery와 같은 Javascript 라이브러리를 사용하는 것입니다.

논리-

이미지는 div 안에 있고, div는 없습니다.class또는id그런 이미지로.

따라서 로직은 내부 요소를 선택할 수 있습니다.div이미지가 있는 장소입니다.

그런 다음 루프가 있는 모든 영상 요소를 선택하고 Javascript / jQuery로 영상 src를 변경합니다.

데모 출력 코드 예시 -

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>

언급URL : https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery

반응형
저작자표시

'programing' 카테고리의 다른 글

휴지 상태에 인수 생성자가 필요하지 않은 이유는 무엇입니까?  (0) 2022.09.25
파일 크기를 MB, GB 등으로 포맷  (0) 2022.09.25
부울 모드의 MySQL FullText: 문자열의 일부로 '+'가 포함된 키워드 검색  (0) 2022.09.25
단일 쿼리를 사용하여 여러 날짜 간격당 항목 수 가져오기  (0) 2022.09.25
레이아웃 할당 시 오류: BoxLayout을 공유할 수 없습니다.  (0) 2022.09.25

'programing'의 다른글

  • 현재글jQuery를 사용하여 이미지 원본 변경

관련글

댓글

티스토리툴바