Change Src in jQuery / src 경로를 변경해주는 제이쿼리 함수
<body>
<!--이미지를 저장할때 On, Off를 파일명에 포함하여 저장한다.-->
<img src="./img/typeA/arrowOff.jpg" class="arrowOff">
<img src="./img/typeA/arrowOn.jpg" class="arrowOn">
</body>
<script>
$(document).ready(function(){
/*미리 함수 만들어 놓기*/
function onSrc(a){
a.attr('src').replace('Off','On');
}
function offSrc(b){
var srcOff = b.attr('src').replace('On','Off');
b.attr('src', srcOff);
}
/*클릭시 이미지 경로가 변경됨*/
$('.arrowOff').click(function(){
onSrc($(this)); //함수호출
});
$('.arrowOn').click(function(){
offSrc($(this)); //함수호출
});
});
</script>
------------------------------------------------------------------------------------------
Toggle Src
<body>
<!--이미지를 저장할때 On, Off를 파일명에 포함하여 저장한다.-->
<img src="./img/typeA/arrowOff.jpg" class="toggleImg">
<img src="./img/typeA/arrowOn.jpg" class="toggleImg">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
/*미리 함수 만들어 놓기*/
function toggleSrc(img){
if(!img.hasClass('on')){
img.attr("src", img.attr('src').replace('Off','On'));
img.addClass('on');
} else {
img.attr("src", img.attr('src').replace('On','Off'));
img.removeClass('on');
}
}
/*클릭시 이미지 경로가 변경됨*/
$('.toggleImg').click(function(){
toggleSrc($(this)); //함수호출
});
});
</script>
</body>
<!--이미지를 저장할때 On, Off를 파일명에 포함하여 저장한다.-->
<img src="./img/typeA/arrowOff.jpg" class="arrowOff">
<img src="./img/typeA/arrowOn.jpg" class="arrowOn">
</body>
<script>
$(document).ready(function(){
/*미리 함수 만들어 놓기*/
function onSrc(a){
a.attr('src').replace('Off','On');
}
function offSrc(b){
var srcOff = b.attr('src').replace('On','Off');
b.attr('src', srcOff);
}
/*클릭시 이미지 경로가 변경됨*/
$('.arrowOff').click(function(){
onSrc($(this)); //함수호출
});
$('.arrowOn').click(function(){
offSrc($(this)); //함수호출
});
});
</script>
------------------------------------------------------------------------------------------
Toggle Src
<body>
<!--이미지를 저장할때 On, Off를 파일명에 포함하여 저장한다.-->
<img src="./img/typeA/arrowOff.jpg" class="toggleImg">
<img src="./img/typeA/arrowOn.jpg" class="toggleImg">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
/*미리 함수 만들어 놓기*/
function toggleSrc(img){
if(!img.hasClass('on')){
img.attr("src", img.attr('src').replace('Off','On'));
img.addClass('on');
} else {
img.attr("src", img.attr('src').replace('On','Off'));
img.removeClass('on');
}
}
/*클릭시 이미지 경로가 변경됨*/
$('.toggleImg').click(function(){
toggleSrc($(this)); //함수호출
});
});
</script>
</body>
댓글
댓글 쓰기