Reputation: 11348
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?
Upvotes: 0
Views: 107
Reputation: 7211
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.
Upvotes: 0
Reputation: 66396
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..
Upvotes: 0
Reputation: 73055
There are two ways:
use SVG to draw the shapes, with a fallback for older versions of IE.
Use background images. on normal shaped divs.
Upvotes: 2
Reputation: 717
Could use absolutely positioned pngs with image replacement on hover, then throw a rectangular div inside there
Upvotes: 3