webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

.mouseover .mouseout 画像置換

2枚の画像を置換する

html

<body><div id="imgArea"><img src="img/ph01.jpg" alt="ph01" id="ph01"></div></body>

  • jQuery のリンクがないまま、30分がんばってしまいました。

  • <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> 

f:id:ohta-felica:20160523211140j:plain