Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26018 > unrolled thread

Dynamically assign image map values?

Back to article view | Back to comp.lang.javascript

Contents

  Dynamically assign image map values? Tuxedo <tuxedo@mailinator.com> - 2014-10-29 08:47 +0100
    Re: Dynamically assign image map values? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-10-29 10:25 +0200
      Re: Dynamically assign image map values? Tuxedo <tuxedo@mailinator.com> - 2014-10-29 13:00 +0100
        Re: Dynamically assign image map values? Tuxedo <tuxedo@mailinator.com> - 2014-10-29 19:28 +0100
          Re: Dynamically assign image map values? Tuxedo <tuxedo@mailinator.com> - 2014-10-29 21:50 +0100
            Re: Dynamically assign image map values? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-10-30 07:51 +0200
              Re: Dynamically assign image map values? Tuxedo <tuxedo@mailinator.com> - 2014-10-30 09:44 +0100
            Re: Dynamically assign image map values? Tuxedo <tuxedo@mailinator.com> - 2014-10-30 18:35 +0100
              Re: Dynamically assign image map values? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-10-30 19:57 +0200
                Re: Dynamically assign image map values? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-30 19:46 +0100
                  Re: Dynamically assign image map values? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-10-30 20:57 +0200
                    Re: Dynamically assign image map values? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-30 21:26 +0100
                      Re: Dynamically assign image map values? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-10-30 22:58 +0200
                Re: Dynamically assign image map values? Tuxedo <tuxedo@mailinator.com> - 2014-10-30 20:52 +0100
                  Re: Dynamically assign image map values? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-10-30 22:23 +0200

#26018 — Dynamically assign image map values?

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

[toc] | [next] | [standalone]

#26019

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/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#26021

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

[toc] | [prev] | [next] | [standalone]

#26028

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

[toc] | [prev] | [next] | [standalone]

#26031

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

[toc] | [prev] | [next] | [standalone]

#26034

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/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#26037

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

[toc] | [prev] | [next] | [standalone]

#26045

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

[toc] | [prev] | [next] | [standalone]

#26046

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/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#26048

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-element>
    (sic!)

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

[toc] | [prev] | [next] | [standalone]

#26049

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/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#26053

Jukka K. Korpela wrote:

> 2014-10-30 20:46, Lahn the troll wrote:
>> This and all other setAttribute() calls should be replaced with the
>> corresponding form of
> 
> [abuse] should be ignored [abuse] just presenting some personal
> preferences as objective truth, [abuse]

/Si tacuisses, philosophus mansisses./
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#26054

2014-10-30 22:26, Lahn wrote:

> /Si tacuisses, philosophus mansisses./

I thought you said you had killfiled me. Well, trolls are trolls.

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

[toc] | [prev] | [next] | [standalone]

#26051

Jukka K. Korpela wrote:

[...]

> 
> 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.

Many thanks the correctly quoted code - problem solved!

Given the fact that the coordinates are dynamically generated I may end up 
with decimals in the coordinates, such as 42.699999999999996 etc.
I guess the browsers ignore fractions or maybe the above becomes a 43 
pixels offset. Still, it appears to work. Maybe I should round the numbers.

Tuxedo

[toc] | [prev] | [next] | [standalone]

#26052

2014-10-30 21:52, Tuxedo wrote:

> Given the fact that the coordinates are dynamically generated I may end up
> with decimals in the coordinates, such as 42.699999999999996 etc.
> I guess the browsers ignore fractions or maybe the above becomes a 43
> pixels offset. Still, it appears to work. Maybe I should round the numbers.

Yes, you should round them. HTML specs have been a bit vague on this, 
but HTML5, now finally a W3C Recommendation, mandates that the 
coordinates must be integers:
http://www.w3.org/TR/html5/embedded-content-0.html#attr-area-coords

Although browsers probably round the values if they are not integers, it 
is safer and more logical to do the rounding in your code.

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web