I've been coding all day Java and CSS+ html

**Montecristoe** · 02-27-2010

Hey guys, I've been working on the Buypoe.com network all day. Not on BuyPoe.com, but on Forum Skins.

I've coded up a new style of headers. It's actually pretty sweet.

You can check it out at http://forum-skins.com

I will be redesigning the network header on the site soon with my newly coding style.

Heres the code I made today. It's sloppy but it does the job.

Code:

<!--
.box2 {
    background-image: url(vBheader/repeat2.png);
    background-repeat: repeat-x;
}
-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function changeIt(objName)
{
    //The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
    var obj = document.getElementById(objName);
    
    //An array that hold the IDs of images that we mentioned in their DIV blocks
    var objId = new Array();
    
    //Storing the image IDs into the array starts here
    objId[0] = "image1";
    objId[1] = "image2";
    objId[2] = "image3";
    objId[3] = "image4";
    objId[4] = "image5";
    //Storing the image IDs into the array ends here
    
    //A counter variable going to use for iteration
    var i;
    
    //A variable that can hold all the other object references other than the object which is going to be visible
    var tempObj;
    
    //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
    //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
    //of the if statement within this loop.
    for(i=0;i<objId.length;i++)
    {
        if(objName == objId[i])
        {
            obj.style.display = "block";
        }
        else
        {
            tempObj = document.getElementById(objId[i]);
            tempObj.style.display = "none";    
        }
    }
    return;    
}
</script>
</head>


<style type="text/css">
<!--
.box1 {
    background-image: url(vBheader/repeat.png);
    background-repeat: repeat-x;
}

#apDiv1 {
    position:absolute;
    width:722px;
    height:115px;
    z-index:1;
    left: 286px;
    top: 157px;
}
.container {
    margin-top: -64px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}
-->
</style>
</head>

<body>
</div>
<div id="image2" style="display:none">
<div class="box2"><center><img src="vBheader/smallheader.png" border="0" alt="two" usemap="#m_smallheader" alt="" /><map name="m_smallheader" id="m_image2">
<p>&nbsp;</p>
<area shape="rect" coords="668,30,758,46" href="http://forum-skins.com/?page_id=3#ecwid:category=161233&mode=category&offset=0&sort=normal" title="Premium Vbulletin Forum Skins" alt="Premium Vbulletin Forum Skins" />
<area shape="rect" coords="616,30,658,46" href="http://forum-skins.com/?page_id=3#ecwid:category=171882&amp;mode=category&amp;offset=0&amp;sort=normal" title="Special Forum Skin Deals" alt="Special Forum Skin Deals" />
<area shape="rect" coords="545,30,607,46" href="http://forum-skins.com/forum/forumdisplay.php?f=10" title="Free vBulletin 4.0 Forum Skins" alt="Free vBulletin 4.0 Forum Skins" />
<area shape="circle" coords="794,38, 12" href="#" onclick="changeIt('image1');"></a>

</center></div>
</div>

<div>
  <div class="box1">
    <center>
      <p><img name="image1" src="vBheader/black header.png" width="800" height="100" border="0" id="image1" usemap="#m_black20header" alt="" />
        <map name="m_black20header" id="m_black20header">
          <area shape="rect" coords="665,79,755,95" href="http://forum-skins.com/?page_id=3#ecwid:category=161233&mode=category&offset=0&sort=normal" title="Premium Vbulletin Forum Skins" alt="Premium Vbulletin Forum Skins" />
          <area shape="rect" coords="613,79,655,95" href="http://forum-skins.com/?page_id=3#ecwid:category=171882&amp;mode=category&amp;offset=0&amp;sort=normal" title="Special Forum Skin Deals" alt="Special Forum Skin Deals" />
          <area shape="rect" coords="542,79,604,95" href="http://forum-skins.com/forum/forumdisplay.php?f=10" title="Free vBulletin 4.0 Forum Skins" alt="Free vBulletin 4.0 Forum Skins" />
          <area shape="circle" coords="791,87, 12" href="#" onclick="changeIt('image2');" />
        </map>
      </p>
    </center>
  </div>
  <div id="image2" style="display:none"> <img src="2.jpg" border="0" alt="two" /> </div>
</div>
<p>&nbsp;</p>
</body>
</html>

Similar Threads:

**Dinoboy** · 02-27-2010

Dunno if you've heard about it, but check out MooTools. It's amazing.

**Devereux** · 02-27-2010

Umm.. just thought i'd point out that, that is JavaScript not Java.
They are 2 epicly different langauges (I would know

)

I dont understand why you are putting it up on that site instead of here :S

**Montecristoe** · 02-27-2010

Ah, thats just a typo on my spot. As you can see I posted it as JS on forum-skins.com and vbulletin.org

**Montecristoe** · 02-27-2010

Originally Posted by Davee

Ah, thats just a typo on my spot. As you can see I posted it as JS on forum-skins.com and vbulletin.org

Hm, mootools looks promising, it has some things I'd like to integrate into future themes and possibly update the current JS.

Thread: I've been coding all day Java and CSS+ html

LinkBack

Thread Tools

Search Thread

Display

I've been coding all day Java and CSS+ html

Thread Information

Users Browsing this Thread

Posting Permissions