Solved

W3C error

Posted on 2014-04-02
2
295 Views
Last Modified: 2014-04-03
I've updated my site to html5 from XHTML 1.0 Transitional, and some code which previously validated is now triggering an error.  The error is:
"The img element with the ismap attribute set must have an a ancestor with the href attribute."  In the previous version of this page, this code was enveloped as CData, which allowed it to validate.  For some reason, when checking under html5, W3C rejects the CData tag as a "bogus comment."

Here is the code which caused the error:

<![CDATA[
<center></center><map name="FrontPageMap">
<area shape="rect" coords="310,96,580,120" href="mailto:stay@mauitradewinds.com"></map>
<p class="hiddenText">]]>
<img id="logo1" ismap="ismap" usemap="#FrontPageMap" src="images/logo1.png" alt="" class="scalable">

 Please advise how to satisfy the "ancestor href" requirement, or how to apply CData in html5 so that it will validate.
0
Comment
Question by:ddantes
2 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 245 total points
Comment Utility
Frontpage is the main problem...

You just need to recreate your image map.  http://www.w3schools.com/tags/tag_map.asp
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Open in new window


You may not need a map and just use
<a href="mailto:stay@mauitradewinds.com">
   <img id="logo1"  src="images/logo1.png" alt="" class="scalable">
</a>

Open in new window

0
 

Author Comment

by:ddantes
Comment Utility
That really worked.  I do want to map the link -- I prefer that to having the entire image be a link.  Thank you.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now