Hi,I am coding a website using HTML5 using dreamweaver, but i have validate one of my page in w3c validater but i got an error that i don’t know how to fix it: notethat code with error is on image rollover feature on insert so i didn’ t code it my self.Thank you
here is the errors
Line 84, Column 218: The name attribute on the img element is obsolete. Use the id attribute instead.
…hina.jpg" alt=“chinatrip” name=“chinatrip” width=“200” height=“300” border=“0”>
Line 84, Column 218: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…hina.jpg" alt=“chinatrip” name=“chinatrip” width=“200” height=“300” border=“0”>
Line 85, Column 233: The name attribute on the img element is obsolete. Use the id attribute instead.
…p" width=“190” height=“300” border=“0”></a><a href=“#” onMouseOut=“MM_swapImgR…
Line 85, Column 233: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…p” width=“190” height=“300” border=“0”></a><a href=“#” onMouseOut=“MM_swapImgR…
Line 86, Column 130: The name attribute on the img element is obsolete. Use the id attribute instead.
…ern activity” name=“childern activity” width=“198” height=“300” border=“0”></a>
Line 86, Column 130: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…ern activity" name=“childern activity” width=“198” height=“300” border=“0”></a>
Line 88, Column 244: The name attribute on the img element is obsolete. Use the id attribute instead.
…“japaneseinstrument” name=“japanntrip” width=“200” height=“300” border=“0”></a>
Line 88, Column 244: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…“japaneseinstrument” name=“japanntrip” width=“200” height=“300” border=“0”></a>
Line 89, Column 215: Bad value images/childern activity.jpg for attribute src on element img: Whitespace in path component. Use %20 in place of spaces.
…p" width=“200” height=“300” border=“0”></a><a href=“#” onMouseOut=“MM_swapImgR…
Syntax of IRI reference:
Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.
Line 89, Column 215: The name attribute on the img element is obsolete. Use the id attribute instead.
…p” width=“200” height=“300” border=“0”></a><a href=“#” onMouseOut=“MM_swapImgR…
Line 89, Column 215: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
…p” width=“200” height=“300” border=“0”></a><a href=“#” onMouseOut=“MM_swapImgR…
Line 89, Column 215: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…p” width=“200” height=“300” border=“0”></a><a href=“#” onMouseOut=“MM_swapImgR…
Line 89, Column 428: The name attribute on the img element is obsolete. Use the id attribute instead.
…eafarmjapan.jpg” name=“japantriip” width=“198” height=“300” border=“0”></a></p>
Line 89, Column 428: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
…eafarmjapan.jpg" name=“japantriip” width=“198” height=“300” border=“0”></a></p>
Line 89, Column 428: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…eafarmjapan.jpg" name=“japantriip” width=“198” height=“300” border=“0”></a></p>
Line 91, Column 206: The name attribute on the img element is obsolete. Use the id attribute instead.
…ges/SriLankatea.jpg" name=“ceylontrip” width=“200” height=“300” border=“0”></a>
Line 91, Column 206: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
…ges/SriLankatea.jpg" name=“ceylontrip” width=“200” height=“300” border=“0”></a>
Line 91, Column 206: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…ges/SriLankatea.jpg" name=“ceylontrip” width=“200” height=“300” border=“0”></a>
Line 92, Column 224: The name attribute on the img element is obsolete. Use the id attribute instead.
…G" alt=“ceylontrip” name=“ceylontriip” width=“200” height=“300” border=“0”></a>
Line 92, Column 224: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…G" alt=“ceylontrip” name=“ceylontriip” width=“200” height=“300” border=“0”></a>
Line 93, Column 229: The name attribute on the img element is obsolete. Use the id attribute instead.
…lt=“ceylontrip” name=“ceylontrrip” width=“198” height=“300” border=“0”></a></p>
Line 93, Column 229: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
…lt=“ceylontrip” name=“ceylontrrip” width=“198” height=“300” border=“0”></a></p>
my html code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<meta name="description" content="summer tea frames trips">
<meta name="keywords" content="Tea,farms,summer,tourist">
<meta http-equiv="refresh" content="30">
<style>
.leftnav {
height:400px;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onLoad="MM_preloadImages('images/teafarm.jpg','images/chinesecostume.jpg','images/cherryblossom.jpg','images/childernactivity.jpg','images/greenteaicream.jpg','images/tealeafs.jpg','images/bananafarm.jpg','images/ceyloncostume.png','images/brushwriting.jpg')">
<div class="container">
<div id="header">
<img src="images/logo.gif" alt="logo" width="178" height="150" id="logo">
<div id='cssmenu' class="thumbnail">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>About</span></a>
<ul>
<li><a href='About.html'><span>About Us</span></a></li>
<li class='last'><a href='contactuss.html'><span>Contact Us</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Tea</span></a>
<ul>
<li><a href='History.html'><span>History</span></a></li>
<li><a href='ManifactureProcesss.html'><span>Manifacture Process</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Gallery.html'><span>Gallery</span></a>
<ul>
<li><a href='TourToChina.html'><span>Trip To China</span></a></li>
<li><a href="TourToCeylon.html"><span>Trip To Ceylon</span></a></li>
<li class='last'><a href='TourToJapan.html'><span>Trip To Japan</span></a></li>
</ul>
</li>
<li class='last'><a href="Contries.html"><span>Trip Time Line</span></a></li>
</ul>
</div>
</div>
<div class="leftnav">
<p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
<p>If you would like the navigation along the top, simply move the ul to the top of the page and recreate the styling.</p>
</div>
<div class="content">
<h1>welcome</h1>
<p>China Trip</p>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('chinatrip','','images/teafarm.jpg',1)"><img src="images/teahousechina.jpg" alt="chinatrip" name="chinatrip" width="200" height="300" border="0">
</a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('china trip','','images/chinesecostume.jpg',1)"><img src="images/chinesecostum.jpg" alt="chinesetrip" name="china trip" width="190" height="300" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('childern activity','','images/brushwriting.jpg',1)">
<img src="images/childernprogramchina.jpg" alt="childern activity" name="childern activity" width="198" height="300" border="0"></a>
<p>Japan Trip</p>
<p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('japanntrip','','images/cherryblossom.jpg',1)"><img src="images/janpaneseinstrument.jpg" alt="japaneseinstrument" name="japanntrip" width="200" height="300" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('japantrip','','images/childernactivity.jpg',1)"><img src="images/childern activity.jpg" name="japantrip" width="200" height="300" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('japantriip','','images/greenteaicream.jpg',1)"> <img src="images/teafarmjapan.jpg" name="japantriip" width="198" height="300" border="0"></a></p>
<p>Ceylon Trip</p>
<p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ceylontrip','','images/tealeafs.jpg',1)"><img src="images/SriLankatea.jpg" name="ceylontrip" width="200" height="300" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ceylontriip','','images/bananafarm.jpg',1)"><img src="images/coconutfarm.JPG" alt="ceylontrip" name="ceylontriip" width="200" height="300" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ceylontrrip','','images/ceyloncostume.png',1)"><img src="images/ceyloncostume.jpg" alt="ceylontrip" name="ceylontrrip" width="198" height="300" border="0"></a></p>
</div>
<div id="footer">
<p>©2013 .Last Update: 5 December,2013</p>
</div>
</div>
</body>
</html>
my css code:
@charset "UTF-8";
/* CSS Document */
#header {
background: #ADB96E;
align: left;
float:left;
padding:10px;
display:inline-block;
border: 0px solid #006600;
width:800px;
}
#cssmenu {
align: right;
float:right;
display: inline-block;
border: 1px solid #006600;
background: #006600;
}
.menu
{
float:left;
width:80px;
height:90px;
margin:20px;
}
#cssmenu > ul {
padding: 1px 0;
margin: 0px;
list-style: none;
width: 100%;
height: 21px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
font: normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
display: block;
float: left;
position: relative;
width: 120px;
}
#cssmenu > ul li a:link,
#cssmenu > ul li a:visited {
padding: 4px 0;
display: block;
text-align: center;
text-decoration: none;
background: #006600;
color: #ffffff;
width: 120px;
height: 13px;
}
#cssmenu > ul li:hover a,
#cssmenu > ul li a:hover,
#cssmenu > ul li a:active {
padding: 4px 0;
display: block;
text-align: center;
text-decoration: none;
background: #339933;
color: #ffffff;
width: 120px;
height: 13px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#cssmenu > ul li ul {
margin: 0;
padding: 1px 1px 0;
list-style: none;
display: none;
background: #ffffff;
width: 120px;
position: absolute;
top: 21px;
left: -1px;
border: 1px solid #006600;
border-top: none;
}
#cssmenu > ul li:hover ul {
display: block;
}
#cssmenu > ul li ul li {
clear: left;
width: 120px;
}
#cssmenu > ul li ul li a:link,
#cssmenu > ul li ul li a:visited {
clear: left;
background: #006600;
padding: 4px 0;
width: 120px;
border: none;
border-bottom: 1px solid #ffffff;
position: relative;
z-index: 1000;
}
#cssmenu > ul li ul li:hover a,
#cssmenu > ul li ul li a:active,
#cssmenu > ul li ul li a:hover {
clear: left;
background: #339933;
padding: 4px 0;
width: 120px;
border: none;
border-bottom: 1px solid #ffffff;
position: relative;
z-index: 1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: 120px;
top: -2px;
padding: 1px 1px 0 1px;
border: 1px solid #006600;
border-left: 1px solid #006600;
background: #ffffff;
z-index: 900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
display: block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link,
#cssmenu > ul li ul li ul.navigation-3 li a:visited {
background: #006600;
}
#cssmenu > ul li ul li ul.navigation-3 li:hover a,
#cssmenu > ul li ul li ul.navigation-3 li a:hover,
#cssmenu > ul li ul li ul.navigation-3 li a:active {
background: #339933;
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #78c679;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 820px;
background:#addd8e;
margin: 0 auto;
}
#logo{
width:178px;
height:150px;
float:left;
}
.leftnav {
float: left;
width: 180px;
background: #EADCAE;
height:800px;
padding:5px;
}
.content {
padding: 10px;
width: 610px;
float: left;
background:#addd8e;
}
.middltitle{
vertical-align:middle;
}
.rightimages{
float:right;
}
.leftimages{
float:left;
}
#footer {
padding: 10px 0;
background: #CCC49F;
position: relative;
clear: both;
color:#963;
font-size:.75em;
font-style:italic;
}