JavaScriptによる画像縮小
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
目次
#contents
**概要 [#p75b2de3]
HTML表示段階で画像のリサイズを行うJavaScript。~
IMGタグにname属性を設定し、HTML読み込みの最後にname属性を...
このため、縮小を行いたくない画像にはname属性を付けない(...
**HTML部(IMGタグ) [#d94536ac]
-縮小する場合~
<IMG src="hogehoge.jpg" name="img-resize">
-縮小しない場合~
<IMG src="hogehoge.jpg">
**JavaScript部 [#o687dc45]
-サイズの指定~
「var maxWidth」に横幅を指定する~
-name属性の指定~
「document.getElementsByName」のパラメータで指定する~
<script type="text/javascript">
//<![CDATA[
var maxWidth = 50;
window.onload = function(){
var elements = document.getElementsByName("img-resize");
for(i=0;i<elements.length;i++){
if(elements[i].width > maxWidth){
elements[i].width = maxWidth;
}
}
}
//]]>
</script>
終了行:
目次
#contents
**概要 [#p75b2de3]
HTML表示段階で画像のリサイズを行うJavaScript。~
IMGタグにname属性を設定し、HTML読み込みの最後にname属性を...
このため、縮小を行いたくない画像にはname属性を付けない(...
**HTML部(IMGタグ) [#d94536ac]
-縮小する場合~
<IMG src="hogehoge.jpg" name="img-resize">
-縮小しない場合~
<IMG src="hogehoge.jpg">
**JavaScript部 [#o687dc45]
-サイズの指定~
「var maxWidth」に横幅を指定する~
-name属性の指定~
「document.getElementsByName」のパラメータで指定する~
<script type="text/javascript">
//<![CDATA[
var maxWidth = 50;
window.onload = function(){
var elements = document.getElementsByName("img-resize");
for(i=0;i<elements.length;i++){
if(elements[i].width > maxWidth){
elements[i].width = maxWidth;
}
}
}
//]]>
</script>
ページ名: