SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with advanced rollover buttons

    Hallo sitepoint, first time poster here.

    So i recently started working on my portfolio. I want to make my first page a big logo which is seperated into to three rollover buttons.

    Here is what i want my logo to look like...

    ON STATE: http://i.imgur.com/Qlp91ZK.jpg
    OFF STATE: http://i.imgur.com/SqW6YUt.jpg

    The top and bottom of the K i would like to be a rollover image aswell.

    How do i archieve this effect?
    I know how to make regular rollover buttons in a menu bar, but this i cant get my head around..

    Help is much appreciated

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Welcome to Sitepoint
    That's actually not that straight forward.

    I imagine you want the rollover to happen whenever you're in one of the regions. This isn't straight forward as all of the blocks that make up a web page are square and your shapes are angular. if the hit targets aren't a problem and you're ok having square targets then you'd need to save the three parts as png's with transparency so you can overlap them, you could use absolute positioning for this.

    Then it's just switching out the background images when you hover as normal.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah you could make this in CSS3 but it wouldn't be cross browser.

    What about a jquery plugin to mimic the triangles - I could have sworn I've seen this somewhere. Will have a look and post back if I find anything.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As the right parts of the logos are basically rotated squares you can do it for ie9+ using css transforms like this:

    http://www.pmob.co.uk/temp/irregular-rollover.htm

    Only the coloured sections will be active - apart from the circle which is an image but I supposed I could have used border-radius but I believe some browsers include the missing corners as a target area anyway when border-radius is used unlike the transform.

    I added the matrix filter transform for IE8 and IE7 but it doesn't work too well and you would be better off just using a normal image for IE8-.

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    As the right parts of the logos are basically rotated squares you can do it for ie9+ using css transforms like this:

    http://www.pmob.co.uk/temp/irregular-rollover.htm

    Only the coloured sections will be active - apart from the circle which is an image but I supposed I could have used border-radius but I believe some browsers include the missing corners as a target area anyway when border-radius is used unlike the transform.

    I added the matrix filter transform for IE8 and IE7 but it doesn't work too well and you would be better off just using a normal image for IE8-.
    That looks really good. The circle thing doesnt really bother me too much, but i will eventually do something about it.

    Im not very experienced with coding, i've only done websites within photoshop as of yet. Is it possible i can maybe borrow that piece of code, and if so, how do i do it?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by kehlet View Post
    Im not very experienced with coding, i've only done websites within photoshop as of yet. Is it possible i can maybe borrow that piece of code, and if so, how do i do it?
    Hi,

    If you just "view source " from your browser you will get the source code and you can just copy and paste.

    Here it is anyway:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Irregular rollover using css transform</title>
    <style type="text/css">
    .logo, .logo a {
    	width:400px;
    	height:200px;
    	display:block;
    	overflow:hidden;
    	position:relative;
    }
    .logo b {
    	float:left;
    	width:200px;
    	height:200px;
    	background:url(images/k-logo.png) no-repeat 0 100%;
    	z-index:3;
    	position:relative;
    }
    .logo b:hover{ background-position:0 0 }
    .logo span{
    	width:200px;
    	height:200px;
    	overflow:hidden;
    	float:left;
    	position:relative;	
    }
    .logo span span {
    	background:#666;
    	height: 400px;
    	position: absolute;
    	right: 72px;
    	top: -210px;
    	width: 400px;
    	z-index: 2;
    	-ms-transform:rotate(45deg);
    	-moz-transform:rotate(45deg);
    	-webkit-transform:rotate(45deg);
    	-o-transform:rotate(45deg);
    	transform:rotate(45deg);
    }
    .logo i i{
    	position:absolute;
    	right:0;
    	bottom:0;
    	width:200px;
    	height:100px;	
    	overflow:hidden;
    }
    .logo i i {
    	background:#999;
    	height: 200px;
    	position: absolute;
    	right:0;
    	top: 142px;
    	width: 200px;
    	z-index: 2;
    	-ms-transform:rotate(45deg);
    	-moz-transform:rotate(45deg);
    	-webkit-transform:rotate(45deg);
    	-o-transform:rotate(45deg);
    	transform:rotate(45deg);
    }
    .logo span span:hover,.logo i i:hover { background:#f70 }
    
    </style>
    <!--[if lte IE 8]>
    <style type="text/css">
    .logo i i {
       /* IE8+ - must be on one line, unfortunately */ 
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
       
       /* IE6 and 7 */ 
       filter: progid:DXImageTransform.Microsoft.Matrix(
                M11=0.7071067811865474,
                M12=-0.7071067811865477,
                M21=0.7071067811865477,
                M22=0.7071067811865474,
                SizingMethod='auto expand');
       top:100px;
    			right:40px;
    } 
    
    .logo span span {
       /* IE8+ - must be on one line */ 
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
       /* IE6 and 7 */ 
       filter: progid:DXImageTransform.Microsoft.Matrix(
                M11=0.7071067811865483,
                M12=0.7071067811865467,
                M21=-0.7071067811865467,
                M22=0.7071067811865483,
                SizingMethod='auto expand');
       top:-365px;
    			right:82px;
    } 
    </style>
    <![endif]-->
    </head>
    
    <body>
    <div class="logo"><a href="#"><b></b><span><span></span></span><i><i></i></i></a></div>
    </body>
    </html>
    The css should go in an external css file making sure to update the path names correctly. The IE8- conditional comments should also call an IE only css file.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Irregular rollover using css transform</title>
    <link href="css/main.css" rel="stylesheet" media="screen, projection" type="text/css"> 
    <!--[if lte IE 8]>
    <link href="css/ie8.css" rel="stylesheet" media="screen, projection" type="text/css"> 
    <![endif]-->
    </head>
    <body>
    <div class="logo"><a href="#"> <b></b><span><span></span></span><i><i></i></i></a></div>
    </body>
    </html>
    The main css goes in the main css file and the IE only css goes inside the IE only css file. (Remember not to place the style tags in the external css file.)


    The html you need is this:

    Code:
    <div class="logo"><a href="#"> <b></b><span><span></span></span><i><i></i></i></a></div>
    (Excuse my non standard use of the b and i element as it saved classing all the elements.)

    The image I used is this one:

    http://www.pmob.co.uk/temp/images/k-logo.png
    Last edited by Paul O'B; Jan 30, 2013 at 15:09.

  7. #7
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, ill look back into this when i get a little more experienced with coding.


Tags for this Thread

Bookmarks

Posting Permissions

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