How can I make the image change based on the domain name visited? Using location.hostname

StackOverflow https://stackoverflow.com/questions/18883175

  •  29-06-2022
  •  | 
  •  

题

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');
    }
}
有帮助吗？

解决方案

you do not call your function. A solution would be to ad the following code to the head of the html.

$( document ).ready(function() {
welcomepic();
});

you also need to remove the previous set class in the welcompic function otherwise you'll end up with double classes.

function welcomepic() {
    if (location.hostname == 'www.SampleSiteA.com') {
        $('.welcomepic').removeClass('picForB').addClass('picForA');
    } else {
        $('.welcomepic').removeClass('picForA').addClass('picForB');
    }
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top