WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:セル(タグ)内の画像の大きさをオンマウスで変えるには

0:[投稿] ミルクティ [2005/10/05 16:20 ] [環境:IE6.0 WIN98 ]

ホームページビルダーを使用してHPを作っています。
表の各セルに小窓風に画像を挿入しました。
オンマウスでその画像が大きくなりアウトで元に戻る効果にしたいと思っています。必然的に該当セルが大きくなり表が右へずれるような表が作れればと思っています。HPBのロールオーバーだと画像は変更できるのですがが大きさが変わりません。変更後の画像に大きさの指定を入れてみたのですがエラーになりました。
大きさの違う画像を用意することも考えましたができれば1枚の画像で処理できればと思っています。
 HPBで作成できなくても可能なソースがあれば教えて下さい。よろしくお願いします。



1:[回答] m035 [2005/10/05 23:27 ][URL]

<img src="img01.jpg" style="width:50px;height:50px;" onmouseover="this.style.width='100px';this.style.height='100px';" onmouseout="this.style.width='50px';this.style.height='50px';">

↑で出来ると思われます。
この例ではstyleで画像サイズの初期値(縦横50px)を指定しておき、
mouseoverで縦横100pxに、mouseoutで縦横50pxに戻しています。


2:[質問] ミルクティ [2005/10/06 23:32 ]

m035様
 ご回答ありがとうございました。試してみたところ上手くいきました。実際の画像を使ってやってみたのですが、オンマウスする度にポインタが乗っていない他の画像もタグの大きさが拡大した画像のタテの大きさに合ってしまい、ちょっとイメージ違いでした。せっかく教えて頂いたのに申し訳ありません。イメージ違いだけでなく、隣のタグの画像を拡大させるため、ポインタを素早く移動させないと前の画像が元の大きさに戻ってしまい、上手く次の画像にポインタを置くことが出来ず、表が大きくなったり小さくなったりして目が回ってしまいます。教えて頂いたのを基礎として、拡大した画像を隣の画像を拡大するまで固定して、次の画像が拡大したのと同時に前の画像が小さくなる方法があるでしょうか?色々試したのですが上手くいきません。


3:[回答] m035 [2005/10/07 00:34 ][URL]

各画像には
<img src="img01.jpg" style="width:50px;height:50px" onmouseover="ch(this.id)" onmouseout="this.style.width='50px';this.style.height='50px'" id="img01">
<img src="img01.jpg" style="width:50px;height:50px" onmouseover="ch(this.id)" onmouseout="this.style.width='50px';this.style.height='50px'" id="img02">
のように
onmouseover="ch(this.id)"とstyle="width:50px;height:50px"とid="各id"をつけてください。idは連番でなくてもダブっていなければ問題はありません。

以下がサンプルソースです

<html>
<head>
<script type="text/javascript">
<!--
var log="img01";
function ch(img_id){
document.getElementById(log).style.width='50px';
document.getElementById(log).style.height='50px';
document.getElementById(img_id).style.width='100px';
document.getElementById(img_id).style.height='100px';
log=img_id;
}
-->
</script>
</head>
<body>
<img src="img01.jpg" style="width:50px;height:50px;" onmouseover="ch(this.id)"  id="img01">
<img src="img01.jpg" style="width:50px;height:50px;" onmouseover="ch(this.id)"  id="img02">
<img src="img01.jpg" style="width:50px;height:50px;" onmouseover="ch(this.id)"  id="img03">
</body>
</html>


4:[質問] ミルクティ [2005/10/07 13:29 ][URL]

m035様
 すぐにお返事くださりありがとうございました。こちらもとても上手くいきました。イメージ通りに仕上げることが出来ました。
 ですが、もうひとつだけ教えて頂きたいことがあります。公開したい写真画像がヨコとタテの2種類あります。この場合、教えて頂いた方法だとどちらかの画像の比率が崩れてしまいます。このjavascriptを2通りの設定にすることは出来ないでしょうか?
 可能でしたらご回答お願い致します。製作中のページをとりあえずアップしてみました。


5:[回答] m035 [2005/10/08 00:15 ][URL]

<script type="text/javascript">
<!--
var log="img01";
function ch(img_id,sw){
document.getElementById(log).style.width='50px';
document.getElementById(log).style.height='50px';
tate=100;//swに0を指定したときの縦幅
yoko=100;//swに0を指定したときの横幅
if(sw==1){
tate=80;//swに1を指定したときの縦幅
yoko=120;//swに1を指定したときの横幅
}
document.getElementById(img_id).style.width=yoko+'px';
document.getElementById(img_id).style.height=tate+'px';
log=img_id;
}
-->
</script>
にscript部分を書き換え、
横画像には
<img src="img01.jpg" style="width:50px;height:50px;" onmouseover="ch(this.id,0)"  id="img01">
のようにonmouseoverにch(this.id,0)を、
縦画像には
<img src="img01.jpg" style="width:50px;height:50px;" onmouseover="ch(this.id,1)"  id="img01">
のようにonmouseoverにch(this.id,1)を指定してください。
ch(this.id,X)のXの部分に0を入れた場合と1を入れた場合で縦幅と横幅が指定できます。


6:[回答] 通 [2005/10/08 00:49 ][URL]

>>5
毎回毎回 getElementById しなくても
onmouseover="ch(this, 0)" のようにオブジェクト自身を渡せば済む話では。
いちいち id を振る必要すらありませんし。


7:[完了] ミルクティ [2005/10/08 11:21 ][URL]

m035様 通様
 お返事ありがとうございました。2通りのサイズに設定することが出来ました。通様のアドバイスは素人の私にはよくわかりませんでしたので、申し訳ありませんがm035様のスクリプトを使って作らさせて頂きました。一度もお会いしたことのない方々にここまで親切に対応して頂きとても感謝しております。また別の件で不明な点が出てくるかもしれません。その時はお手数ですがアドバイス頂ければと思います。この度はありがとうございました。


[戻る]