Wednesday, December 23, 2009

Tutorial for a fake image map with CSS?

i want to make a fake image map for my myspace.



a fake image map is a picture, and when you hover the picture changes and it is a link.



since i am making it for myspace it needs to be made with CSS.



the things is that the only good tutorial i have found for it is making it with javascript, which wont work.



that tutorial is here:



http://killinginthename.com/index.php?x=...



can you find me a tutorial making a fake image map with CSS?



p.s. the ones on createblog.com dont work, so none of those please.



p.s.s. i have found one before, but i lost the URL, so it DOES exist !



Tutorial for a fake image map with CSS?

You can get high quality css styles for free.



Just link your css link with this site it is free.



The styles are absolutley awsome and free.



No need to learn graphics and css coding.



http://www.csszengarden.com



Tutorial for a fake image map with CSS?

An image map is an image that contains hotspots with links.



Dont you want an image roll over?



Well I found one by googling: http://www.webcredible.co.uk/user-friend...



Hope that helps! Else google: "Image Rollover CSS".



Tutorial for a fake image map with CSS?

you can do that using position:absolute for your links and position them accordingly to your image. but to make the links active, you have to have a transparent gif image as a background and then do a a:hover on the links to change the background to the one you want.



sample page: http://www.geocities.com/omega_archer200...



i placed 2 links with red borders over the cat's eyes(so you can see) with a red a:hover



transparent gif download link:



http://www.geocities.com/omega_archer200...



NOTE!!!



the overflow:hidden is needed for this or else the position of your links wont stay where it should. as you will see in the sample, the links will move and stay in position when you resize your browser



you can use position:relative but the links will leave a gap that will need additional code to remove it.

No comments:

Post a Comment

 
dogs