/ / Wie kann ich die Quelle des Hintergrunds auf einem div [Duplikat] greifen - Javascript, Jquery, HTML, Jquery-Cycle

Wie kann ich die Quelle des Hintergrundes auf einem div [duplizieren] - javascript, jquery, html, jquery-cycle

Mögliche Duplikate:
Rufen Sie die URL aus der Eigenschaft background-image ab

Ich benutze die Zyklus-Plugin und ich möchte ein pager / thumbnail erstellen.

HTML

<div id="slide">
<div class="panel" id="product">

</div>
</div>

Mein Bild ist vor dem Hintergrund des div. Nicht im Div selbst

JS Call

pager:"#thumbs", pagerAnchorBuilder: function(idx, slide) { return "<li><a href="#"><img src="/images/" + slide.src + "" width="50" height="50" /></a></li>"; },

return "<li><a href="#"><img src="/images/" + slide.src + "" width="50" height="50" /></a></li>";

Ich versuche das Hintergrundbild zu packen product. Also anstatt zurückzukehren + slide.src + womit würde ich das ersetzen?

Das Obige greift nach der Quelle des Bildes. Wie kann ich die Hintergrundquelle für das div und nicht die Bildquelle verwenden?

Mein Bild ist auf dem Div nicht in einem <img> Etikett.

**Vielen Dank. **

Antworten:

3 für die Antwort № 1

Nicht sicher, bei welchem ​​Div du das Hintergrundbild haben möchtest und wo du es verwenden willst, aber ...

$("#product").css("background-image") gibt Ihnen die URL zum Hintergrundbild des Produktdiv.

Also, im Anschluss daran in Ihrem Code I denken Sie brauchen es zu ändern:

pager:"#thumbs", pagerAnchorBuilder: function(idx, slide) { return "<li><a href="#"><img src="/images/" + $("#product").css("background-image") + "" width="50" height="50" /></a></li>"; },

Letzte Antwort dank rsp:

pager:"#thumbs", pagerAnchorBuilder: function(idx, slide) { return "<li><a href="#"><img src="/images/" + $("#product").css("background-image").replace("url(", "").replace(")", "") + "" width="50" height="50" /></a></li>"; }

2 für die Antwort № 2

Sie können den Hintergrund eines Divs erhalten mit:

var url = $("#yourid").css("background-image")
.replace("url(", "")
.replace(")", "");

Sie müssen "url (" and ")" entfernen, da die CSS-Eigenschaft folgendermaßen aussieht:

url(http://www.example.com/image.jpg)

1 für die Antwort № 3

ohne jquery wäre das so

 document.getElementById("slide").style.backgroundImage="url("xxx.png")";

1 für die Antwort № 4
var url = $("#product").css("background-image");

url = url.replace(/^url([""]?/, "").replace(/[""]?)$/, "");

alert(url);

das könnte helfen