Javascript help

Anyone know any Javascript?

I have a bit of code that shows a random header image each time the page is refreshed...
<script language="JavaScript">
<!--
var str="";
var theImages = new Array() // do not change this

theImages[0] = '$BASE_PATH$/Backgrounds/header_1.png'
theImages[1] = '$BASE_PATH$/Backgrounds/header_2.png'
theImages[2] = '$BASE_PATH$/Backgrounds/header_3.png'
theImages[3] = '$BASE_PATH$/Backgrounds/header_5.jpg'
theImages[4] = '$BASE_PATH$/Backgrounds/header_7.jpg'

var j = 0
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer = new Image()
preBuffer.src = theImages
}

var whichImage = Math.round(Math.random()*(p-1));

document.write('<div class="banners" style="text-align:center;"><img src="'+theImages[whichImage]+'"></div>');

//-->
</script>
The images are based on a screen resolution of 1280 px wide, the alternative images need to fit a browser width of 1024px
That works fine but I now want it to show a set of different images depending on the screen resolution. Is this possible?
 

Bman

Veteran
Location
Herts.
use this function :

function browserWidth() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && document.documentElement.clientWidth ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && document.body.clientWidth ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
return myWidth;
}
Then add an if statement, and your done ;)
 
Top Bottom