Image Mapping

[colin.baxter]

Hi

They say a picture paints a thousand words. Well XaraX is fundamental for our particular application.

I manage a web development team which maintains a 6000 plus page intranet site for a large UK bank. The information is technical and includes a fair amount of flow charts all created in XaraX. They are semi interactive, in that as the users hover their mouse over each box of the flow chart, a paragraph or so of text appears next to the cursor. Because our users have a variety of browsers, we create each flow image twice - once for 1024 resolution and the other for 800.

This is where XaraX's immage mapping is useful, we simply export the file (twice) in png format and enable image mapping from the options in the final dialog box. It gets better though, because one of our team has created a Java applet which takes the two XARAX generated HTM files, and creates a new one with all the coordinates in place for both resolutions, and the necessary Javascript to allow the browser to choose which image to display. It then creates all the mouseover files ready for adding the descriptive text.

So our largest image with over 100 boxes on it can be modified - generated and published with all the correct coordinates in minutes rather than in days, as used to be the case using more primative means.

Our users are then able to stay on one web page and fully follow a complicated process map with all the relevant descriptive text appearing as required.

Unfortunately I cannot forward an example due to sensitivity of the information, but I just wanted to add my two pence worth to this excellent forum.

We read about all the excellent graphical capabilities of this product, but there are also many features that just make it a one stop application.

I hope that this post has not been too boring, but I hope it may have generated some interest in the web authors who read this forum

Cheers

Colin

[colin.baxter]

Hi

They say a picture paints a thousand words. Well XaraX is fundamental for our particular application.

I manage a web development team which maintains a 6000 plus page intranet site for a large UK bank. The information is technical and includes a fair amount of flow charts all created in XaraX. They are semi interactive, in that as the users hover their mouse over each box of the flow chart, a paragraph or so of text appears next to the cursor. Because our users have a variety of browsers, we create each flow image twice - once for 1024 resolution and the other for 800.

This is where XaraX's immage mapping is useful, we simply export the file (twice) in png format and enable image mapping from the options in the final dialog box. It gets better though, because one of our team has created a Java applet which takes the two XARAX generated HTM files, and creates a new one with all the coordinates in place for both resolutions, and the necessary Javascript to allow the browser to choose which image to display. It then creates all the mouseover files ready for adding the descriptive text.

So our largest image with over 100 boxes on it can be modified - generated and published with all the correct coordinates in minutes rather than in days, as used to be the case using more primative means.

Our users are then able to stay on one web page and fully follow a complicated process map with all the relevant descriptive text appearing as required.

Unfortunately I cannot forward an example due to sensitivity of the information, but I just wanted to add my two pence worth to this excellent forum.

We read about all the excellent graphical capabilities of this product, but there are also many features that just make it a one stop application.

I hope that this post has not been too boring, but I hope it may have generated some interest in the web authors who read this forum

Cheers

Colin

[Steve Newport]

It sounds really cool... i think, but I may not understand it all correctly! Like, by image mapping do you mean the task of making a single bitmap have multiple hot-spots that are linkable without a navbar? Is it possible to further explain exactly what it does and how you achieve this and/or give a very simplistic example!? Sounds really neat and I've never heard of anyone using XaraX for this job! Thanks for the info

Steve Newport

-My Gallery-

-Featured Artist 2002-

[gwpriester]

Hi Colin

I saw this post earlier today and forgot to read it.

Sounds like you are creating image swaps or image rollovers. This is really cool. And the fact that it is all editable is incredible.

Gary

Gary Priester

Moderator Person

<a href="http://www.gwpriester.com">
www.gwpriester.com </a>


The Xara Xone

[colin.baxter]

Gents

Yes this is making use of hot spots (and sometimes hotspots within hotspots) to cause pop up text to appear, and sometimes to provide click throughs to deeper information.

As I say, it means that our users do not have to keep on clicking in order to find essential information.

I cannot provide a link for you guys to see at present, but will attempt to put something similar on my web site in a few days time.

Cheers

Colin

[gidgit]

As Gary has pointed out, this is called image swapping... like a remote menu of sorts... click on a button and the information in a neighboring cell is changed...

This is done via java script... at least this is how it is done in the graphic app I make use of... http://www.talkgraphics.com/images/smilies/wink.gif

[colin.baxter]

It is true to say that it uses Javascript and HTM's onmouseover events, but it is not Image Rollover - since the image does not change. Instead, there are supporting HTM Text files which attach themselves to the cursor as it is hovered over each Hotspot.

As I say, I will dummy something up in the next few days and post a link here.

Cheers

Colin

[gidgit]

Well, actually, we are perhaps talking about two different things here... ( my fault, sorry http://www.talkgraphics.com/images/smilies/smile.gif ) you are I think referring to "hints" of sort popping up from "hotspot's you have created... yes, this is image mapping... creating one or more links from a graphic...

...while I am thinking of image swapping in that even though the button is not changing the graphic in the next cell is... http://www.talkgraphics.com/images/smilies/biggrin.gif

Sorry bout that... I look forward to your example http://www.talkgraphics.com/images/smilies/smile.gif

[colin.baxter]

Gents

I've now added a link to an example of what I am talking about. As I say, XaraX isn't providing wonderful graphics, but it is providing all the coordinates which feed into the Javascripts necessary to make this what it is. Also, this scripting automatically selects the correct image and coordinates according to the browser settings. The example is only a small flow, but some of our real flow charts have up to 100 boxes - each with the text facility. And - the images are regularly changed. XaraX has saved us hours and hours of man effort in fussing around with the coordinates.

The link can be found at the bottom of this page CB Webworks

Regards

Colin

[bjwe]

A while ago (well a long while ago actually) I wrote a guest tutorial about image mapping with Xara and Java Applets. Unfortunately the Xaraxone link is broken because I have changed ISP nd websites since this was first published (my fault not Gary's ;-) However, I hve just installed the same tutorial and example here if anyone wants to take a look. It includes the java applet if you want to use it, although I must admit I haven't done much with it since I first wrote it. In this particular hotspot applet the text overlay is in a single user defined area unlike Colin's example which attaches itself to the mouse pointer position, but the theory is similar.

Brian