HTML CSS examples for CSS Widget:Table
Partitioned image in a table
<html> <head> <title>Lorem ipsum dolor sit amet, consectetur adipisc</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!--from w ww . j a v a 2 s .c o m--> height:100%; width:100%; margin:0; padding:0; border:none; } body { height:100%; width:100%; margin:0; padding:0; border:none; } #wrapper { height:100%; width:100%; } .image-holder { width:51%; position:relative; background-color:Chartreuse; } .image-background { width:100%; display:block; } .hotspot-container { height:100%; width:100%; position:absolute; top:0; left:0; } #L01 { width:34%; height:34%; position:absolute; left:0%; top:0%; border:2px solid yellow; } #L02 { width:34%; height:34%; position:absolute; left:34%; top:0%; border:2px solid blue; } #L03 { width:34%; height:34%; position:absolute; left:67%; top:0%; border:2px solid pink; } #L04 { width:34%; height:34%; position:absolute; left:0%; top:34%; border:2px solid OrangeRed; } #L05 { width:34%; height:34%; position:absolute; left:34%; top:34%; border:2px solid grey; } #L06 { width:34%; height:34%; position:absolute; left:67%; top:34%; border:2px solid BlueViolet; } #L07 { width:34%; height:34%; position:absolute; left:0%; top:67%; border:2px solid Chartreuse; } #L08 { width:34%; height:34%; position:absolute; left:34%; top:67%; border:2px solid yellow; } #L09 { width:34%; height:34%; position:absolute; left:67%; top:67%; border:2px solid blue; } </style> </head> <body> <div id="wrapper"> <div class="image-holder"> <img src="https://www.java2s.com/style/demo/Firefox.png" class="image-background"> <div class="hotspot-container"> <div id="L01"> Lor </div> <div id="L02"> Lor </div> <div id="L03"> Lor </div> <div id="L04"> Lor </div> <div id="L05"> Lor </div> <div id="L06"> Lor </div> <div id="L07"> Lor </div> <div id="L08"> Lor </div> <div id="L09"> Lor </div> </div> </div> </div> </body> </html>