これらの機能を同じページで動作させる方法

Question

私のフレーズはおそらくすべて間違っていますが、これは私が持っているものです。

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

さて、これは、正常に動作し、その広告システムのために私は何も地球粉砕を作っています。

上記の例はバナーです。

私はこのコードを追加します：ASWELL（それはすべて梨の形になります）ので、私は明らかにノブであり、何かをコックしました。関数がIDを持つことができないので、私はそれが衝突しているマウスイベントでなければならないので、私は両方のコードで独立して仕事をした機能を許可しません...本質的に、 2組のコードを使って2次的なフィドルを作成します。あなたが問題を見るために追加されました。

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

アイデアはそう本当に...広告のそれぞれがユニークで、情報リンクのホバー上の機能は、我々はページあたり4つの広告を必要とするかもしれないいくつかのケースでは、各広告にindependantly動作することですすべてのヘルプは大歓迎...私の以前の記事をここ:::既に受信の回答にいくつかの光を当てることが、私は今、これはこの質問にバージョンが更新されていることを掲示するとき、私たちはインターネットを持っていませんでし...

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; 
}