Imagemaps in Director

October 28, 1998
by Alex Zavatone

The concept of an image map is something we use every day if you click on hot images on the web. The imagemap is able to take a big image and recognize parts of that image as hot areas and perform an action when rolling over or clicking on that part of the image. We're used to using rectangular rollover areas from clicking on image maps on the web and rectangular imagemap regions are fine for many applications. The great news is that there are several types of objects that can be defined (and therefore checked for) using math that's not too complicated. Rollovers for such geometric shapes can be checked for, providing the capability for irregular rollover regions in larger images. All this can be done without complicated lingo and without extra sprites.

Rectangular rollover regions can be created rather easily by using Director's rect(x1, y1, x2, y2) function. If you have multiple rectangular regions within a sprite that you want to detect, simply create a list of rects and walk through them within a repeat loop. The check for a collision or if the mouse is within the rect is accomplished through use of the inside(point, rectangle) command. In this case, the point is the point(the mouseH, the mouseV) and the rectangle is rect from your list of rects. A sample shockwave movie is included below for your viewing pleasure. Roll the mouse around the big fat sprite to find the rollover regions.

Now that is a simple example of what you can do with a few rollovers. In the sample at: http://www.portocork.com/portocork/story/index.html there is a timeline that is one large image. The rollover regions for the different dates on the timeline are 17 rects defined in an imagemap list.

Where these imagemaps really become useful are when you are creating a ui or background image where you want rollovers or other actions to be triggered when rolling over some arbitrarily shaped region. With 120 sprites available in Director 6, irregular sprites can be created and you can check the rollover with mask ink or you can simply set up an equation to check the rollover for you. If you remember algebra and geometry, the use of the pythagorian theorm can allow very speedy circular rollover detection.

In the good old a^2 = b^2 + c^2, the length of the hypotenuse (longest side of) of a triangle can be determined by taking the square root of both sides of the equation. a = sqrt(b^2 + c^2) or in lingo: a = sqrt(power(b,2) + power(c,2))

"Well great, but why do we care mister Z?" You say. The length of side a can be looked at as a radius of a circle where one end point of line "a" is the center of the circle you want to check rollover on and the other point is the maximum distance away from that circle that constitutes a valid rollover. If the first point is fixed (remember, it's the center of the circle) the second point can move around but it will only move around the radius of the circle to satisfy the conditions of the equation - or cuz that's just the way it works.


on exitFrame 
  if CheckCircularRollover ( point(100,100), 5, ¬
    point(the mouseh, the mouseV)) then
    -- do rolloverstuff
  end if
end
-- 'Zav 10/25/1998
-- Pythagorus way before that
-- remember... a ^ 2 = b ^ 2 + c ^ 2
on checkCircularRollover myPoint, myRadius, checkLoc
  set b = the locH of myPoint - the locH of checkLoc
  set c = the locV of myPoint - the locV of checkLoc
  set a = sqrt( power(b,2) +  power(c,2))
  if a «= myradius then
    return 1
  else
    return 0
  end if
end

These simple equations are only the start. You can code solutions for irregular rects, ovals, 1/2 circles and n sided polys. For example to check for an intersection on the slice of a circle or oval, draw a line from the radius to the point. Check the angle of the line in radians. If the angle of the line is > the start angle and < the end angle then you have detected an intersect on a slice of the circle. For a 1/2 circle, you want the angles checked for to be 180 degrees away or Pi radians away from each other. With rollover detection like this available, you can be much more creative when picking hot areas in your next projects.

The Director files for this article are available for downlaod in Mac or PC format.

A Director user since 1987, Alex (Zav) Zavatone has worked on the engineering teams for both Director and Shockwave, 4, 5, 6 and 7. Recent investigations find him developing foundation classes for Director with asynchronous process management and other life threatening activities. In its early days, he had something to do with this Internet thing known as "DOUG". A noted ne'erdowell, slacker and laggard, Mr. Zavatone is nonetheless is trusted by children, small animals and the elderly. In his spare time, Mr. Zavatone rehabilitates lame desert trout.