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

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.

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.

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-.

Quote:

Originally Posted by Paul O'B

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? :)

Quote:

Originally Posted by kehlet

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>  </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">  </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

Thanks, ill look back into this when i get a little more experienced with coding.