Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post

    Creating tabbed logo

    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
    Last edited by WA; 06-26-2012 at 11:41 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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:
    Code:
    #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:
    Code:
    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:
    Code:
    <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/cl...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.
    Last edited by EpicWebDesign; 06-04-2012 at 06:02 PM. Reason: provided sample code and working example

  • Users who have thanked EpicWebDesign for this post:

    nick2price (06-09-2012)

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Update to code above. I forgot to close out the <a> tags in the last two toggle tabs. The correct HTML code should be:

    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •