CSSで画像を中央に表示する その２

ひとつ前に書いた、CSSで画像を中央に表示するのをいちいちCSSファイルとHTMLで書くのはとても面倒です。
そこで、ライブラリをつくってみました。この関数を使って画像を表示するdivタグを自動生成できます。

全関数をInternetExplorer6、InternetExplorer8、InternetExplorer11、Firefox、Chrome、Safariで動くことを確かめる試験もしました。うーん試験がとてもめんどくさい。

----------------------------

function dispimg_create_normal(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;

$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}



function dispimg_create_right_left_cut(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;

$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': "auto "+tag_w+"px"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}



function dispimg_create_top_bottom_cut(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;

$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
'background-image': "url("+image_file+")",
'background-position': "center",
'background-repeat': "no-repeat",
'background-size': ""+tag_w+"px auto"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
return 0;
}




function dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;

$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
overflow:"hidden"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
$("#"+tag_id).append("<div id=\""+tag_id+"_1\"></div>");
$("#"+tag_id+"_1").css({
position:"static",
'layout-grid-line': ""+tag_h+"px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:""+tag_w+"px",
height: ""+tag_h+"px"
});
$("#"+tag_id+"_1").append("<img id=\""+tag_id+"_2\" src=\""+image_file+"\"/>");
$("#"+tag_id+"_2").css({
'vertical-align': "top",
'max-height':""+tag_h+"px",
width:""+tag_w+"px"
});
return 0;
}


function dispimg_create_top_bottom_cut_ie6(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
if(parent_tag_name==null)parent_tag_name="body";
if(tag_id==null)tag_id="body";
if(image_file==null)image_file="0.jpg";
if(tag_x<0)tag_x=0;
if(tag_y<0)tag_y=0;
if(tag_w<1)tag_w=1;
if(tag_h<1)tag_h=1;

$(parent_tag_name).append("<div id=\""+tag_id+"\"></div>");
$("#"+tag_id).css({
position:"absolute",
width:""+tag_w+"px",
height: ""+tag_h+"px",
left: ""+tag_x+"px",
top: ""+tag_y+"px",
overflow:"hidden"
});
if(flag&1){
$("#"+tag_id).css({
border:"solid 1px"
})
};
$("#"+tag_id).append("<div id=\""+tag_id+"_1\"></div>");
$("#"+tag_id+"_1").css({
position:"static",
'layout-grid-line': ""+tag_h+"px",
display:"table-cell",
'text-align': "center",
'vertical-align': "middle",
width:""+tag_w+"px",
height: ""+tag_h+"px"
});
$("#"+tag_id+"_1").append("<img id=\""+tag_id+"_2\" src=\""+image_file+"\"/>");
$("#"+tag_id+"_2").css({
'vertical-align': "top",
'max-width':""+tag_w+"px",
height:""+tag_h+"px"
});
return 0;
}


function dispimg_create(parent_tag_name,tag_id,image_file,tag_x,tag_y,tag_w,tag_h,flag,format)
{
switch(format){
case 0:
return dispimg_create_normal(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 1:
return dispimg_create_right_left_cut(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 2:
return dispimg_create_top_bottom_cut(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 3:
return dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
case 4:
return dispimg_create_top_bottom_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
default: // default is type3
return dispimg_create_right_left_cut_ie6(parent_tag_name,tag_id,image_file,
tag_x,tag_y,tag_w,tag_h,flag,format);
}
}