[lnkForumImage]
TotalShareware - Download Free Software

Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

Dynamically assign image map values?

Tuxedo

10/29/2014 7:47:00 AM

Hello,

Is there a way to assign linked href values to an image map object after
the object has already loaded?

For example, if the page loads first including a usemap object:
<img src="mymap.jpg" usemap="#mymap" id="hello">
(without any href values).

Thereafter, and once the page has already loaded, assign by a JS function
its href dom values, as if the following becomes present in the html:
<map name="mymap">
<area shape="rect" coords="20,20,60,220" href="rect.html">
</map>

Or, initially load the image as a normal image (<img src="mymap.jpg"
id="hello">) and thereafter make it a usemap="#.. and add the linked
coordinates.

Can this be done? If so, what is the most direct way?

Many thanks,
Tuxedo
14 Answers

Jukka K. Korpela

10/29/2014 8:26:00 AM

0

2014-10-29 9:47, Tuxedo wrote:

> For example, if the page loads first including a usemap object:
> <img src="mymap.jpg" usemap="#mymap" id="hello">
> (without any href values).

An <img> element does not have an href attribute at all. If you mean
that there is no <map> element named "mymap", then you would have a
syntax error.

> Thereafter, and once the page has already loaded, assign by a JS function
> its href dom values, as if the following becomes present in the html:
> <map name="mymap">
> <area shape="rect" coords="20,20,60,220" href="rect.html">
> </map>

You can add a <map> element dynamically, yes. It would however be more
logical to have it included statically, containing a single <area>
element that corresponds to the entire image and has an href attribute
pointing to a document explaining that the page does not work without
JavaScript enabled, or something like that, or just with no action if
that's more suitable. Then you can dynamically replace that <area> by a
set of real <area> elements, if that's what you need.

> Or, initially load the image as a normal image (<img src="mymap.jpg"
> id="hello">) and thereafter make it a usemap="#.. and add the linked
> coordinates.

Well, that's possible too, and perhaps better.

> Can this be done?

Yes.

> If so, what is the most direct way?

It depends on your definition for "direct". In the latter approach,
using just document.createElement to create the <area> elements and
adding them with the <map> element's appendChild method sounds direct to me.

--
Yucca, http://www.cs.tut.fi/...

Tuxedo

10/29/2014 12:01:00 PM

0

Jukka K. Korpela wrote:

[...]

> It depends on your definition for "direct". In the latter approach,
> using just document.createElement to create the <area> elements and
> adding them with the <map> element's appendChild method sounds direct to
> me.

There is no need to have a statically defined map area with a noscript
alternative only to rewrite new values into it after.

The latter approach is the most direct way for what I specifically need.

Thanks for clarifying.

Tuxedo

Tuxedo

10/29/2014 6:28:00 PM

0

Tuxedo wrote:
[...]

If only the image with its id initially exists, as follows:

<img src="mymap.jpg" id="hello">

.... after the page and image loaded, how can in a function the elements and
nodes be dynamically added, for example, to createElement: MAP(#mymap) for
the existing IMG(hello) image object and appendChild AREA with href(bla),
coords(100,100,300,300) and shape(rect) attributes?

... as if the following would have existed in static HTML to begin with:

<map name="mymap">
<area shape="rect" coords="100,100,300,300" href="bla">
</map>
<img src="mymap.jpg" id="hello" usemap="#mymap">

Many thanks for any tips.

Tuxedo

Tuxedo

10/29/2014 8:51:00 PM

0

Tuxedo wrote:

> Tuxedo wrote:
> [...]
>
> If only the image with its id initially exists, as follows:
>
> <img src="mymap.jpg" id="hello">
>
> ... after the page and image loaded, how can in a function the elements
> and nodes be dynamically added, for example, to createElement: MAP(#mymap)
> for the existing IMG(hello) image object and appendChild AREA with
> href(bla), coords(100,100,300,300) and shape(rect) attributes?
>

Are there some errors or inconsistencies in the following map creation
procedure of the existing IMG element?:

var map = document.createElement("map");
map.setAttribute("name","mymap");

var area = document.createElement("area");
area.setAttribute("href","bla");
area.setAttribute("coords","100,100,300,300");
area.setAttribute("shape","rect");

document.getElementById("hello").setAttribute("usemap","#mymap");
document.body.appendChild(map);
map.appendChild(area);

One difference I notice is that MAP->AREA appears at the end of the BODY
node instead of at the beginning and before the IMG element, as in the
static HTML version, below, when in the DOM Inspector's tree view.

The dynamically assigned code works without errors in the Error Console
however, although perhaps some things could be done better?..

Many thanks for any advise.

Tuxedo


> .. as if the following would have existed in static HTML to begin with:
>
> <map name="mymap">
> <area shape="rect" coords="100,100,300,300" href="bla">
> </map>
> <img src="mymap.jpg" id="hello" usemap="#mymap">
>
> Many thanks for any tips.
>
> Tuxedo


Jukka K. Korpela

10/30/2014 5:52:00 AM

0

2014-10-29 22:50, Tuxedo wrote:

> One difference I notice is that MAP->AREA appears at the end of the BODY
> node instead of at the beginning and before the IMG element, as in the
> static HTML version, below, when in the DOM Inspector's tree view.

It does not matter where you place the MAP element, since it has no
visible content, only AREA elements that declare areas of an image

>> .. as if the following would have existed in static HTML to begin with:
>>
>> <map name="mymap">
>> <area shape="rect" coords="100,100,300,300" href="bla">
>> </map>
>> <img src="mymap.jpg" id="hello" usemap="#mymap">

That, or these elements in the opposite order, is the normal setup, but
it's just a natural and convenient way - keeping the functionally
related elements together, even though they technically need not appear
that way.

--
Yucca, http://www.cs.tut.fi/...

Tuxedo

10/30/2014 8:44:00 AM

0

Jukka K. Korpela wrote:

> 2014-10-29 22:50, Tuxedo wrote:
>
> > One difference I notice is that MAP->AREA appears at the end of the BODY
> > node instead of at the beginning and before the IMG element, as in the
> > static HTML version, below, when in the DOM Inspector's tree view.
>
> It does not matter where you place the MAP element, since it has no
> visible content, only AREA elements that declare areas of an image
>
> >> .. as if the following would have existed in static HTML to begin with:
> >>
> >> <map name="mymap">
> >> <area shape="rect" coords="100,100,300,300" href="bla">
> >> </map>
> >> <img src="mymap.jpg" id="hello" usemap="#mymap">
>
> That, or these elements in the opposite order, is the normal setup, but
> it's just a natural and convenient way - keeping the functionally
> related elements together, even though they technically need not appear
> that way.
>

Thanks for the clarification.

Tuxedo

Tuxedo

10/30/2014 5:35:00 PM

0

Tuxedo wrote:

[...]

> var map = document.createElement("map");
> map.setAttribute("name","mymap");
>
> var area = document.createElement("area");
> area.setAttribute("href","bla");
> area.setAttribute("coords","100,100,300,300");
> area.setAttribute("shape","rect");

If the area coords attributes are variables, how can they be included in
the area.setAttribute function? Eg.:

x1 = 100; y1 = 100; x2 = 300; y2 =300;

area.setAttribute("coords","+x1+","+y1+","+x2+","+y2+");

But this is wrong. It reports in the console:
Error: The "coords" attribute of the <area shape="rect"> tag is not in the
"left,top,right,bottom" format.

Many thanks for any pointers!

Tuxedo

Jukka K. Korpela

10/30/2014 5:57:00 PM

0

2014-10-30 19:35, Tuxedo wrote:

>> var area = document.createElement("area");
>> area.setAttribute("href","bla");
>> area.setAttribute("coords","100,100,300,300");
>> area.setAttribute("shape","rect");
>
> If the area coords attributes are variables, how can they be included in
> the area.setAttribute function? Eg.:

You need to construct an expression that yields a suitable string as its
value.

> x1 = 100; y1 = 100; x2 = 300; y2 =300;
>
> area.setAttribute("coords","+x1+","+y1+","+x2+","+y2+");
>
> But this is wrong.

Yes, because only the second argument matters here, the rest are
discarded. You need this:

area.setAttribute("coords", x1 + "," + y1 + "," + x2 + "," + y2);

So you don?t quote the variable names, as they need to be evaluated, not
used literally. And you quote the commas, as they are to be taken
literally. The plus + operator performs string catenation when its
operands (or at least one of the operands) is a string.

--
Yucca, http://www.cs.tut.fi/...

Thomas 'PointedEars' Lahn

10/30/2014 6:46:00 PM

0

Jukka K. Korpela wrote:

> 2014-10-30 19:35, Tuxedo wrote:
>> x1 = 100; y1 = 100; x2 = 300; y2 =300;
>>
>> area.setAttribute("coords","+x1+","+y1+","+x2+","+y2+");
>>
>> But this is wrong.
>
> Yes, because only the second argument matters here, the rest are
> discarded. You need this:
>
> area.setAttribute("coords", x1 + "," + y1 + "," + x2 + "," + y2);

This and all other setAttribute() calls should be replaced with the
corresponding form of

area.coords = x1 + "," + y1 + "," + x2 + "," + y2;

(Likewise, getAttribute() calls should be replaced by property-read access
unless the original markup attribute value is wanted.) [1]

Another possibility here is

area.coords = [x1, y1, x2, y2];

or (probably safer)

area.coords = [x1, y1, x2, y2].toString();

or

area.coords = [x1, y1, x2, y2].join();

or (explicit)

area.coords = [x1, y1, x2, y2].join(",");

The first form should work (untested in recent environments, but supported
by previous experience) because the type of the â??coordsâ? property should be
String, as it is an implementation of an interface attribute whose type is
DOMString; so a built-in setter of that property should convert the value
RHS to String. Then the following applies:

The string representation of an Array instance is the comma-separated list
of the string representation of its elements as returned by
Array.prototype.toString(). The string representation of String values is
their value; the string representation of Number values is the one that most
closely represents the nearest IEEE-754 â??double precisionâ? floating-point
value, in the simplest case the concatenated decimal digits.

As for the second one, the toString() method inherited by Array instances
returns the same as the inherited join() method when called without
argument. Array.prototype.join() without argument (with argument
â??undefinedâ?) defaults to a comma (â??,â?) as separator. [2] This is â??probably
safer� than the former approach because it does not rely on a type-
converting setter LHS.

_________
[1] <http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-area-e...
(sic!)

[2] <http://ecma-international.org/ecma-262/5.1/#sec-15... pp.
--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Jukka K. Korpela

10/30/2014 6:57:00 PM

0

2014-10-30 20:46, Lahn the troll wrote:

> This and all other setAttribute() calls should be replaced with the
> corresponding form of

As usual, the resident troll should be ignored, as he/it is just
presenting some personal preferences as objective truth, to get people
involved in endless debates.

--
Yucca, http://www.cs.tut.fi/...