使用取決於一個ID的JavaScript更改HTML網頁上的圖像

-2

我是相當新的JavaScript和我想顯示其變化取決於一個ID，用戶類型的圖像。使用取決於一個ID的JavaScript更改HTML網頁上的圖像

下面我聲明的變量「圖標」來存儲URL +圖標ID + png格式來完成URL的值：

icon = "http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/" + summonerIcon + ".png"

什麼這個變量可以包含一個例子是："http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/14.png"

我想使用此變量中的信息來顯示o在我的html頁面中，所以當用戶輸入用戶名時，javascript應該返回一個匹配用戶提交的ID的圖像。

這些圖像都存儲在上面顯示的網址，它們不存儲在本地。

感謝您閱讀我的問題。

來源

2016-02-05 David Forster

你有什麼與你，HTML？你可以發佈嗎？ –

這應該會給你提示.. http://www.w3schools.com/jsref/prop_img_src.asp ... –

所以圖像與頁面不在同一個域中？這不是一個好主意，也許你應該在本地下載和存儲這些圖像。如果CC允許您這樣做並使用這些資產。 – pid

使用jQuery鉤入輸入中的變化事件，該事件將決定ID，然後將值拉入圖標變量。

HTML

<input type="text" name="userid" id="id />

function getVals() { 
    var icon = $("#id").val(); 
} 

$("input").change(getVals); 
getVals();

你必須調整的getVals函數將其重新呈現您所顯示的圖像，但是這應該指向你在正確的方向。

來源

2016-02-05 14:13:27 Sidriel

這使用jquery插件。

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     $('#btnLoad').click(function(e){ 
      var baseUrl ='http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/'; 
      $('#iconHolder').attr('src', baseUrl + $('#iconId').val() + '.png'); 
     }); 
    }); 
</script> 
Icon Id <input id="iconId" /><button id="btnLoad">Load</button> 
<br/> 
<img id="iconHolder" />

來源

2016-02-05 14:18:31 rma

使用取決於一個ID的JavaScript更改HTML網頁上的圖像

回答

相關問題