Change image map

Subscribe to Change image map 6 posts, 2 voices

Jonathan Blue User

Hello,

Is there any possibility to change (override) an image map, if I have access only to the .css file and can use java scripts? The image map is stored in html (that I can't write), using the <map> element.</map>

 
Descriptor Scriptwright

Hey people - don't be afraid to put "javascript" into one word, it is an entity all it's own not related to Java, Sun or anything by MS. The spell checker seems to like "JavaScript", so therefor this site contains JavaScript scripts (or JavaScripts, scripts or JS scripts if you really need to use acronyms), or more technically Greasemonkey scripts or GM scripts.

Anyway, image maps would be interesting, I'll have to try that. First, it has to be a "client side" image map - see the spec: http://www.w3.org/TR/html401/struct/objects.htm... - no it's not that hard to understand, I refer to it all the time.
And, I have done quite a bit of JavaScript coding on image maps, so I know a lot can be done and you should be able to do anything with a Greasemonkey script. I don't think you can do much of anything with style sheets though.
What do you need to do? Any examples?

 
Jonathan Blue User

Okay, so JavaScript. The first I have learned on this site. :)

Thank you for the quick reply, I will look over the site you linked.

Well, I need this for a specified use, in Travian game (as many other scripts on this site).
So the player can change the visualisation, for example the map of the valley. But the location of hot spots on the map will still remain the same, due to the image map. This is my big big problem.

 
Descriptor Scriptwright

I'd like to see a sample of the code, if you can view page source or better yet select an area and from right-click View Selection Source, select and copy the map and some of the A elements. Paste it here making sure to add a space after the < something like this: < map name="somename"> < a href="somefile.html"> .
Or put it in pre tags to preserve spaces, like
<pre>
paste code here like
< a href="somefile.html">
</pre>

 
Jonathan Blue User

Here is the map's source code:

< map name="rx">
< area href="build.php?id=1" coords="101,33,28" shape="circle" title="Woodcutter level 1">
< area href="build.php?id=2" coords="165,32,28" shape="circle" title="Cropland level 0">
< area href="build.php?id=3" coords="224,46,28" shape="circle" title="Woodcutter level 1">

(Here's nineteen definitions...)

< area href="build.php?id=18" coords="190,232,28" shape="circle" title="Clay pit level 1">
< area href="dorf2.php" coords="144,131,36" shape="circle" title="Village center">

And the call of the map:
< img id="resfeld" usemap="#rx" src="img/un/a/x.gif">

The game map's graphic contains three layers, the lowest is the background, the second is a layer with numbers, indicating things for the game, and the third one is this "resfeld", a whole transparent layer with the image map. The definiton of "resfeld" is in the .css file that I can write, so I can turn of this layer (turning of the image map).
Now I only have to write a script, that takes over the function of image map, I think.

EDIT: Hmmm, that "pre" thing doesn't work for me. :(

 
Descriptor Scriptwright

OK, I think I'm starting to understand what you're wanting to do. And that's a typical image map, so accessing it's properties should be no problem, in fact they should be in the document.links list but XPath would be easier.
But a couple questions:
You are saying that "resfeld" is just a transparent gif image? Like a 1x1 transparent gif?
When you say layers you mean that these images have IDs (or CLASSes) and the CSS defines a z-index for the layer order?
Do you really need to remove the x.gif? Or do you just need to change the mapping coords?
Is the background image defined in an img tag, or is it defined as a background for some other tag like table or body?

Cross
Presentational HTML allowed.
Use <code> for inline code and <pre> for code blocks. Use &lt; and &gt; for literal < and >.
We help break paragraphs and link your links.
or cancel