How can I make the image change based on the domain name visited? Using
location.hostname
I have one website and two domain names. I want image "A" to appear if the
visitor goes to a page on www.SampleSiteA.com but image "B" should appear
if on a page from www.SampleSiteB.com.
Unfortunately the result of my code below is blank, with no image
appearing at all. Any ideas?
content for file: welcome.html
<html>
<head>
<script src="resources/js/domain.js" type="text/javascript"></script>
</head>
<body>
<div class="welcomepic"></div>
</body>
</html>
Content for file: styles.css
.picForA{
background-image: url('../img/A.png');
}
.picForB{
background-image: url('../img/B.png');
}
.welcomepic{
background-position:left center;
background-repeat: no-repeat;
padding-left:160px;
width:225px;
float:left;
height:100px;
display: block;
}
Content of file: domain.js
function welcomepic() {
if (location.hostname == 'www.SampleSiteA.com') {
$('.welcomepic').addClass('picForA');
} else {
$('.welcomepic').addClass('picForB');
}
}
No comments:
Post a Comment