마우스오버 첨부파일 채택완료

2년 전 조회 2,165

갤러리 썸네일 마우스오버 이벤트인데요

첨부파일1번이 리스트 썸네일 첫 이미지고 마우스오버 시 첨부파일2번이 되고 싶은데

저리 하니 안되더라고요~

무얼 더 넣어야할까요?

디자이너입니다~

 

Copy
<picture class="thumb">
    <div class="gall_chk chk_box">
    <?php if ($is_checkbox) { ?>
    <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" class="selec_chk">
    <!--<label for="chk_wr_id_<?php echo $i ?>">
    <span></span>
    <b class="sound_only"><?php echo $list[$i]['subject'] ?></b>
    </label>-->

    <?php } ?>
    <span class="sound_only">
    <?php
    if ($wr_id == $list[$i]['wr_id'])
        echo "<span class=\"bo_current\">열람중</span>";
    else
    //    echo $list[$i]['num'];
     ?>
    </span>
    </div>
    <?php
    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);

    if($thumb['src']) {

    //오리지널
    //$img_content = '<img src="'.$thumb['ori'].'" alt="'.$thumb['alt'].'" >';

    $img_content =  '<img src="'.$file[1]['path'].'/'.$file[1]['file'].'" onmouseover="'.$file[2]['path'].'/'.$file[2]['file'].'" onmouseout="'.$file[1]['path'].'/'.$file[1]['file'].'" >';

    //오버이벤트
    //$img_content = '<img src="'.$list['file'][1]['path'].'/'.$list['file'][1]['file'].'" alt="'.$thumb['alt'].'"  onmouseover="'.$list['file'][2]['path'].'/'.$list['file'][2]['file'].'" //onmouseout="'.$list['file'][1]['path'].'/'.$list['file'][1]['file'].'" alt="" class="thumb">';


    } else {
    $img_content = '<span class="no_image" style="'.$line_height_style.'">no image</span>';
    }

    echo run_replace('thumb_image_tag', $img_content, $thumb);
    ?>        


</picture>

답변 2개

채택된 답변
+20 포인트

마우스 오버나 아웃의 효과는 자바스크립트 및 jquery의 기능입니다.

그저 단순히 이미지만 넣지 마시고  함수를 만드셔서 함수에서 

<img src="첨부1" id="p1"><input type="hidden" value="첨부2" id="p2">

<script>

$('#p1').over(function(){

    $('#p1').attr('src', $('#p2').val());

});

그저 말씀하신데로 단순한 방식입니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

디자이너라 함수 만들 줄 몰라요 ㅠㅜㅠ

댓글을 작성하려면 로그인이 필요합니다.

https://sir.kr/g5_skin/30777

이 스킨을 토대로 수정해서 작업해보세요.

 

위 예제응용이 어려우시다면 의뢰로 가시면됩니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고