Experience with Image Map software - clickable images?

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Arnvid
Rank I - Novice
Posts: 13
Joined: Fri Mar 14, 2014 11:48 am

Experience with Image Map software - clickable images?

Post by Arnvid »

Had an old image map software - or clickable images creator, but problem is that the code created is not good html.

So, anyone here that have experience with a good image-map-generator which generate html valid code?
User avatar
Lou
Rank V - Professional
Posts: 297
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO

Re: Experience with Image Map software - clickable images?

Post by Lou »

Short answer, No I don't. I do have a couple of places where I use image maps.

How bad is the html? is it fixable? My experience with auto code generation is that there is 1) lots of junk that can be deleted, or 2) the errors are repetitious, so easy to spot and remove.

I have not found it that hard to do the coding. It may be a bit tedious but quite doable. One of my application is a state click-able map of the US. Glad I only needed to do it once, but doable.
Lou
Say what you will about Sisyphus. He always has work.
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: Experience with Image Map software - clickable images?

Post by MikeGale »

Haven't done that for a while. My approach is to hand edit and fix markup made by dodgy tools.

If anybody has (or will) research this I, for one, would really appreciate a good technical report. Something like:
  1. Quick description of what's being tested
  2. Examples of code generated by each tool
  3. CSE errors from that code
Would be very useful to others going down this road. (The examples could also be used when exercising CSE in testing.)
Arnvid
Rank I - Novice
Posts: 13
Joined: Fri Mar 14, 2014 11:48 am

Re: Experience with Image Map software - clickable images?

Post by Arnvid »

Thanks to both Lou and Mike.
I did a bit search on option, and got this shareware (20 days trial) for two reasons - and one is that it got a free online version as well (-:
Let me use Mike's setup here:

1. Quick description of what's being tested
The software is Map Designer Pro by imagecure.com
http://www.imagecure.com/index.php/prod ... p-designer
- and the free online tool by imagecure
http://www.imagecure.com/index.php/onli ... map-editor

2. Examples of code generated by each tool
The Map Designer Pro give this code:
<IMG SRC="luxormap_base4b580eng.jpg" WIDTH=580 HEIGHT=493 BORDER=0 ISMAP USEMAP="#luxormap_base4b580eng.jpg">

<MAP NAME="luxormap_base4b580eng.jpg">
<AREA SHAPE="RECT" COORDS="463,39,567,111" HREF="http://www.nilevikings.com/maps/luxormap.html#karn" ALT="Karnak temple" OnMouseOver="window.status='Go to Karnak temple'; return true">
<AREA SHAPE="RECT" COORDS="446,177,567,261" HREF="http://www.nilevikings.com/maps/luxormap.html#lxrcor" ALT="Luxor Corniche view" OnMouseOver="window.status='Go to Luxor Corniche view'; return true">
<AREA SHAPE="RECT" COORDS="449,274,548,358" HREF="http://www.nilevikings.com/maps/luxormap.html#lxrtemp" ALT="Luxor temple" OnMouseOver="window.status='Go to Luxor temple'; return true">

</MAP>

- and the online version give this code:
<img src="luxormap_base4b580eng.jpg" alt="" usemap="#map" />
<map name="map">
<area shape="rect" coords="454, 280, 548, 357" href="http://www.nilevikings.com/maps/luxormap.html#lxrtemp" alt="Luxor temple" title="Luxor temple" />
<area shape="rect" coords="464, 186, 563, 245" href="http://www.nilevikings.com/maps/luxormap.html#lxrcor" alt="Luxor Corniche" title="Luxor Corniche" />
<area shape="rect" coords="463, 37, 568, 89" href="http://www.nilevikings.com/maps/luxormap.html#karn" alt="Karnak temple" title="Karnak temple" />
</map>

3. CSE errors from that code
- let me first of all say that both codes need some tweaking, but it should go faster than doing it all for hand (-:

The software version and the online give basically same, and I have to add that I use a polyglot XHTML/HTML5 coding. Software version give uppercase, while the online tool give lowercase (which is better) - still, the online give space in coords, and the software version give that part correctly without space.

So let med give the CSE errors for the software version:

The tag name "AREA" does not match (with case-sensitivity) "area". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
The attribute name "SHAPE" does not match (with case-sensitivity) "shape". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
In XHTML, enumerated attribute values are case-sensitive and must be lowercase. Instead of "RECT", use "rect". This is in contrast to HTML, where values are normally not case-sensitive.
---
The "SHAPE" attribute for this "AREA" element has an invalid value "RECT". The expected value is one of the following: "circle", "default", "poly", or "rect".
---
The attribute name "COORDS" does not match (with case-sensitivity) "coords". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
The attribute name "HREF" does not match (with case-sensitivity) "href". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
The attribute name "ALT" does not match (with case-sensitivity) "alt". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
The attribute name "OnMouseOver" does not match (with case-sensitivity) "onmouseover". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
8 messages for line 197

The attribute name "SHAPE" does not match (with case-sensitivity) "shape". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
The tag name "AREA" does not match (with case-sensitivity) "area". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
In XHTML, enumerated attribute values are case-sensitive and must be lowercase. Instead of "RECT", use "rect". This is in contrast to HTML, where values are normally not case-sensitive.
---
The "SHAPE" attribute for this "AREA" element has an invalid value "RECT". The expected value is one of the following: "circle", "default", "poly", or "rect".
---
The attribute name "COORDS" does not match (with case-sensitivity) "coords". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
The attribute name "HREF" does not match (with case-sensitivity) "href". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
The attribute name "ALT" does not match (with case-sensitivity) "alt". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
The attribute name "OnMouseOver" does not match (with case-sensitivity) "onmouseover". NOTE: This document is assumed to be polyglot and polyglot documents are case-sensitive (because they are XML compatible).
---
8 messages for line 197

- and so forth for case-sensitivity, and then this

XHTML requires the "id" attribute for the "map" element. Note that this is in contrast to HTML 4.01 and HTML5, which require the "name" attribute. Consider using both "id" and "name" attributes (set equal to the same value) for backward compatibility with HTML.
---
Ensure that the mobile devices that you are targeting support image maps effectively. This often requires that they have a pointing device or a touchscreen.
---
2 messages for line 196

So "funny" part is that the free version only give 2 messages, while the software give 8 - and here basically because case-sensitivity.
Still, even if it need some recoding it should be pretty easy to come up with a clean code, so I will use it as I got a fair number of maps that I need this for. Strange anyway that the producer of Map Designer don't clean up the code, as if s/he had done this, I guess far more people would clean up their code before they let their program produce code for others ...

Bottom line for me: absolutely useful WHEN following the points in CSE, but not fully generated code - it's generated + CSE adjusted code (-:
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Experience with Image Map software - clickable images?

Post by Albert Wiersch »

Arnvid, thanks for those details.

My thoughts are that perhaps there is an option to produce lowercase tags and attributes (this should be the default in my opinion but perhaps it's not). You may want to look into that.

My other thought is that you could use the 'Quick Lowercase Tags' tool in the Tools menu in CSE HTML Validator to lowercase the tag names and attribute names. You could paste the generated HTML into a blank document in CSE's editor then choose the 'Quick Lowercase Tags' tool or just press Ctrl+F6 (as the keyboard shortcut) and it should instantly convert tag and attribute names to lowercase, then you can copy and paste the 'fixed' HTML into your document.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Arnvid
Rank I - Novice
Posts: 13
Joined: Fri Mar 14, 2014 11:48 am

Re: Experience with Image Map software - clickable images?

Post by Arnvid »

Thanks Albert, that's great.

There were no lowercase option in the Map Designer, but the Ctrl+F6 in CSE did the job (-:
Well this is the result of the test when making lowercase with CSE:

<img src="luxormap_base4b580eng.jpg" width=580 height=493 border=0 ismap usemap="#luxormap_base4b580eng.jpg">

<map name="luxormap_base4b580eng.jpg">
<area shape="RECT" coords="463,39,567,111" href="http://www.nilevikings.com/maps/luxormap.html#karn" alt="Karnak temple" onmouseover="window.status='Go to Karnak temple'; return true">
<area shape="RECT" coords="446,177,567,261" href="http://www.nilevikings.com/maps/luxormap.html#lxrcor" alt="Luxor Corniche view" onmouseover="window.status='Go to Luxor Corniche view'; return true">
<area shape="RECT" coords="449,274,548,358" href="http://www.nilevikings.com/maps/luxormap.html#lxrtemp" alt="Luxor temple" onmouseover="window.status='Go to Luxor temple'; return true">

</map>

For the 'shape="RECT"' tag, I guess that the tag "RECT" is not really a tag?
Anyway - that is not a problem, most were taken this way, and having CSE HTML Validator make sure the end product is good. Strange that software like this don't bother to fix the output to validated html - but it looks like Amazon is not alone in putting out incorrect html.

Guess my conclusion must be: you can even use a crappy software or a provider who give not validated html to users, as long as you got CSE HTML Validator to fix it all up in the end ((-:
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Experience with Image Map software - clickable images?

Post by Albert Wiersch »

For XHTML/polyglot documents, the "shape" attribute value should be in lowercase. The lowercase tool does not currently change attribute values to lowercase so that would have to been done manually if you need XHTML compatibility. You may also have to add a slash ('/') character to the end of empty tags (again, only for XHTML/polyglot compatibility).

It is indeed strange that a software product to make image maps would not give you basic options like HTML or XHTML output, which should be very easy to implement.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Arnvid
Rank I - Novice
Posts: 13
Joined: Fri Mar 14, 2014 11:48 am

Re: Experience with Image Map software - clickable images?

Post by Arnvid »

Let me try to make a conclusion (at least personal) when it come to this good discussion about 'map' coding. Based upon the 'KISS'* concept I have tried to strip the map code as much as possible, and this example is the result:

<map id="luxormap_580eng" name="luxormap_580eng">
<area shape="rect" coords="463,39,567,111" href="http://www.nilevikings.com/maps/luxormap.html#karn" alt="Karnak temple" />
</map>

Based upon CSE HTML Validator I changed 'map name' to 'map id' - and of course changed all uppercase to lowercase. It's works well, and if not anybody else see any code problems here - I guess the easy way would be to use the online (and free) version of Map Designer to get the coordinates and use a correct html coding?
http://www.imagecure.com/index.php/onli ... map-editor



PS - KISS='Keep It Simple Stupid', or as I like to say it 'Keep It Simple Sweetie' (-: