any css experts? image map with css? - GoFuckYourself.com

roly · 07-08-2010, 02:08 AM

hi

has anyone got an idea of where i'm going wrong. i know how to do an image map with html, but this needs to be in css.

i'm trying to map part of an image (contact_bg.jpg) on a css page, but the code i've tried below maps part of the page that i have given coordinates for and not the image. so i want to know how to make my coordinated relative to the image and not the page.

Code:

.contactInfo	{
	width:220px;
	height:260px;
	padding-left:10px;
	background:url(../images/contact_bg.jpg) no-repeat top right;
	display:block;
}


.contactInfo a{
position: absolute;
top: 110px;
left: 260px;
width: 30px;
height: 30px;

}

.contactInfo a:hover{
border:5px solid #000000
}

the hover part of the code is just so i can see where it is on the page.

anyone got any ideas where i'm going wrong?

roly · 07-08-2010, 02:55 AM

its ok i've sorted it. thanks anyway.

munki · 07-08-2010, 03:00 AM

Install firebug on your firefox setup... makes hunting down lil things like this a breeze.

roly · 07-08-2010, 06:07 AM

Quote:

Originally Posted by munki

Install firebug on your firefox setup... makes hunting down lil things like this a breeze.

thanks, i'll take a look at it.

Barefootsies · 07-08-2010, 06:08 AM

For future with CSS/HTML

Prez ICQ: 3117950 (Design/CSS/HTML)

07-08-2010, 02:08 AM	#1
roly Confirmed User Join Date: Aug 2002 Posts: 1,844	any css experts? image map with css? hi has anyone got an idea of where i'm going wrong. i know how to do an image map with html, but this needs to be in css. i'm trying to map part of an image (contact_bg.jpg) on a css page, but the code i've tried below maps part of the page that i have given coordinates for and not the image. so i want to know how to make my coordinated relative to the image and not the page. Code: .contactInfo { width:220px; height:260px; padding-left:10px; background:url(../images/contact_bg.jpg) no-repeat top right; display:block; } .contactInfo a{ position: absolute; top: 110px; left: 260px; width: 30px; height: 30px; } .contactInfo a:hover{ border:5px solid #000000 } the hover part of the code is just so i can see where it is on the page. anyone got any ideas where i'm going wrong? Last edited by roly; 07-08-2010 at 02:21 AM..

07-08-2010, 03:00 AM	#3
munki Do Fun Shit. Industry Role: Join Date: Dec 2004 Location: OC Posts: 13,393	Install firebug on your firefox setup... makes hunting down lil things like this a breeze. __________________ “I have the simplest tastes. I am always satisfied with the best.” -Oscar Wilde

07-08-2010, 06:08 AM	#5
Barefootsies Choice is an Illusion Industry Role: Join Date: Feb 2005 Location: Land of Obama Posts: 42,635	For future with CSS/HTML Prez ICQ: 3117950 (Design/CSS/HTML) __________________ Should You Email Your Members? Link1 \| Link2 \| Link3 Enough Said. "Would you rather live like a king for a year or like a prince forever?"

07-08-2010, 02:55 AM	#2
roly Confirmed User Join Date: Aug 2002 Posts: 1,844	its ok i've sorted it. thanks anyway.