Масштабируемые фоновые изображения, которые меняются при нажатии

У меня есть вопрос, который является своего рода расширением этой темы. .

У меня работают фоновые изображения; однако вместо того, чтобы автоматически размещать их в виде плитки, я хотел бы связать их для масштабирования с браузером. Я знаю, как создать масштабируемое фоновое изображение с помощью CSS, но я не знаю, как связать указанный CSS с переменной backImage в скрипте (доступно ниже или после перехода из предыдущего потока), чтобы он применялся ко всем различные образы.

<script type="text/javascript">

var backImage = [
    "images/street.png",
    "images/market.jpg",
    "images/building.jpg",
    "images/skyscraper.jpg",
    "images/gasstation.jpg",
    "images/trees.jpg"
];

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
    }
};
</script>

Сложность в том, что я не могу применить класс к HTML, потому что я уже применяю это...

<a href="javascript:changeBGImage(1)">Change</a>

... в существующий div в HTML с несколькими другими классами; поэтому мне нужно добавить класс в backImage или определенные png и jpg в javascript.

Заранее спасибо!


javascript background
person Paige Pauli    schedule 02.04.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Друг помог мне решить мою проблему. Вот оно:

<script type="text/javascript">

var backImage = [
    "images/vintagemap.png",
    "images/earbuds.jpg",
    "images/flames.jpg",
    "images/grass.jpg",
    "images/library.jpg",
    "images/shapes.jpg"
];

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
        document.body.className = 'bgchange';
    }
};

</script>

Я добавил строку "document.body.className = 'bgchange';" ниже моего оригинального JS, затем написал следующий класс CSS:

.bgchange {
    background-repeat:no-repeat;
    background-size:cover;
}

Теперь он изменит размер любой фотографии на масштабируемое полноэкранное фоновое изображение.

Надеюсь, кто-то еще найдет это полезным!

person Paige Pauli    schedule 03.04.2012
comment
Поздравляю с исправлением, Пейдж! Когда вы сможете, обязательно пометьте свой ответ как «принятый», чтобы другие могли учиться на вашем успехе. Ура~ - person Andrew Kozak; 03.04.2012
comment
Ага, спасибо! Мне пришлось ждать 24 часа, прежде чем я смог принять свой собственный ответ. :) - person Paige Pauli; 05.04.2012

arrow_upward
0
arrow_downward

как часть вашей функции changeBGImage() вы можете внести дополнительные .style. изменения в document.body, чтобы делать все, что вам нравится, с каждым фоновым изображением по мере его изменения.

РЕДАКТИРОВАТЬ:

По сути, возьмите это:

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
    }
};

И превратите это в это:

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
        document.body.style.backgroundSize = '###px';
    }
};

Или, если вы хотите установить какой-либо CSS, отличный от background-size, для элемента body, вы должны сделать это после параметра .style.. Просто помните, что при переводе CSS в JS дефисы удаляются, а следующая буква делается заглавной (точно так же, как background-image в CSS становится backgroundImage в JS).

person Steve Paulo    schedule 02.04.2012
comment
Я просто не знаю правильной структуры js и того, как применить ее к моему существующему коду. Не могли бы вы написать пример, пожалуйста? - person Paige Pauli; 03.04.2012
comment
Большое спасибо за Вашу помощь! К сожалению, я до сих пор не очень хорошо объясняюсь. Вот: у меня есть класс с несколькими различными атрибутами CSS. Как я могу применить этот конкретный класс к этому сценарию, чтобы он применялся к каждому фоновому изображению при отображении? (Еще раз спасибо!) - person Paige Pauli; 03.04.2012
comment
Хм... CSS меняется в зависимости от изображения? Если нет, то почему бы просто не применить CSS, а не класс, непосредственно к тегу <body>? Или поместите класс, который вы определили, в тег <body> в разметке? Если вы хотите сделать это в JS, это будет document.body.setAttribute("class", "className"); - person Steve Paulo; 03.04.2012
comment
CSS не меняется в зависимости от изображения. Каждое изображение просто автоматически растягивается или сжимается, чтобы заполнить окно браузера. Я не могу назначить CSS для тела, потому что у меня уже есть фоновое изображение тела (повторяющийся .png), которое остается на месте до тех пор, пока другие изображения не будут запущены при нажатии на определенные ссылки. Однако я попробую JS, который вы указали, и дам вам знать, как это работает. Большое спасибо! - person Paige Pauli; 03.04.2012
comment
Хорошо, следующее не сработало: function changeBGImage(whatImage) { if (document.body){ document.body.style.backgroundImage = 'url('+backImage[whatImage]+')'; document.body.style.backgroundImage.setAttribute(.bgchange); } }; Я поместил document.body.style.backgroundImage.setAttribute(.bgchange) перед document.body.style.backgroundImage = 'url('+backImage[whatImage+')'; затем после (как показано выше). Размещение его раньше просто сломало изображения; размещение его после ничего не сделало. Использование document.body.setAttribute(class) будет применяться к телу, а не к изображениям. - person Paige Pauli; 03.04.2012
comment
у вас есть document.body.style.backgroundImage.setAttribute(".className");... попробуйте вместо этого: document.body.setAttribute("class", "bgchange");... вы не можете применить класс к атрибуту (фоновому изображению), только к элементу (например, к телу)... - person Steve Paulo; 03.04.2012