Hey ... I had a look through the older threads to see if I could find a similar topic. No luck ... so I had to start a new thread ... sorry in advance if this is a repeated request.

 

I have this problem:

 

1. I want to add a map to a page on my website. I would to make it roll-over to a new colour (or effect) when you mouse-over a section of the map, and for it to be independently linkable from the other sections.

 

2. So take the below map of London, and imagine each district is a separate independent section.

 

 

What will be the best way to make this look impressive with a nice roll-over effect, and not just use hotspot (or something like that).

 

Is there any easy short cut that I can't find?

 

Thanks in advance if you have any recommendations.

 

Jon

http://www.tankedup-imaging.com/css_dev/rollover.html

 

Take a look at the link above, this may well be what you are after.

That looks promising Sogo ... thx a lot

the two easiest ways would be to split each individual section up and make backgrounds transparent and position with css and then add the rollover affect,

 

OR you could do it on flash and cut out each individual section and apply the rollover to each movieclip will probably be a quicker way

the two easiest ways would be to split each individual section up and make backgrounds transparent and position with css and then add the rollover affect,

 

OR you could do it on flash and cut out each individual section and apply the rollover to each movieclip will probably be a quicker way

Thanks ... I guess I did something in between. I used the coding structures on the first example, changed things around quite a bit, and it worked a treat. Much better than I had hoped for in fact!

 

I thought about flash, but I hate websites with flash. That would have been an absolute last resort

 

...............

 

I have one more related problem I was hope you guys (and galls) could help with.

 

I have put this first map in an "iframe" ... the segments link to another map.

 

<iframe src="test3.html" height="400" width="400" scrolling="no" frameborder="0"></iframe>

 

This works great because the second map can be made the exact same dimensions as the iframe, and it opens within the page (without reloading the overall page).

 

However, on the second map I would like the links to take me an entirely new page, and not just load the area within the iframe.

 

Could someone help me out here ... I would be extremely grateful. I have tried a bunch of things, but I just don't have the experience or knowledge yet to solve this.

 

Gratefully,

 

Jon

Edited June 21, 201115 yr by johnnya24

Solved the problem ... in case anyone else was wondering (probably not!) ... by adding:

 

target="_parent"