Digital Workshop

Hi

Could anyone please point me in the direction of the best solution here? I need an image map with a lot of tiny hotspots. I tried the hotspot tool first, but found that the small shapes tended to jump around and resize themselves fairly randomly. I decided to code a solution instead, which would actually suit my needs more anyway.

I've used a graphics app to create and export the pixel data. It is presently in the form below (although there are hundreds of hotspots):

24,10,37,17,Action 1
41,10,56,17,Action 2
60,10,85,17,Action 3
88,10,112,17,Action 4
...

What would be the best way to go with this? Hundreds of 'if' statements looking at the mousePos.x and mousePos.y? I wondered if an array could be used, but am not sure how. Any pointers would be much appreciated before I launch into something catastrophic.

Thanks
Dan

If you have a list of coordinates and the hotspots are the same shape / size then cloning and OPP would make very light work of this without the need for hundreds of ifs (should also use case now).

Mack

They are different sizes but that may be a great idea anyway. Create a function to clone an object, resize and reposition it based on the coordinates then RegisterEventHandler for a mouseover and click? Sounds good to me - i'll give it a go.

re case. I was thinking of 'if's because there would be four clauses for each area ie. mousex > .. && mousex< ... etc. This would also have to be triggered on every mouse move. The cloning sounds far better.

Cheers
Dan

Anything that does away with the ifs.

If you're going to resize, I'd create a basic demo first as I've hit various odd snags with resizing objects over the years.

It's the only area that I prefer Flash, as you can build an object dynamically via script.

Good luck,

Mack

Dan,

Can you say more about what you're doing, if it's not private?
For example, are you taking one image/illustration and then manually identifying the 'zones', or is that "graphic app... pixel data" working on components of the drawing/image by itself? How many images to set-up?

From your example data, it seems all the hotspots are rectangles of the same height... true?

I would think of creating a script function that took the x1,y1,x2,y2 as parameters. The main MouseOver and MouseExit triggers could be on the whole Frame, and just run a 'while' routine to poll the mouse position every .3 seconds or so. So no need to generate hotspots maybe.

I can think of a couple other alternatives for 'mapping' the illustration initially and for generating a 'lookup table' stored in a Listbox. (then your Action1, Action2... easily correspond to index of the Listbox and its text entry.) Specifics depend on what kind of actions you will have (display caption/notes, start an animation, etc.). This would all be done a development time... and not visible to User.

Thanks Mack and Lar

Cloning and resizing the hotspots worked well. I just need to pass through a function name and this should be OK.

Basically, I need to pass the name "Function1" through the RegisterEventHandler line. It probably just needs a bracket or symbol, but I can't find anything similar. I can do this sort of thing in VB, but curly bracket scripts beat me every time.

Also, I will probably need to name each new clone differently (e.g. "Name1").

Below passes through "funcName" as the function to call rather than "Function1" and names all clones as myClone.

Any solutions much appreciated.
Thanks




CreateHotspot("Function1",17,18,33,25,"Name1")


function CreateHotspot(funcName,x1,y1,x2,y2,NameSpot)
{

var myClone = OriginalClone.CloneObject( (x2+x1)/2 , (y2+y1)/2);

myClone.SetObjectSize(x2-x1, y2-y1);

var myEvent = myClone.RegisterEventHandler("mouseover", this.funcName);

}


function Function1()
{
Image1.Show();
}

Take a look at results
I don't know why this.funcName does not resolve.

Thanks again

Lar - I can't get anything to resolve on the RegisterEventHandler function either. The clone names can be dealt with using an array, but not the function names. The solution below may do, else I'll look for another. Your original suggestion of analysing the mouse position over the whole image was also my first idea, but then I thought that the endless if statements running on every mouse move may cause a problem. Your idea of taking the position every 0.3 seconds would greatly improve the situation.

Mack - I can't see info re using Select - Case in a script. Is this a recent addition? Could you please post the syntax if it is usable. Ta.

Cheers
Dan



CreateHotspot(17,18,33,25,0)
CreateHotspot(5,29,16,40,1)


function CreateHotspot(x1,y1,x2,y2,SpotNo)
{

clone[SpotNo] = OriginalClone.CloneObject( (x2+x1)/2 , (y2+y1)/2);
clone[SpotNo].SetObjectSize(x2-x1, y2-y1);

if (SpotNo == "0")
{
var myEvent = clone[SpotNo].RegisterEventHandler("mouseover", this.Function0);
}

if (SpotNo == "1")
{
var myEvent = clone[SpotNo].RegisterEventHandler("mouseover",this. Function1);
}

}

function Function0()
{
clone0.Hide(); //just testing
}

function Function1()
{
clone1.Hide();
}

Hi Dan,
If you are using Opus v7, Switch-Case is now an option instead of using multiple if statements.
Here's an example of use:

/**********************************/

tax_Code = "T3";

switch(tax_Code)
{
case "T1": taxRate=0;
break;
case "T2": taxRate=20;
break;
case "T3": taxRate=40;
default: taxRate=20;
}

Debug.trace(taxRate);

// example sets taxRate = 40

/**********************************/

cheers
Paul

Thanks Paul. I searched the help files for Select, hence not finding this.
Cheers
Dan

Use eval



Mack

Thanks Mack
Do you ever sleep, or have you moved down under?

please confirm if you get this working (pun intended)

I played with some eval() expressions, did not get very far.

other points...
once you get the 'this.funcName' to work, I think you will need the equivalent of a 'variable changed' or a 'ticker' loop if you are trying to detect mouseovers. Hence the 0.3 sec.

When all of that is solved, remember to use Unregister....


BTW, I thought it was 'interesting' to see what Debug.trace returned when you put in the term: this.Function1
(I did not expect to 'see' the whole function)

This all seems to work, thanks. The only issue I had was that the help guides suggest UnRegisterEventHandler, whereas you need to use UnregisterEventHandler (r not R).

For those just reading this post, the reason I used this method was that Opus didn't like creating lots of tiny hotspots manually (they jumped around and resized randomly). I used PaintShopPro to produce an image map intended for a webpage, then extracted and manipulated the coordinate data using Excel so that it could be pasted into Opus. This solution will also help make editing all the functions easier.

Cheers for the help Mack and Lar
Dan



function CreateHotspots()
{
RegisterHotspots(0,"Spot0",5,29,16,40);
RegisterHotspots(1,"Spot1",17,18,33,25);
// etc. etc.
}


function RemoveHotspots()
{
for (i=0;i<clone.length;i++)
{
UnRegisterHotspots(i);
}
}


function RegisterHotspots(SpotNo,SpotName,x1,y1,x2,y2)
{

clone[SpotNo] = OriginalHotspot.CloneObject( (x2+x1)/2 , (y2+y1)/2);
clone[SpotNo].SetObjectSize(x2-x1, y2-y1);

myEvent1[SpotNo] = clone[SpotNo].RegisterEventHandler("mouseover",eval('this.F'+ SpotName + 'MOver'));
myEvent2[SpotNo] = clone[SpotNo].RegisterEventHandler("mouseout",eval('this.F'+ SpotName + 'MOut'));
myEvent3[SpotNo] = clone[SpotNo].RegisterEventHandler("lclick",eval('this.F'+ SpotName + 'LClick'));
}





function UnRegisterHotspots(SpotNo)
{
clone[SpotNo].UnregisterEventHandler(myEvent1[SpotNo]);
clone[SpotNo].UnregisterEventHandler(myEvent2[SpotNo]);
clone[SpotNo].UnregisterEventHandler(myEvent3[SpotNo]);
}



///functions for each hotspot

function FSpot0MOver()
{
//etc
}

function FSpot0MOut()
{
//etc
}

//etc

I was up reading.

Glad it worked. Although you point out that this was the best method because of issues with the hotspots, it's also worth noting that programming this way makes it much easily to develop powerful Opus applications. Though, I'd opt for OPP, then cloning and eval is generally last on my list.

Would still wish for dynamic creation of objects though

Mack - awake again.