/    Sign up×
Community /Pin to ProfileBookmark

JavaScript and Image Map Predicament

Copy linkTweet thisAlerts:
Jul 22.2005

Alright, I’m making a game, the problem I’m having is this; I need to change the areas inside a map tag. This seems impossible, I’ve read it’s impossible, but I really don’t think it is.

Could this be done by putting the areas into another tag that can be changed? Say, if I put the areas I wanted to be in the map when I click this button, in an array, and changed the value/source of whatever the areas were in into that array?

Any help is appreciated. ?

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJul 22.2005 — 
This seems impossible, I've read it's impossible, but I really don't think it is.
[/quote]
You are right. It is possible. DOM can control all the window's/document's elements/attributes, thus it can control the map's areas attributes as well

an example:
[code=php]
function changeAreaCoord(){
var newc ='47,74,75,98';//the new coordinates
var a = document.getElementById('Map').getElementsByTagName('area')[0];//the area element
a.setAttribute('coords',newc);
}
...

<map name="Map" id="Map">
<area shape="rect" coords="1,1,28,25" href="#">
</map>

[/code]

The only problem is: this change is a "virtual" one, so that it will last only durring the session (except, maybe, if using cookies). Or if the new values are store/sent to/from a DB via a server-side application.
Copy linkTweet thisAlerts:
@szn00bularauthorJul 22.2005 — ?

This is perfect! Thanks alot Kor.
Copy linkTweet thisAlerts:
@KorJul 22.2005 — to learn about DOM methods of referencing/creating/removing/cloning elements and methods of changing the attributes find some tutorials.

For instance:

http://www.howtocreate.co.uk/tutorials/index.php?tut=0&part=24
×

Success!

Help @szn00bular spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...