Hi everyone,
I want to have a map on my page showing more info about each country when you point a mouse on it (and then a hover to get to the page with more info).
export function ceskoSeda_mouseIn(event) {
$w(‘#ceskoSeda’).hide();
$w(‘#czpopis’).show();
}
export function ceskoCervena_mouseOut(event) {
$w(‘#ceskoSeda’).show();
$w(‘#czpopis’).hide();
}
export function nemeckoSeda_mouseIn(event) {
$w(‘#nemcekoSeda’).hide();
}
export function nemeckoCervena_mouseOut(event) {
$w(‘#nemcekoSeda’).show();
}
It only works with the first country I added, if I add another one, nothing happens. Is there something wrong with the code? Or is it even possible to have more export functions on one page written like this?
For each onMouseIn event handler function that you use, you need to do the opposite with the onMouseOut too.
export function ceskoSeda_mouseIn(event) {
$w('#ceskoSeda').hide();
$w('#czpopis').show();
}
export function ceskoSeda_mouseIn(event) {
$w('#ceskoSeda').show();
$w('#czpopis').hide();
}
Although this code above will hide the red map image and the info text displayed as soon as the user moves off the map area.
However, as you are wanting the shown elements to be displayed on screen so that the user can click on them, then you need to have the onMouseOut part of the code function written into another onMouseIn function.
So take your ceskoSeda line above, for it to be staying displayed on your page, simply do not use the onMouseOut command and have the plain map image shown again with the info box hidden again.
You simply add that info box hide command and the red map image hide command in another onMouseIn code for another place of the map, so that when the user moves to another place the existing red map image and info box will be hidden and the new red map image with info box will appear instead.
Obviously, however this will always leave one map place showing the red image with the info box displayed as you don’t have the hide function written into your code unless the user moves to another map place.
I don’t need them to click on info which is out of the map, the hover is on the map. There is red image (with hover) and grey image on top of that for every state. It should work the same way with or without the info. So they point on grey image which disapears and red image with the hover shows. I added mouseOut for both ‘cesko’ and ‘nemecko’ but Germany still doesn’t work…
export function ceskoSeda_mouseIn(event) {
$w(‘#ceskoSeda’).hide();
$w(‘#czpopis’).show();
}
export function ceskoSeda_mouseOut(event) {
$w(‘#ceskoSeda’).show();
$w(‘#czpopis’).hide();
}
export function ceskoCervena_mouseIn(event) {
$w(‘#ceskoSeda’).hide();
$w(‘#czpopis’).show();
}
export function ceskoCervena_mouseOut(event) {
$w(‘#ceskoSeda’).show();
$w(‘#czpopis’).hide();
}
export function nemeckoSeda_mouseIn(event) {
$w(‘#nemcekoSeda’).hide();
}
export function nemeckoSeda_mouseOut(event) {
$w(‘#nemcekoSeda’).show();
}
export function nemeckoCervena_mouseIn(event) {
$w(‘#nemcekoSeda’).hide();
}
export function nemeckoCervena_mouseOut(event) {
$w(‘#nemcekoSeda’).show();
}
It works perfectly for The Czech Republic image, but if I apply the same code for other countries images, it behaves like there’s no code at all. No matter which country in the code goes first. Even if I have only one country image on the page. I tried all the code options you wrote me, but they only work for one image, not the rest. It doesn’t make any sense… Thank you so much for your advices anyway!
Dasha
EDIT:
so the whole problem was that I just wrote the code, but it has to be in every object Preferences as well:
Okay, so you are confusing us when you mention… and then a hover to get to the page with more info.
You don’t mean to get to the page, you meant to get to a displayed hidden element or a lightbox for example, so clearer now.
So, all you need is the separate grey map images in the correct places with the duplicated map images directly underneath which contains the red map images.
Make sure that the duplicated red map images and all the info display boxes are setup as hidden on load through the properties panel for each element.
Then you simply add the onMouseIn and onMouseOut code for each of the countries and their specific element that contains their map image.
$w.onReady( function() {
export function germany_mouseIn(event) {
$w('#germany').hide();
$w('#germanyred').show();
$w('#germanyinfo').show();
}
export function germanyred_mouseOut(event) {
$w('#germanyred').hide();
$w('#germanyinfo').hide();
$w('#germany').show();
}
export function czech_mouseIn(event) {
$w('#czech').hide();
$w('#czechred').show();
$w('#czechinfo').show();
}
export function czechred_mouseOut(event) {
$w('#czechred').hide();
$w('#czechinfo').hide();
$w('#czech').show();
}
// ... and so on with the rest of the countries.... //
