javascript - 如何让这些功能在同一页面上运行

Question

我的措辞可能全错，但这就是我所拥有的。

http://jsfiddle.net/ozzy/Ute6B/

现在这工作正常，它是一个广告系统，我没有做任何惊天动地的事情。

上面的例子是一个横幅。

现在，如果我添加以下代码:ASWELL(一切都变成梨形)，那么我显然是一个旋钮，并且已经翘起一些东西。由于函数不能有 ID，我认为它一定是发生冲突的鼠标事件，因此不允许我在两个代码上独立工作的功能...本质上，如果您将下面的代码添加到 fiddle 中...麻烦的是，我将使用 2 组代码创建一个辅助 fiddle 。添加以便您查看问题。

http://jsfiddle.net/ozzy/9zcqW/

我们的想法是，每个广告都是独一无二的，并且信息链接的悬停功能在每个广告上独立工作，在某些情况下，我们可能需要每页 4 个广告......所以真的非常感谢任何帮助......我之前的帖子在这里:::可能会对已经收到的答案有所启发，当我发布该帖子时我们没有互联网，所以现在这是这个问题的更新版本...

Give this function an id

Answer 1

你也可以尝试一下，我不确定这是否是完美的方法，但它可以工作

demo here

JavaScript

function mouseOver(ban_id)
{
    if(ban_id=="flashdivb")
        document.getElementById("flashdivb").className="flash-abgb";
    else if(ban_id=="flashdivsb")
            document.getElementById("flashdivsb").className="flash-abgsb";
}
function mouseOut(ban_id)
{
    if(ban_id=="flashdivb")
        document.getElementById("flashdivb").className="flash-ib";
    else if(ban_id=="flashdivsb")
            document.getElementById("flashdivsb").className="flash-isb";
}

html

<!--html code for the banner-->
<div class="banner">
         <div class="bannerAd">
            <img src="http://sitehelp.com.au/images/bannerad.png">
            <a href="somelink.html">
                <div id="flashdivb" class="flash-ib"></div>
            </a>

            <a href="/media">
                <div class="ibhover" onmouseover="mouseOver('flashdivb')" onmouseout="mouseOut('flashdivb')"> </div>
            </a>
        </div>
    </div>
<!--html code for the sidebar-->
<div class="sidebar">
         <div class="sidebarAd">
            <img src="http://sitehelp.com.au/images/sidebarad.png">
            <a href="somelink.html">
                <div id="flashdivsb" class="flash-isb"></div>
            </a>

            <a href="/media">
                <div class="isbhover" onmouseover="mouseOver('flashdivsb')" onmouseout="mouseOut('flashdivsb')"> </div>
            </a>
        </div>
    </div>

CSS

/*css for the banner*/
h3 { font-family:Arial, Helvetica, sans-serif;
color:#444444;

}
/*header advert*/
.banner {
width:468px;
height:60px;
border:1px solid #aaaaaa;
position:relative;
}
.bannerAd{
position:absolute;
top:0px;left:0px;
}
.flash-ib {
    background-image: url("http://sitehelp.com.au/images/bannerinfo.png");
    height: 60px;
    width: 468px;
    position:absolute;
    top:0px;left:0px;
    /*opacity:0.4;opacity option*/
}
.flash-abgb {
    background-image: url("http://sitehelp.com.au/images/bannerinfolink.png");
    height: 60px;
    width: 468px;
    position:absolute;
    top:0px;left:0px;
    /*opacity:0.8;opacity option*/
}
div.ibhover {
    height: 20px;
    width: 25px;
    position: absolute;
    top: 40px;
    left: 443px;
}
/*css for the sidebar*/
.sidebar {
width:250px;
height:250px;
border:1px solid #aaaaaa;
position:relative;
}
.sidebarAd{
position:absolute;
top:0px;left:0px;
}
.flash-isb {
    background-image: url("http://sitehelp.com.au/images/sidebarinfo.png");
    height: 250px;
    width: 250px;
    position:absolute;
    top:0px;left:0px;
    /*opacity:0.4;opacity option*/
}
.flash-abgsb {
    background-image: url("http://sitehelp.com.au/images/sidebarinfolink.png");
    height: 250px;
    width: 250px;
    position:absolute;
    top:0px;left:0px;
    /*opacity:0.8;opacity option*/
}
div.isbhover {
    height: 20px;
    width: 25px;
    position: absolute;
    top: 230px;
    left: 225px;
}