Image map coding?

about lee · Feb 13, 2011

Ill give anyone 500FP$ to who can make the image below, Where the Google chrome is clickable to download Google chrome. I don't want the whole image clickable as its my sites background. I want just around the google chrome area only clickable.

http://i56.tinypic.com/167o9ir.jpg

Now i want it to be placed in the CSS part not in the index file or what ever. So heres the CSS code for that image/background.

Code:

.mainbox{
width: 800px;
height: 450px;
background-image:url('images/mainbg1.png');
background-repeat:no-repeat;
margin: 0px auto; 
padding: 10px;

Bapinder · Feb 13, 2011

The easiest way is to use a separate image. I don't if it's possible with css, but it is with HTML.

Code:

<html>
<body>
<img src="http://i56.tinypic.com/167o9ir.jpg" width="820" height="450" alt="Background" border="0" usemap="#image" />
<map name="image">
<area shape="circle" coords="650,350,30" href="#" alt="Google Chrome" />
</map>
</body>
</html>

OLegacy · Feb 13, 2011

Code:

.mainbox {
background:url(CHROME IMAGE HERE) no-repeat bottom right #HEX OF BACKGROUND;
width:800px;
height:450px;
-webkit-border-radius:3px solid #fff;
-moz-border-radius:3px solid #fff;
border-radius:3px solid #fff;

I wasn't sure if you wanted the border radius or not.

about lee · Feb 13, 2011

OLegacy said:

Code:

.mainbox {
background:url(CHROME IMAGE HERE) no-repeat bottom right #HEX OF BACKGROUND;
width:800px;
height:450px;
-webkit-border-radius:3px solid #fff;
-moz-border-radius:3px solid #fff;
border-radius:3px solid #fff;

I wasn't sure if you wanted the border radius or not.

Erm, im not asking for that. I can do all that myself.

Bapinder · Feb 13, 2011

Bapinder said:
The easiest way is to use a separate image. I don't if it's possible with css, but it is with HTML.

Code:

<html> <body> <img src="http://i56.tinypic.com/167o9ir.jpg" width="820" height="450" alt="Background" border="0" usemap="#image" /> <map name="image"> <area shape="circle" coords="650,350,30" href="#" alt="Google Chrome" /> </map> </body> </html>

This should work. There is no way to do it with only css.