２枚の画像を置換する
html
<body><div id="imgArea"><img src="img/ph01.jpg" alt="ph01" id="ph01"></div></body>
-
jQuery のリンクがないまま、３０分がんばってしまいました。
-
<div>にはsrcがないから、これではダメ。
<script>
$(function(){
$('#imgArea').mouseover(function(){$('#imgArea').attr('src','img/ph02.jpg')})
.mouseout(function(){$('#imgArea').attr('src','img/ph01.jpg')});
});
</script>
- srcは<img>の属性だから、これなら大丈夫。
<script>
$(function(){
$('#imgArea').mouseover(function(){$('img').attr('src','img/ph02.jpg')})
.mouseout(function(){$('img').attr('src','img/ph01.jpg')});
});
</script>
- いま、クリックするのは<div id="imgArea">にしてあるから、thisは<div>を指す。
- だからこれではダメ。
<script>
$(function(){
$('#imgArea').mouseover(function(){$(this).attr('src','img/ph02.jpg')})
.mouseout(function(){$(this).attr('src','img/ph01.jpg')});
});
</script>
まとめ
- src, alt 属性があるのは<img>です。
- クリックしたものが、thisになります。
<script>
$(function(){
$('#imgArea').mouseover(function(){$(this).attr('src','img/ph02.jpg')})
.mouseout(function(){$(this).attr('src','img/ph01.jpg')});
});
</script>
