Dynamic 'Image Map'?

by **magicthegatherist** on Tue Mar 04, 2008 7:21 am

What would be the easiest way to make an image map that would behave dynamically?

Essentially, I'm making an image with 6 'buttons' arranged in a circle. Each would be set to be a link, and this is easy enough using an image map.

I want it to behave 'dynamically' though, so whenever the user hovers over a linked area, the image within the mapped coordinates changes.

I know this is probably going to be totally different than an image map in the end, but any advice would be great

by **rangana** on Tue Mar 04, 2008 7:29 am

Image map would'nt be ideal (for me). You could slice up your image, so that having the hover effects would be easy enough. I could give you a sample

..and besides it's difficult to load a page having a number of images.

Hope make some sense

by **magicthegatherist** on Tue Mar 04, 2008 7:32 am

See, I would use a table, or something else to slice it up, the problem is though, that the arrangement is circular.

I would certainly do this if it were easier... Do you know an easy way to achieve this with sliced images?

by **rangana** on Tue Mar 04, 2008 7:55 am

I could see all posibilites in CSS, except when it is a sliced image. I could'nt think of a better way.

In logic, we have a whole image, we map the big image and adjust the coordinates as to provide a link.

I can't figure this one out using image map. My apologies... :mrgreen:

by **magicthegatherist** on Tue Mar 04, 2008 8:42 am

Well, any example that can be provided would be great!

I'm not bound to any specific format, so CSS, imagemaps, anything!

Hope you can provide an example of sorts...

Thanks in advance

by **rangana** on Tue Mar 04, 2008 8:45 am

You could have this code as a start:

Code: Select all: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> html,body{spacing:0;padding:0;} #right { width: 260px; padding: 0px; border: 3px solid #211E08; margin:1px auto; text-align:center; } ul { list-style-type: none; margin: 0px; padding: 0px; } li { margin: 1px; padding: 0px; width: 100px; text-align: right; } #right a { width: 100px; display: block; background: #222; color: #efefff; font: 11px Tahoma, Arial; border-left: 12px solid #9999cc; text-decoration: none; margin: 1px auto; padding: 0px; border-right:5px solid #cfcfcf; line-height:30px; } #right a:hover { color: #fff; background: #B8AA7D; border-left: 12px solid #0000ff; } </style> <title>My Page</title> </head> <body> <div id="right"> <h3>Menus</h3> <ul> <li><a href="#">Home</a></li> <li><a href="#">DevPPL.com</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Links</a></li> </ul> <br/> </div> </body> </html>

Basically, it's not a circle, it's just a simple hover effects, but with great effects (for me).

Hope this helps

Dynamic 'Image Map'?

Dynamic 'Image Map'?

Who is online