圖像添加到JavaScript對象

我想創建/發明一種新的JavaScript滑塊對象將由顯示基線圖像的工作： http://imgur.com/DuVkE.png 圖像添加到JavaScript對象

然後我想用這些「旋鈕」來層取決於特定情況

http://imgur.com/GKkqx.png 這些已經被「切斷」並將被放置在三個黑色旋鈕之一上。我有許多不同的顏色，因爲我計劃穿過它們，以便顏色看起來從一個變爲另一個。

所以我需要能夠附加一個圖像到我從用戶收到的ID，然後再操縱圖像。

我的代碼：

<div id='option1'></div> 

<script type="text/javascript"> 

var slide1 = new slider("option1");

我的構造函數會是這個樣子：

function slider(id) { 

var obj = document.getElementById(id); 
if (!obj) { 
var state = -1; 
return -1; 
} 
var state = 0; //blank state 

//alert("in"); 
//alert(document.getElementById(id).className); 

//this.addClass("hSliderBack"); INCORRECT SYNTAX!!! 
$("#"+id).addClass("hSliderBack"); //this works 
}

我固定上面的addClass的問題，雖然有點難看。

我的CSS腳本：

.hSliderBack 
{ 
background-image: url('/Switches/switchLine.png'); 
background-repeat: no-repeat; 
padding-left: 2px; /* width of the image plus a little extra padding */ 
display: block; /* may not need this, but I've found I do */ 
}

這是我怎麼能圖片添加到我的構造函數。還有很多工作要做，但至少這是一個開始。任何意見仍然讚賞，因爲我很綠！

來源

2012-11-24 Klik

你寫的什麼位置：

//obj.innerHTML = "<img src=' this doesn't seem right to me.

實際上是在一個非常合理和可行的方式。您輸入到DOM中參考要顯示的圖像的<img>節點。

但是，在許多情況下，更常見的或者更可維護的解決方案是使用引用背景圖像的CSS樣式，並使用導致圖像顯示的樣式將DOM輸入到DOM中。

但是，你應該問自己，沒有工具的支持是最好的。許多最流行的JavaScript庫都內置了這樣的工具，或者至少有一些方法可以使得構建這種類型的代碼變得非常容易。

當然，如果你正在做使用框架在此之前，瞭解網絡發展的基礎，所以你明白自己在做什麼更徹底，更權力給你:-)

來源

2012-11-24 23:20:26 SAJ14SAJ

說實話，我已經尋找一個小部件已經滿足我的需求。然而，我決定爲自己創造一個，因爲作爲一個完美主義者，我想要完全符合我的需求。風格對我來說非常重要。我想要製作一個非常漂亮的網頁，而且我不會爲更少的（這將是我的商業網頁）解決問題。另外，瞭解這些事情是如何實施是很有趣的。我不能抱怨，如果它使我成爲一個更好的網頁程序員:)。 – Klik

至於我之前編寫的代碼，我真的很想避免這樣做，因爲我需要每個圖像在對象內部都有自己的唯一ID。我也認爲有一個更簡單的方法來做到這一點......我希望如此。 – Klik

您可以用任何一種方法爲圖片的主機標籤指定一個唯一的ID - 事實上，您應該。另外，由於您是直接使用JavaScript生成它們，所以您可以維護一個指向DOM節點的對象，這樣您甚至不必通過ID查找它。不要低估構建好小部件的難度。根據您的業務需求和範圍，無障礙或國際化難以實施。例如，我使用的Dojo框架（作爲Notes/Domino開發人員）並不是最受歡迎的，但它很好地完成了這些工作。 – SAJ14SAJ

圖像添加到JavaScript對象

回答

相關問題