div with rounded forms

Question

I'm trying to create a web design and there are a bit strange forms, something like this:

when the user hover on 1 section the background should change only for it:

the same for the second and third one:

Hope I'm clear...

I have no idea what technology should I use in order to achieve this affect. Can anyone please help?

Answer 1

May this help http://jsfiddle.net/JeaffreyGilbert/G3VG7/

Answer 2

There is a CSS3 syntax boreder-radius and you can do this with it, but you had do the work here , I mean you had set the random pixels and look for the one which suits best. For example here it is -- http://jsfiddle.net/divinemamgai/Ld7He/

OR

Maybe you should keep the main background image as white for images 1 and 3 and for image 2 use png based background-image and change it on mouseover using Jquery and don't forget to keep the highest z-index for image 2.

Hope this helps you.

Answer 3

I would go with three separate images, each with the whole background and one "selected" area - on hovering a div just replace the background to the one having that div as "selected".

Quick example for the JS code:

function ReplaceBg(oDiv, num) {
   oDiv.parentNode.style.backgroundImage = "url(images/background_" + num + ".png)";
}

function RestoreBg(oDiv) {
   oDiv.parentNode.style.backgroundImage = "url(images/background.png)";
}

And the HTML:

<div style="background-image: url(images/background.png);">
   <div onmouseover="ReplaceBg(this, 1);" onmouseout="RestoreBg(this);">First</div>
   <div onmouseover="ReplaceBg(this, 2);" onmouseout="RestoreBg(this);">Second</div>
   <div onmouseover="ReplaceBg(this, 3);" onmouseout="RestoreBg(this);">Third</div>
</div>

Hope the idea is clear enough..

Answer 4

There are two ways:

1. use SVG to draw the shapes, with a fallback for older versions of IE.

2. Use background images. on normal shaped divs.

Answer 5

Could use absolutely positioned pngs with image replacement on hover, then throw a rectangular div inside there