Printable View
Hi folks,
Any suggestion for a (reasonably) quickie solution here. I want rollovers on the countries but the overlap is causing a problem. In this capture, the cursor is over Germany only, but Luxembourg and Austria are also highlighted.
I could just link the country labels but I'd prefer more than that.
If this isn't doable in Xara then I'd appreciate alternatives suggestions.
Cheers
Hi Sadler,
My guess (and it is only a guess) is that your maps are overlapping slightly, which is causing the multiple countries to get highlighted when you mouse over them. What I would suggest is that you place the mouse over images on individual layers and use the mouse over tab to make them function like you want. I have done one of them for you as an example. Check out Germany.
Hope that helps,
Eric
OK. I've had another think about this and realized what part of the problem is. When doing mouse over effects, Xara uses a bounding box (rectangle) around the object that has the effect. This means that the area around Germany (that fits in a box drawn around the country) will also cause the mouse over effect when you mouse over it. You can set the mouse over effect for just the area of the object (group in this case) but it only works in image maps and in flash exports. I don't know much about image maps but this is what the Xara help files say.
"Image Map
An image map lets you have "clickable" areas on the graphic when displayed in a browser. Clicking one of these areas jumps to a new web page. If you want to create an image map, use "Utilities -> Web Address" to add web addresses (URLs) to the different parts of your drawing.
Export Image Map to Clipboard: This copies the image map HTML to the clipboard so you can paste it into your text or web page editor. There is an option on the Bitmap Size tab to save the HTML IMG tab to the clipboard. Selecting either of these clipboard options automatically deselects the other option.
Export Image Map to File: This copies the image map text to a file. You can either:
Insert Image Map into Existing File: This inserts the image map into the specified file. If the file already contains an image map with the same name, the existing image map is replaced. If this is a new image map, it is inserted at the end of the file.
Replace Existing File: This overwrites any existing contents of the file. This option is useful if you want to save the image map text for use later.
Note that opening this file in a browser displays a blank window, i.e. you don't see the graphic. The reason is that the file does not include the IMG tag needed to display the graphic. The IMG tag might look like this: <img src="file name.gif" usemap="#example" />."
The problem appears to be how the countries are grouped, ungroup the whole map and regroup it as you want it too appear on mouse over, and that will solve it.
Cool - thanks Eric - that's a sound solution for me.
But ..... if you put your mouse over the west of Czeckoslovakia (which doesn't exist anymore) then Germany is highlighted. This phenomenon has been discussed before, in that the mouseover area is square. I seem to remember that V5 changed something in that, but am unclear on how this is workable.
Well spotted.
There's a bit in the help that says if 50% of the mouseover graphic is in the mouseover area then it will be displayed. I'm not sure if this is relevant here though.
BTW, this is a map from 1947 when Czechoslovakia still existed (I believe).
The cloud/transparency effect on top of the countries is overlapping adjoining areas, you need to crop those back to within the countries borders.
Start with something very simple, to see how it behaves. As far as I can see, the mouseover ALWAYS responds the the bounding box/rectangle of the trigger shape. Check out the attached .web file.
I recall that sometime ago, this was discussed in the Web Designer forum. Doing a search for "image maps", I came up with Creating Image Hot Spots with XWD.
An alternative would be to create a swf file in XX. This does allow you to use the shape of the objects.
Here's a xar file that has UK, France and Belgium as clickable shapes. Click on the country map to return to the Europe map.
Very rough and ready but it should give you the thinking behind it.
Note that the rollover only uses the shape, not a rectangle behind the shape.
Try this option with Egg's suggestion
Thanks everyone - looks like I've got a few options and some work to do.
Since the swf route gives this: "The following cannot be exported:Feathering, Group transparency.", I'll have to find a a work around for these and get up to speed on flash creation but it looks promising.
I shall also test straight image map exports to see how that copes. Thanks again Eric.
Anyone every done a fully interactive, zoomable, scrollable map with layers in flash and would like to share? Just kidding, although that would be the ideal in this case.
No, but when you get yours done, please share. :)Quote:
Anyone every done a fully interactive, zoomable, scrollable map with layers in flash and would like to share?
Sure ;) will do.
Hi again Sadler, Fully zoomable, clickable maps are probably best done in Flash or Swish as Actionscript makes the map easier to create/navigate.
I don't know if XX still supports image maps. It's been years since I created one in XX and trying to create one just now I had no luck.
I tried to go a bit further with the XX swf option to allow rollovers as well as clickable areas. (The absence of a rollout feature makes planning more difficult).
Anyway here's my latest attempt. UK France Belguim & Holland work as both rollovers and clickable areas.
Slightly amended so the rollovers don't work once a country is clicked on.
Fantastic stuff Egg. Cheers.
I've just successfully created an image map (sans rollovers but with non-rectangular hotspots) so that is an option but I like the idea of using a swf on the website. I've got to have drill downs on each country to show specific locations (over 100 locations overall) each so there's a lot still to do.
Your proof of concept with the pop-ups helps a lot.
Okay, final try as I'm enjoying myself too much. I've used the sea as another mouseover button to deselect a country on rollout plus some further updates.
EDIT: The clickable area defaults to rectangle which is a pain remembering to alter and apply it each time. I don't know whether there's a registry hack to alter this.
Finally if you want to keep your contours and feathers you could overlay a bitmap above the vectors.
Nice work Egg. I note, however that when moving the cursor over France or Belgium, then moving to the right (in the direction of Italy, for example, the yellow highlight sometimes fails to turn off. Why might that be?
Simply a matter of time. As there's no Mouse Off action in XX you can only switch off a mouse over via a click or another mouse over somewhere else. If I had the time I'd create Mouse Overs / OnClick actions for all shapes but it's not my project, just trying to give a "how to" hint :D
It could be done by creating a shape covering Germany/Switzerland/Italy and all countries East thereof with another mouse over button that just returns it to the original map in the same way the sea does.
I see. Thanks for explaining. :cool:
I thought you might like to see some progress with going down the flash route.
Slight modification to Egg's technique:
I've used two Background frames, one hot and one not. This is so that I don't have to copy the whole map into every frame for the rollovers or the overlays. The hot one heads all the mouse-overs and the static one is used to blank the roll-overs for the overlays. It works rather well I think.
I've attached the swf and the xar so folks can see how it's been set up.
Check out the overlay on "Germany Zone I"
Thanks again to everyone who helped and quickly too.
Excellent Sadler. Thanks for keeping us updated.
I did something similar in SWISH Max (drawings in Xara of course) a long time ago. I turned it into an executable to make it easier to distribute. Here it is.
Eric
I tried to do this school "map" when XWD first came out. It was my first attempt at using the product.
My first attempt was Option 1 using PopUp Photo property (works with vector shapes as well as photos) because it so easy and quick to setup, but alas, as you've discovered, the mouse-overs on the diagonal-rooms at the bottom of the map, like the Gym, block the mouseover of other smaller adjacent rooms.
Option 2 uses PopUp Layers which are not triggered by the shape of the room, but by their labels which fit within their respective rooms. For a very small room you could use a smaller circle which is the same color as the room behind it. Using MouseOver PopUp text the gives the user feedback as to a link. Problem is this method is a LOT of work ... creating layers for every room and enlarged duplicates of each room for each PopUp layer.