...

View Full Version : Creating tabbed logo



nick2price
06-04-2012, 01:33 AM
Hi. I was hoping someone may be able to help me out. I am trying to recreate
the following image
Image removed per user request

The side you see will remain exactly the same. When the user clicks on the We Call You tab, the front changes to like a form where they can enter their phone number and click submit.

I have a few ideas where to start, but my problem is I need it to look exactly the same as it does in the image.

Is this possible and whats the best way in doing it?

Cheers

Nick

EpicWebDesign
06-04-2012, 01:58 AM
Just chop the image into pieces and create secondary tabs that are reversed. Use <div> tags for each image area and assign unique id's to each (i.e, tab1, tab1b, tab2, tab2b, etc.) with the secondary <div> set to display:none. Then change the display using a function call in JS. For example:

CSS:

#wrapper {
background-color:#4A4B60;
width:321px;
height:169px;
position:relative;
}
#tab1 {
background:url(tab1a.jpg);
width:161px;
height:40px;
position:absolute;
top: 0px;
left: 0px;
}
#tab2 {
background:url(tab2a.jpg);
width:160px;
height:40px;
position:absolute;
top: 0px;
left: 161px;
}
#tab1b {
background:url(tab1b.jpg);
width:161px;
height:40px;
position:absolute;
top: 0px;
left: 0px;
}
#tab2b {
background:url(tab2b.jpg);
width:160px;
height:40px;
position:absolute;
top: 0px;
left: 161px;
}
#contact1 {
background:url(test2.jpg);
width:321px;
height:129px;
position:absolute;
top: 40px;
}
#contact2 {
background-color: #787890;
width:321px;
height:129px;
position:absolute;
top: 40px;
color:#fff;
font-family: Arial, Verdana;
}

JS:

function toggleTabs(i) {

if (i == 1) {
var oldBG = document.getElementById("contact2");
var oldTab1 = document.getElementById("tab1b");
var oldTab2 = document.getElementById("tab2b");
var newBG = document.getElementById("contact1");
var newTab1 = document.getElementById("tab1");
var newTab2 = document.getElementById("tab2");

oldBG.style.display = "none";
oldTab1.style.display = "none";
oldTab2.style.display = "none";
newBG.style.display = "block";
newTab1.style.display = "block";
newTab2.style.display = "block";

}
if (i == 2) {
var oldBG = document.getElementById("contact1");
var oldTab1 = document.getElementById("tab1");
var oldTab2 = document.getElementById("tab2");
var newBG = document.getElementById("contact2");
var newTab1 = document.getElementById("tab1b");
var newTab2 = document.getElementById("tab2b");

oldBG.style.display = "none";
oldTab1.style.display = "none";
oldTab2.style.display = "none";
newBG.style.display = "block";
newTab1.style.display = "block";
newTab2.style.display = "block";

}


}

HTML:

<body>

<div id="wrapper">
<a href="javascript:toggleTabs(1);"><div id="tab1" style="display:block;"></div></a>
<a href="javascript:toggleTabs(1);"><div id="tab1b" style="display:none;"></div></a>
<a href="javascript:toggleTabs(2);"><div id="tab2" style="display:block;"></div>
<a href="javascript:toggleTabs(2);"><div id="tab2b" style="display:none;"></div>
<div id="contact1" style="display:block;"></div>
<div id="contact2" style="display:none;"><B>FORM GOES HERE</B></div>
</div>


</body>

You can see a working example here: http://epicwebdesignsolutions.com/clients/test-area/test.html
Obviously, I just used the tiny image you sent and mocked up my example based on that so you would need to change the height, width, margins, etc. to match the actual size of the image and form you want. (Also, I just quickly created the secondary tab images for this by mirroring the image, covering up the old text with the new background color of each tab and then adding new tab text that was a close enough match for example purposes only). You would want to make sure the text on the secondary tab images matches the exact font/size/location of the original tabs so the transition isn't as obvious. Anyway, I hope this helps you. Let me know if you have any questions.

EpicWebDesign
06-09-2012, 05:08 PM
Update to code above. I forgot to close out the <a> tags in the last two toggle tabs. The correct HTML code should be:


<body>

<div id="wrapper">
<a href="javascript:toggleTabs(1);"><div id="tab1" style="display:block;"></div></a>
<a href="javascript:toggleTabs(1);"><div id="tab1b" style="display:none;"></div></a>
<a href="javascript:toggleTabs(2);"><div id="tab2" style="display:block;"></div></a>
<a href="javascript:toggleTabs(2);"><div id="tab2b" style="display:none;"></div></a>
<div id="contact1" style="display:block;"></div>
<div id="contact2" style="display:none;"><B>FORM GOES HERE</B></div>
</div>


</body>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum