What's the best way to show different colors (highlighted) over an image into sections by using shapes (various shapes) and codes only, without using other images. For example, let's say I have an image of a red apple on a webpage. What I'd like to do is break up the apple into 3 sections (using coordinates, just like a map area) and show a different color (it could be solid colors, colors with opacity or gradient) for each section WITHOUT the use of other images. What's the best way to achieve this? Looking for someone to demo this for me.
The HTML <ul id="m-east"> <li id="chd"><a href="#">Chad</a></li> <li id="cyp"><a href="#">Cyprus</a></li> <li id="egy"><a href="#">Egypt</a></li> <li id="gre"><a href="#">Greece</a></li> <li id="irq"><a href="#">Iraq</a></li> <li id="isr"><a href="#">Israel and Palestinian Territories</a></li> <li id="jor"><a href="#">Jordan</a></li> <li id="leb"><a href="#">Lebanon</a></li> <li id="lib"><a href="#">Libya</a></li> <li id="sau"><a href="#">Saudi Arabia</a></li> <li id="sin"><a href="#">Sinai</a></li> <li id="sud"><a href="#">Sudan</a></li> <li id="syr"><a href="#">Syria</a></li> <li id="tur"><a href="#">Turkey</a></li> </ul> How the css works The basis of how it all works is detailed below, I've only used Egypt & Israel as examples, as it may look too confusing otherwise. Once you've grasped the idea from these two you can check out the complete css file. The css file has comments using the titles below. Visible image map container This outlines the overall size of the image or it's container element, the path to the image and a background color if needed. #m-east { position: relative; width: 500px; height: 364px; background: #5ae url(../css_dev/images/middle-east.png) no-repeat; padding: 0; } List styling #m-east li { display: block; position: absolute; list-style: none; margin: 0; padding: 0; } Link styling #m-east a { display: block; text-indent: -9999px; text-decoration: none; outline: none; cursor: default; } Country position on the image Basically in the css section below, you are stipulating the visible image position (from the left and top edges). #egy { left: 148px; top: 92px; } #isr { left: 340px; top: 82px; z-index: 30; } An explaination of z-index The image area being targeted is a rectangle, you can view the image with the blocks marked to see what I mean. Because a lot of the countries overlap some will need some assistance to show up, hovering around the Chad/Libya border is an example of this. With your mouse that is. Hovering around African borders is not recommended, very dodgy. If you did look at the block image you would have noticed that Israel is nearly completely over lapped by the surrounding countries. To allow a reasonable chance of Israel showing up, I've given it a z-index value (30). This basically means it is higher in the stack than the larger Jordan (z-index 20), effectively taking it's territory to the east of the Dead Sea. Mmm, so unlike Israel to do that ironic smile Iraq is also assigned a z-index value (10). #irq {left: 424px; top: 0px; z-index: 10;} #isr {left: 340px; top: 82px; z-index: 30;} #jor {left: 350px; top: 86px; z-index: 20;} For a full and very good explaination of z-index go to the site '24ways (to impress your friends)', which has an article called Z's not dead baby, Z's not dead on the subject. Country width & height This is where you set the country width & height. #egy a { width: 212px; height: 223px; } #isr a { width: 29px; height: 77px; } Country hover image position And lastly you tell the browser where to look for the hover image (below the visible image). This hidden image must not have overlaps, as they will show up when called up by hovering on the intended country. Remember you are calling up a rectangle. If you study the hidden image, none of the countries overlap. #egy a:hover { background: url(../css_dev/images/middle-east.png) -264px -622px no-repeat; } #isr a:hover { background: url(../css_dev/images/middle-east.png) -298px -439px no-repeat; } Adding opacity to an image A tip: When you are lining up the css hovered country image to the actual country positions, add some opacity to the hovered image so that you can see the outline below. It can save a lot of time. It won't validate until CSS3 comes along, but you can ditch it once you are happy with the final product. I have left the opacity css on Libya as an example for you to see on the above map. Until CSS3 is released and opacity is part of it, different browsers have different ways for setting it. I've listed them below. Most browsers (the css3 standard) opacity: 0.6; IE8 -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=60)"; Early IE browsers (IE5, IE6 & IE7) filter: alpha(opacity=60); Early Mozilla browsers -moz-opacity: 0.60; Early Safari/Konqueror browsers -khtml-opacity: 0.6; #lib a:hover { opacity: 0.6; -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-opacity: 0.60; -khtml-opacity: 0.6; } A note on cascading order Cascading Style Sheets work in an ordered way, so the 6th line will take priority over the 5th etc. The Sinai is a good example of this. If the css for Sinai were to appear before the Egyptian css, the Sinai flag would not appear, as Egypt covers it entirely. To quickly prove that, you can move the Sinai line in the HTML (highlighted in red) above the Egyptian one. As explained earlier, z-index would deal with this if necessary, but getting the order right first makes life easier. <li id="sin"><a href="#">Sinai</a></li> <li id="egy"><a href="#">Egypt</a></li>
You can see a demo live at http://www.tankedup-imaging.com/css_dev/rollover.html No need for paying or Itrader, If anyone found this useful give a thumbs up!
This is close, but not exactly what I am looking for. I need something that will display a color overlay without the use of additional images. There needs to be only one image, in this example, an image of countries, but I need to be able to group certain countries by color with the use of shapes. For example, I'd want to show Libya and Egypt as orange, Chad and Sudan as green, etc. Thanks.
Once you use that tutorial to learn image mapping, You can use a few simple tricks to get what you want. Its really not that hard at all.