jQuery 背景のURLを取得しimgで表示
スマホサイトの作成をしています。
やりたい事は、タイトル通りで
jQueryを使って、
あるブロック要素の背景画像のURLを取得し、
そのデータをimgのsrc属性に入れて
imgとして表示したいと考えております。
補足としいて
・imgは、同じブロック要素内に表示します。
・取得するbackground-imageは絶対パスで書かれているものです。
スクリプトは以下のように書きました。
----------------------------------------
var bgImg = $("#box").css("background-image");
var bgImgFile = bgImg.substring(5, bgImg.length - 2);
$("#box").prepend("<img src='" + bgImgFile + "'>");
//最終的に#boxの背景画像をなくす処理
$("#box").css("background-image","none");
----------------------------------------
ですが、bgImgの値がブラウザによって違うのです。
alert(bgImg)で確認してみると、下記のようにalert表示されました。
●Firefoxでは
url("http://****.jpg")
●ios(iphone)では
url(http://***.jpg) ← " "が付いていない
これにより、結果、bgImgFileの値が変わってしまい、
ios(iphone)では背景画像を表示できません。
もし可能であれば、これの原因や、
他にもし方法があれば教えて下さると助かります。
詳しい方、どうぞ宜しくお願いいたします。
お礼
早速のご回答有り難うございました。 やっぱりそうですか・・。(~0~) 何となく自分の無知さを悩んでいましたが やはりそこがネックなのですね。 お教え頂きましたアドレスを参考にして知識を 深めたく思います。ここですることが、おっしゃられたように 後々楽ですね。 本当にお忙しい中、有り難うございました。