Hi DP, I wonder, how to make overlapping hover button like with layout like this? is it possible with div tag? thank you in advance Best regards, Ridwan Sugi
...and an <img> plus <map>... roughly? <html> <head> <style type="text/css"> div{ width: 250px; height: 250px; overflow: hidden; background: blue url(http://redshieldminisite.com/Public/hover.jpg) no-repeat -250px 0px; } div > img{ opacity: 0.8; } </style> <script type="text/javascript"> function hovered_in(that,yes){ if (yes) that.parentNode.parentNode.getElementsByTagName('img')[0].style.opacity = '0.2'; else that.parentNode.parentNode.getElementsByTagName('img')[0].style.opacity = '0.8'; } </script> </head> <body> <div> <img border="0" src="http://redshieldminisite.com/Public/hover.jpg" alt="my_butt" usemap="#my_butt_map"> <map name="my_butt_map"> <area shape="poly" coords="125,5, 185,65, 125,125, 65,65" alt="service" href="#" onmouseover="hovered_in(this, true)" onmouseout="hovered_in(this, false)"> </map> </div> </body> </html> HTML:
Thank you for the answer Dewantara, I just found out that we can achieve the overlapping hover by changing the hover div.tag size Kind regards, Ridwan Sugi
With some extra span: <ul id="demoMenu"> <li><a href="#"><span>Contact</span></a></li> <li><a href="#"><span>Service</span></a></li> <li><a href="#"><span>About Us</span></a></li> <li><a href="#"><span>Portfolio</span></a></li> </ul> Code (markup): It can be done using CSS3 without any images, and perfectly mouse-over so you're not playing games with area maps or hover areas smaller than the rotations. #demoMenu { list-style:none; width:16em; margin:0 auto; background:#666; -webkit-transform: translate(5.76em,5.76em) rotate(45deg); -ms-transform: translate(5.76em,5.76em) rotate(45deg); transform: translate(5.76em,5.76em) rotate(45deg); /* Translation Math: width * sqrt(2) / 4 */ } #demoMenu li { float:left; width:8em; line-height:8em; margin-right:-1px; text-align:center; } #demoMenu li:nth-child(odd) { border-right:1px solid #666; } #demoMenu li:nth-child(1), #demoMenu li:nth-child(2) { border-bottom:1px solid #666; } #demoMenu a { display:block; text-decoration:none; color:#FFF; } #demoMenu a span { display:block; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); } #demoMenu li:active, #demoMenu a:focus, #demoMenu a:hover { background:#006; -webkit-box-shadow: inset 0 0 1em #00C, 0 0 1em #00C; box-shadow: inset 0 0 1em #00C, 0 0 1em #00C; } Code (markup): Doesn't work in IE8/earlier, OH WELL. Users of that browser will get a square menu instead of diamond shaped, I wouldn't sweat that. Live copy here: http://www.cutcodedown.com/for_others/redShield/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/redShield/ Is wide open for easy access to the bits and pieces. No images, minimal markup -- tested working in Opera 12 and 17, the latest each of Chrome, FF and Safari, and IE 9 through 11. "broken" in IE8/earlier showing square menu, but that's sufficient graceful degradation that users of those browsers can still use the page, which with legacy IE on it's way out the door, that's "close enough" in my book.