Ok, so I've got an image-map of an actual map (my client didn't want the Google API on the landing page, so they had me make a counties-only map) -- anyway, one of the counties is "too small" and most users won't notice that it's click-able, so I want to run through the "highlighted" version of all 5 counties that are involved... There is basically a brown map in the background, and when they hover over a county, the "shadow" foreground image that covers just the selectable counties is replaced by an image of that county with a highlight..
What I want to do, is that when the mouse is NOT over the div with the map, the map should "slideshow" cycle through each of the counties in turn... then when they hover over the map, it goes to the static "all counties" shadow, and then they can hover over a county to have their image-map highlight happen.
1. On your individual county images, replace all the event handlers with named function calls. This has several advantages which I won't list for the moment.
Use onmouseover="highlightCounty(this);" and onmouseout="rotateMapsHighlighting(this);" or names that are descriptive for you.
2. Put an 'id' attribute on all the 'area' elements. Use id="<countyname>" like id="king"
3. Initialization call:
In your pageload javascript, you probably want to call setInterval(rotateRolloverFunc, timeInterval) with the parameters being a function used to rotate through the map highlighting (what you call the slideshow).
The function named in setInterval, rotateRolloverFunc, will need to set a global variable indicating which map has an active rollover. After each interval, rotateRollover will be called.
YOu must use
var myInterval = setInterval(param1, param2);
for the clearInterval() function
4. As to the function bodies, I will now describe what is the pseudo-code or JPE (just plain English) rather than valid working code:
Code:
var currentRollover; // might be numeric index for an array of names
function rotateRolloverFunc() {
// array of DOM objects or string names to images (can be global)
// get current Rollover index, undisplay it
// count up 1 to next index (or if over max, reset to zero)
// now use that index to display next Rollover
}
function highlightCounty(county) {
// clear the interval function call: clearInterval(myInterval);
// parameter 'county' will be Area object. Use the id attribute to get then
// id attribute value and learn which county name got the mouseover
// display imagerollover for that county
}
function rotateMapsHighlighting(county) {
// use the county parameter [Area object], get the id attribute,
// and undisplay the rollover
// call the setInterval function again as above
}
I don't promise this works immediately, but it will probably bring you 92% to the finish line.
Slideshow on mouseout, image map on mouseover?
Reply With Quote
Bookmarks