Change the theme of a site

Put images of each theme in a separate folder.

In the javascript, create a function that traverses all the images of the site, that owns a certain class (in the case of the example. class-relative) and send as parameter the name of the folder of the determined theme.

Below is a jQuery script that traverses all images of a given class:

$(".imagens-relativas").each(function(index){
    var src = $(this).attr("src")
    var photoName = src.substr(src.lastIndexOf("/"));
    $(this).attr("src", pastaTema+"/"+photoName)
  });

Would not it be better to put button image rules in CSS as well? This way, in addition to changing CSS, you change all the properties of your entire site, and can do several themes.

But if you want to keep the inline properties (in the tag), it would be a good idea to use JavaScript. Prefer pure JavaScript and use classes in your HTML tags.

Example in JS (very basic, change text colors)

I need to create themes for my site, when I enter the site the person clicks a button to switch to the chosen theme, but clicking the button has to change beyond the css, the images contained in the site (which in the case are the images of the menu buttons), is that you neither use joomla or wordpress and change the theme of the site, but the problem is that I can not use a CMS to do the site, so I have to do everything at hand, but until now I did not find anything that would help me change the theme of the whole site with a click. Can anyone tell me how I can do this? Thank you!

I put the zipped codes and images in the dropbox, I think that way you can better understand what I need .... Dropbox

Put images of each theme in a separate folder.

In the javascript, create a function that traverses all the images of the site, that owns a certain class (in the case of the example. class-relative) and send as parameter the name of the folder of the determined theme.

Below is a jQuery script that traverses all images of a given class:

<style id="css">
body { font-size: 7pt; }
</style>

Um texto qualquer.

<button id="botao">Clique-me!</button>

Would not it be better to put button image rules in CSS as well? This way, in addition to changing CSS, you change all the properties of your entire site, and can do several themes.

But if you want to keep the inline properties (in the tag), it would be a good idea to use JavaScript. Prefer pure JavaScript and use classes in your HTML tags.

Example in JS (very basic, change text colors)

You can use jQuery to add and remove CSS tags:

See this example in jsFiddle :

var css = '<style id="css2">body{ font-size: 32pt; }</style>';

$("#botao").click(function() {
  $("#css").remove();
  $("head").append(css);
});

And the Javascript:

$("head").append('<link href="MeuCSSExterno.css"></link>');

By clicking on the button tag old is removed and a new one is added.

Tip : Instead of what I did above you can point to an external CSS

<style id="css">
body { font-size: 7pt; }
</style>

Um texto qualquer.

<button id="botao">Clique-me!</button>