Tooltip Across Frames

[kathymac]

Hi

Here is my webpage: http://dgssi.com/barton/directory.html

I need to find a tooltip script that when you mouseover a store name in the right frame
it will display at a specified location on the map on the left side.

I am totally stuck on how to go about doing this and am hoping someone can help me out
resolving this issue.

Much appreciated.

[DarkMonarch]

it depends on how your map is done
is it an image or you've done it with a canvas or svg ?

if it's a simple image would use a JS with DOM
break the image down, do image of all stores in a different color and change the image with onfocus <img src="" id="store" alt="" />

my 2 cents, helping you get started, but i'm sure there's more qualified people here.

[AleMonteiro]

You are stuck in the iframe connection or in showing the location on the image? Or both?

To link the actions between IFrames, you could use the parent as the main comunication center, this way, one frame will call a function on the parent that will call a function on the other frame.
I.E.:

// Frame Right
function onStoreClick(store) {
    parent.onStoreClick(store);
}

// Parent
function onStoreClick(store) {
    var frame = document.getElementById('frameLeft');
    var frameDocument = frame.contentDocument || frame.contentWindow.document; // Cross broswer compatibility
    frameDocument.onStoreClick(store);  
}

// Left Frame
function onStoreClick(store) {
    // Do something to show the store name
}

And to show the tooltip you could either slice the image in various pieces, as suggested by DarkMonarch, or you could keep the one image and store the position for each tooltip.
I.E:

var tooltips = {
    'Store1' : {
        name: 'Shoes Store',
        posX: 5,
        posY: 15
    },
    'Store2' : {
        name: 'Banana Store',
        posX: 150,
        posY: 25
    }
};

function showTolltiper(storeId) {
    var store = tooltips[storeId];
    if ( typeof store === 'undefined' ) {
        alert('StoreId not found');
        return;
    }

    // show tooltip
}