Hi everybody, My name is Milan and I'm new to this site. I am wanting help with a bit of JavaScript. I have looked around and was given this website address, which apears to be the place for help with my sort of problem.

 

I am constructing a website based on the USA and using this as a template to learn HTML coding and a bit of JavaScript. On my "Home Page" is an image of a map of the USA. I have got each state to be click-able, by bit-mapping, which opens an enlarged map of that state on a separate page. When the enlarged map opens, the adjoining states are also click-able. You can start at California, and work your way to Maine by clicking the next most eastern state. Or start at Florida and work your way to Alaska.

Also on the "Home Page", is a click-able link to a state's "Home Page" (on my site), which gives background information such as, early history, images of the state flag, state seal, part played in the Civil War, etc. plus links to external web pages such as the state's official website and to Wikipedia.

 

A friend suggested that I look into VBScripting, which I did, but found that this was Microsoft's own version of JavaScript. I chose JavaScript, as this would appear to be the preferred standard for most browsers.

 

My problem: I would like to refine my web pages by using the "MouseOver" and "MouseOut" commands in my pages , so that when a mouse hovers over a state in my "Home Page" i.e. say Rhode Island, (which is very small in he USA map image), it would display an enlarged map of that state without leaving the home page and if you then moved to another state an enlarged map of that state would also open. I have been able to do this, "hover", on said state, but it displays that state wherever I hover the mouse. I want to be able to bit-map the USA map image, so that an enlarged map image of any state opens without leaving the home page. At the moment you can open an enlarged map only on a separate page, when you click-on a state, but this necessitates returning to the home page to open another state that is not adjacent to the previously opened state. I want it to work both ways; click-on the state to open another web page, or hover to just get a quick view. I would just like to master this technique of "MouseOver/MouseOut" on an image so that various parts would display different images.

 

Any pointers of how to accomplish this?

 

Thanks in advance.

 

Milan

Okay, it sounds like you have big job on your hands. I designed similar thing related to maps years ago for one of my sites, but I did it using flash

 

Flash is easier, but may no longer be the modern approach (but then who knows what the future is, the iPad doesn't dictate everything )

 

I've seen people do similar things with maps using jQuery and I've come to like jQuery my self lately. It's slick, especially when using googles content delivery network

 

If you look at this persons site : gethifi.com/blog/jquery-vs-flash-for-interactive-map

They have outlined their approach "jQuervy Vs Flash" for designing a map

 

I would start small though, I mapped the whole of the UK got every county correct, got all of the outlines right, and then ended up not even using it!!!!

 

So start with a few small examples before designing the whole map, and make sure its what you really want.

 

 

 

>>> Relating to your mouse over event that I think you were really asking about.

There are lots of resources relating to mouse over events

 

but simply try it your self

 

if you do this

<div onMouseOver ="alert('test')"> here </div>

 

you can see what happens

 

additionally if you do this:

 

<div id="here1id" onMouseOver="doJobOn('here2id');"> here1 </div>

<div id="here2id" onMouseOver="doJobOn('here1id');"> here2 </div>

<script>

function doJobOn(id){

document.getElementById(id).innerHTML+="doYouSee?";

}

</script>

 

What happens?

 

So you can get an idea of how you can update another div when hovering over an unrelated div

Edited July 8, 201115 yr by Mike224