Here's the situation: I need to change the background image of a div in a page at a given time. The following code does exactly that, and also fades the pictures in and out. Problem is, I need to change the images in the directory with frequency. The names never change, but the pictures do. How can I force the browser to refresh content? It won't refresh images even if I manually press f5.
<html>
<head>
<meta charset="UTF-8">
<title>Esquerdo - Monitores BI</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.5.2.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('img').hide();
function test() {
$("#container img").first().appendTo('#container').fadeOut(2000);
$("#container img").first().fadeIn(2000);
setTimeout(test, 7000);
}
test();
});
</script>
<link rel="stylesheet" type="text/css" href="slidestyle2.css">
</head>
<body>
<div id="container">
<img src="vehicles/kicks.jpg" />
<img src="vehicles/gtr.jpg" />
<img src="vehicles/sentra.jpg" />
</div>
</body>
I've searched a lot for a solution, but since I know nothing about jquery, javascript etc and all solutions I've found worked for very different codes, I couldn't adapt anything to my needs. All I know is that the browser keeps the original content of a file with a certain name, so you need to change the name of the file inside the code, make it be always unique. But how can I do that if I'm writing the file name in html?
I'd really appreciate any help.