現在の背景画像へのURLを取得し、<a href>

I have an issue i couldn't figure out so far. I googled and searched here, found some answers, but I can't get it to work.現在の背景画像へのURLを取得し、<a href>

I want to figure out the current background image from css and create a link to download the image.

This is my simplyfied code so far:

<style type="text/css"> 
body.custom-background { background-image: url('http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; } 
</style> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

var image = body.custom-background.css('background-image').replace(/^url\((.*?)\)$/,  '$1'); 
document.getElementById('link').setAttribute("href",image); 


</script> 

<div id="hide"> 
    <a id="hidepage">hide page</a> 
    <a id="showpage" style="display:none;">show page</a> 
</div> 

<div id="downloadbg"> 

    <a id="link"><br>Download Background</a> 
</div>

I am pretty new to programming and I am running out of ideas.

Thank you very much for your help.

出典

2012-04-27 tomr

は次のようになり？ – Jrod

<head> 
    <style type="text/css"> 
     body.custom-background { background-image: url('http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var image = $(".custom-background").css('background-image').replace(/^url\((.*?)\)$/,  '$1'); 
     $('#link').attr("href", image); 

    }); 
    </script> 
</head> 
<body class="custom-background"> 
    <div id="hide"> 
     <a id="hidepage">hide page</a> 
     <a id="showpage" style="display:none;">show page</a> 
    </div> 
    <div id="downloadbg"> 
     <a id="link"><br>Download Background</a> 
    </div> 
</body>

FIDDLE

donwloadへのリンクを作るために、とだけ画像を表示していない、あなたには、いくつかのサーバー側のスクリプトを実行する必要がありますが、ヘッダにattachmentにContent-Dispositionを設定！

出典

2012-04-27 13:47:10 adeneo

魅力的な作品です！本当にありがとう！ – tomr

$('body').css('background-image')

That will get your background image value using jquery (if you want that), then you have to set your href in the link (looks like you're doing that).

Following straight javascript as your doing, getting the background image would be:

var image = document.getElementsByTagName("body")[0]

var bg = image.style.backgroundImage;

That will also get the value you have set it in the link

出典

2012-04-27 13:39:41 user92254225

You might have forgot to execute your function on DOM ready (can't tell for sure as simplified code) but normally this should work fine.

$(function() { 
    $('#link').attr('href', $('body.custom-background').css('background-image').replace(/^url\((.*?)\)$/, '$1')); 
});

出典

2012-04-27 13:41:26 GillesC

あなたはもちろん正しいです。どうもありがとう！ – tomr

See: http://jsfiddle.net/p93jx/9/

<!DOCTYPE html> 
<html> 
<head> 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> 

    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 

    <style type='text/css'> 
     body { background-image: url('http://localhost:8888/wp- content/uploads/2012/04/bg2.jpg'); 
     background-repeat: no-repeat; 
     background-position: top center; 
     background-attachment: scroll; } 
    </style> 

    <script type='text/javascript'> 
     $(document).ready(function(){ 
     var image = $('body').css('background-image'); 
     image.match(/url\((.*?)\)/); 
     document.getElementById('link').setAttribute("href",image); 
     }); 
    </script> 
</head> 

<body> 
    <div id="hide"> 
     <a id="hidepage">hide page</a> 
     <a id="showpage" style="display:none;">show page</a> 
    </div> 

    <div id="downloadbg"> 
     <a id="link"><br>Download Background</a> 
    </div> 

</body> 

</html>

出典

2012-04-27 13:42:17

に引き渡すここ1、非jQueryの、方法があります。

出典

2012-04-27 13:43:04

DOM全体がロードされる前に本体を参照することはできません。だからあなたは、jQuery関数でJavaScriptをラップする必要があります：$（function（）{code here !;}）;これはjQuery.readyイベントをリッスンするのと同じ結果をもたらします。あるいは、JavaScriptコードをページの一番下に移動することもできます。

このような何かが仕事をする必要があります：生産のリンクを何

<head> 
    <title></title> 
    <style type="text/css"> 
     body{ background: url(@{'http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'}); } 
    </style> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

    <script type="text/javascript"> 

     $(function(){ 
      var image = $('body').css('background-image').replace(/^url\((.*?)\)$/,  '$1');; 
      $('#link').attr('href', image); 
     }); 


    </script> 

</head> 
<body> 
    <div id="hide"> 
     <a id="hidepage">hide page</a> 
     <a id="showpage" style="display:none;">show page</a> 
    </div> 

    <div id="downloadbg"> 
     <a id="link"><br>Download Background</a> 
    </div> 

</body>

出典

2012-04-27 13:55:08 aaberg

ありがとう！作品:) – tomr

現在の背景画像へのURLを取得し、<a href>

答えて

関連する問題