Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

script som byter bakgrundbild

acinom

Startad av acinom,
i Webbutveckling

Rekommendera Poster

acinom

acinom

Postad
Postad

Hej alla!

 

På min hemsida har jag ett urgammalt javascript som gör att man kan byta ut bakgrunden genom att klicka på miniatyrer. Nu fungerar det inte längre, med IE11.

Någon som har en lösning på IE11 problem eller ett annat script?

 

Tacksam för svar av ny medlem på forumet :-)

 

 

 

Länk till kommentar
Dela på andra webbplatser
Gäst

Gäst

Postad
Postad

.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background color</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="script.js"></script>
</head>
<body>

<select id="choose_color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

</body>
</html>

script.js

$(function() {
	$('#choose_color').on('change', function() {
		storeBackgroundColor(this.value);
		loadBackgroundColor();

	});

	loadBackgroundColor();
});


function storeBackgroundColor(color) {
	localStorage.setItem('bg', color);
}

function loadBackgroundColor(){
	var bg = localStorage.getItem('bg');
	if(bg === null) return false;

	$('body').css('background-color', bg);
	return true;
}
Länk till kommentar
Dela på andra webbplatser
ChromaWoods

ChromaWoods

Postad
Postad

Nedan borde funka. Först har du ett gäng thumbnails, som dels har ett vanligt src-attribut men även ett data-attribut (data-bg) som håller URL:en till respektive thumbs stora variant. 

<img class="thumb" src="http://lorempixel.com/80/80/city/1" data-bg="http://lorempixel.com/800/800/city/1">
<img class="thumb" src="http://lorempixel.com/80/80/animals/1" data-bg="http://lorempixel.com/800/800/animals/1">
<img class="thumb" src="http://lorempixel.com/80/80/sports/2" data-bg="http://lorempixel.com/800/800/sports/2">

Sen behöver vi bara en liten snutt jQuery för att byta ut backgrunden på body:

jQuery(function($) {
  
  var $body = $('body');
  
  $(document).on('click', '.thumb', function() {
    $body.css('backgroundImage', 'url(' + $(this).data('bg') + ')');
  });
  
});

Fungerande exempel här: http://jsbin.com/sahano

 

...om det var så du menade.

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...