Come posso fare un background-image personalizzato per un nella in base a variabile passata dal URL?

Question

Sto cercando di consentire la personalizzazione molto primitiva sulla base di essere in grado di passare una variabile tramite l'URL. Ad esempio, se vengono a mio sito attraverso il seguente:

http://my.stackexchange.com?c=alpha

I sarebbe in grado di visualizzare un'immagine, sia come un tag o come background-image, tutto ciò che è feasiable, chiamato immagine-a.png

Ma se arrivano attraverso con un valore diverso:

http://my.stackexchange.com?c=beta

Poi l'immagine è diversa.

Questo sarebbe lato server più facile, ma chiedevo se ci sono modi per farlo, diciamo, utilizzando JavaScript che posso chiamare l'intestazione personalizzata per esempio. O alcune altre idee?

Sì, questo è già stato immesso sul meta.stackexchange.com, ma mi chiedo se ci sono idee da parte della comunità di programmazione più ampia su come posso fare questo con i vincoli di solo essere in grado di fare put html (e limitatamente JavaScript sembra).

Grazie.

Answer 1

In primo luogo ottenere il vostro URL parametri con jQuery ...

Get sfuggito URL parametro

... o semplicemente javascript ...

Come posso ottenere i valori delle stringhe di query in JavaScript?

Ora che avete i parametri è possibile utilizzare jQuery per modificare il tag immagine src parametro ...

cambiare l'origine dell'immagine sul rollover utilizzando jQuery

Si può fare questo senza l'utilizzo di jQuery così, ma mi piacerebbe andare via jquery perché suona come si può avere bisogno di javascript complesse.

Answer 2

È possibile visualizzare i parametri GET (in questo caso, la "c") da JavaScript e utilizzare JavaScript per modificare lo src del tag img per quello che vuoi.

Answer 3

Controlla JQuery out ... jquery.com

Ecco un esempio da qualcuno che potrebbe essere vicino a quello che ti serve. http: // jquery-howto. blogspot.com/2009/09/get-url-parameters-values-with-jquery.html

che vi mostra come ottenere parms ... allora si potrebbe utilizzare JQuery semplice per caricare un'immagine diff.

Answer 4

Supponendo che si avrà un solo parametro c, si può ottenere con la seguente riga:

var c = /\?c=(.*)/.exec(document.baseURI)[1];

Questo dovrebbe funzionare nei casi perfetti: un solo e soltanto in formato corretto c parametro. Se nessun parametro, si solleverebbe un errore.

Un modo più generale potrebbe essere:

function getURLParameter(key) {
    var ret = (new RegExp('[?](\?:.*&)*'+key+'=([^&#]*)','')).exec(document.baseURI);
    return ret?ret[1]:null;
}

È possibile chiamare che, quando i carichi di documenti e cambiare l'immagine di conseguenza. (Che parte dovrebbe essere abbastanza facile però)