设置背景图像从下拉菜单 - javascript [英] set background image from dropdown menu - javascript

问题描述

我想为一个网站选择不同背景的菜单。

I want to make a menu to select different backgrounds for a website about my artwork.

这个链接只适用于背景颜色，它只是罚款。
http://www.javascripter.net/faq/backgrou.htm

This (link works perfectly for just background colors and I was able to replicate it just fine. http://www.javascripter.net/faq/backgrou.htm

我知道该属性是bgImg，但我不知道如何实现它。如果任何人可以做一个简单的jsfiddle显示我看似简单的窍门我真的很感激。

I know that the property is bgImg but I just can't figure out how to implement it. If anybody could make a simple jsfiddle to show me this seemingly simple trick I'd be really grateful.

谢谢！
Rollin

Thanks! Rollin

推荐答案

在这里，您只需在下拉列表中添加更多选项，并使用图片网址作为值来提供更多背景选项。

Here you go, just add more options to the dropdown with the image url as the value to give more background options.

HTML： p>

HTML:

<select id="backgrounds">
    <option>Select a background</option>
    <option value="http://t2.gstatic.com/images?q=tbn:ANd9GcT-wQk0CTwl93EmiaUaoIjpMVmwHDNBz_7hN0UNpAz5DCWq66Sp-w">Background 1</option>
    <option value="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg">Background 2</option>    
</select>

脚本：

$(document).ready(function()
{
    var body = $(document.body);
    $('#backgrounds').bind('change', function(event){
        var bg = $(this).val();
        if(bg == null || typeof bg === 'undefined' || $.trim(bg) === '')
            body.css('background-image', '');
        else
            body.css('background-image', "url('" + bg + "')");
    });
});

http://jsfiddle.net/Wg2AU/

要允许背景图片和背景颜色的组合，您可以使用以下代码：

To allow a combination of background images and background colors you can use the code below:

HTML：

<select id="backgrounds">
    <option>Select a background</option>
    <option value="url('http://t2.gstatic.com/images?q=tbn:ANd9GcT-wQk0CTwl93EmiaUaoIjpMVmwHDNBz_7hN0UNpAz5DCWq66Sp-w')">Background Image 1</option>
    <option value="url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg')">Background Image 2</option>
    <option value="none #000">Black</option>
    <option value="none red">Red</option>
</select>

脚本：

$(document).ready(function()
{
    var body = $(document.body);
    $('#backgrounds').bind('change', function(event){
        var bg = $(this).val();
        if(bg == null || typeof bg === 'undefined' || $.trim(bg) === '')
            body.css('background', 'none transparent');
        else
            body.css('background', bg);
    });
});

http://jsfiddle.net/hKBtp/4/

这篇关于设置背景图像从下拉菜单 - javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！