2

所以我正在为我所在大学城的兄弟会/姐妹会商店制作一个面料和背景画廊。如果你不知道我在说什么，这是一封织物信。您可以看到它有一个白色的轮廓（背景）和一个红色的内部（前景）。好吧，我想做它，这样您就可以更改前景和背景，只需单击它的相似图像即可。

这是我到目前为止所拥有的

<script type="text/javascript">// <![CDATA[
function changeImage(filename)
{
document.mainimage.src = filename;
}// ]]></script>

每种面料都有这些：

<a href="javascript:changeImage('/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/37.jpg')">
<img src="/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/37.jpg"
alt="" width="100px" height="50px" /></a>

我真的很喜欢它的工作原理，但它只对一层有好处。无论如何我可以在它下面添加一个图层，但仍然让它显示在页面顶部？我知道我必须为这两个选项使用 Photoshop 和透明度，这没问题，但我想确保在开始创建 600 多张图像之前我可以做到这一点。

我知道我可以使用 z-index 和 css，但是由于我使用的是 wordpress，所以我在这里读到的一个示例不起作用或者我没有完全理解它，并且弄乱了我的整个页面。

另外这里是我的测试器网页，可以查看当前工作中的代码。（如果你点击海军和白色星星的图像，你可以看到一个非常粗糙的临时“A”）

提前致谢！

4

1 回答 1

1

我想我已经为你找到了解决方案。

现场演示：http: //jsfiddle.net/hM6dj/4/

或多或少，您只需要创建一些字母的图像并使其内部保持透明即可。

例子

在此处输入图像描述

您会注意到“A”周围的区域是白色的，而“A”线内的区域是透明的。

代码

然后你需要做的就是把这个图像放在另一个图像的前面。背景中的图像将通过顶部的透明图像渗出，从而形成带有图案的“A”。

注意：我为前景字母使用了数据 url，因此我不必在任何地方托管图像。你可以在这里阅读。

HTML

<div class='container'>
    <div class='foreground foreground-Black'>&nbsp;</div>
    <div class='background background-Cow'>&nbsp;</div>
</div>

<h2>Foreground Options</h2>
<input type='button' class='btnforeground' data-class='foreground-Black' value="Black" />
<input type='button' class='btnforeground' data-class='foreground-Red' value="Red" />
<input type='button' class='btnforeground' data-class='foreground-Green' value="Green" />

<h2>Background Options</h2>
<input type='button' class='btnbackground' data-class='background-Cow' value="Cow" />
<input type='button' class='btnbackground' data-class='background-Stars' value="Stars" />
<input type='button' class='btnbackground' data-class='background-Dots' value="Dots" />
​

JS

$('input[type="button"].btnforeground').click(function(){
    $('div.container > div.foreground').removeClass().addClass('foreground').addClass($(this).attr('data-class'));
});


$('input[type="button"].btnbackground').click(function(){
    $('div.container > div.background').removeClass().addClass('background').addClass($(this).attr('data-class'));
});
​

CSS

.container{
    position:relative; 
    width: 200px;
    height: 200px;    
}

.foreground, .background{
    width: 200px;
    height: 200px;
    background-repeat: no-repeat;
    position:absolute;
    z-index:100;
}

.background{
    background-repeat:repeat;       
    z-index:50;
}

.background-Cow{
background-image: 
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/424.jpg);
}

.background-Stars{
background-image: 
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/48.jpg);
}

.background-Dots{
background-image: 
url(http://www.collegiateconnectionbg.com/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/521.jpg);
}
/* Omitted due to StackOverflow character restrictions.
.foreground-Black{

    background-image: url();
}

.foreground-Green{
    background-image: url();
}

.foreground-Red{
    background-image: url();
}
*/

​</p>

编辑

使用谷歌浏览器的开发者工具，看起来你有一些 HTML 与你的 JavaScript 混合在一起（注意段落标签<p>，</p>）。

在此处输入图像描述

此外，我会将 jQuery 事件包装在一个就绪函数中（JS Fiddle 会自动执行此操作，因此在代码示例中并不明显）。

JS

$(function(){
    $('input[type="button"].btnforeground').click(function(){
        $('div.container > div.foreground').removeClass().addClass('foreground').addClass($(this).attr('data-class'));
    });


    $('input[type="button"].btnbackground').click(function(){
        $('div.container > div.background').removeClass().addClass('background').addClass($(this).attr('data-class'));
    });
});
​

编辑2

在此处输入图像描述

一些东西。

  1. 你的课：

    • 。前景
    • 。背景
    • .foreground-黑色
    • .foreground-牛
    • ETC...

我的示例中几乎没有设置任何属性。您应该能够从我提供的jsfiddle中逐字获取 css。

  1. 您已将容器命名为 class .viewer，但.container在您的 JavaScript 中引用。这些元素必须匹配，JavaScript 才能找到要更新的适当 html 元素。
于 2012-06-09T16:45:17.010 回答