Jump to content

Not Validating


Spunky
 Share

Recommended Posts

Alright so I am trying to validate a webpage in Strict and I am getting 2 errors: Error Line 246, Column > 80: XML Parsing Error: attributes construct error…classes/NewDruidIcon.png" alt="Druid" width="208" height="100" id="Image1" on…Error Line 246, Column > 80: XML Parsing Error: Couldn't find end of Start Tag img line 246…classes/NewDruidIcon.png" alt="Druid" width="208" height="100" id="Image1" on…Here is line 246:

<a href="druid.html#main"><img src="Images/classes/NewDruidIcon.png" alt="Druid" width="208" height="100" id="Image1" onmouseover="MM_swapImage('Image1','','Images/classes/DruidRollover.png',1)" onmouseout="MM_swapImgRestore()" /></a><a href="hunter.html#main"><img src="Images/classes/NewHunterIcon.png" alt="Hunter" width="208" height="100" id="Image2" onmouseover="MM_swapImage('Image2','','Images/classes/NewHunterIconRollover.png',1)"onmouseout="MM_swapImgRestore()" /></a><a href="mage.html#main"><img src="Images/classes/NewMageIcon.png" width="208" height="100" alt="Mage" /></a><a href="paladin.html#main"><img src="Images/classes/NewPaladinIcon.png" width="208" height="100" alt="Paladin" /></a><a href="priest.html#main"><img src="Images/classes/NewPriestIcon.png" width="208" height="100" alt="Priest" /></a><a href="rogue.html#main"><img src="Images/classes/NewRogueIcon.png" width="208" height="100" alt="Rogue" /></a><a href="shaman.html#main"><img src="Images/classes/NewShamanIcon.png" width="208" height="100" alt="Shaman" /></a><a href="warlock.html#main"><img src="Images/classes/NewWarclockIcon.png" alt="Warlock" width="208" height="100" id="Image3" onmouseover="MM_swapImage('Image3','','Images/classes/WarlockRollover.png',1)" onmouseout="MM_swapImgRestore()" /></a>

Yes, it is one big huge line. This is because if I try to space it all to make it organized for some reason the spacing in the images gets thrown off. So I keep it as is. I wonder if this problem is caused by the use of inline javascript? If there is some way to accomplish this same task differently to get it to validate that would be wonderful. Ive checked each img tag and they all self-close, ofcourse, I could have missed something.

Link to comment
Share on other sites

At the point:

png',1)"onmouseout

(do a CTRL+F if you can't see it)there should be a space right after the " character.For future reference's sake

XML Parsing Error: attributes construct error
Means that the attribute is not formed properly. This can happen if you miss quotes around the attribute value, if you include a literal quote in the value (if the value must include quotes, they should be encoded), or, as in this case, if the end of the value is not followed by a space, ">", or "/>".
Link to comment
Share on other sites

The only browser that does not support the CSS :hover pseudo-class on all elements is IE6. But IE6 does support :hover on <a> elements. Your images are inside <a> elements. There is no reason to use javascript to swap images. Do yourself a favor and dump that tacky old MM_swapImage code.

Link to comment
Share on other sites

Thanks! It works!

The only browser that does not support the CSS :hover pseudo-class on all elements is IE6. But IE6 does support :hover on <a> elements. Your images are inside <a> elements. There is no reason to use javascript to swap images. Do yourself a favor and dump that tacky old MM_swapImage code.
Deidre's Dad, might you be able to, or someone else be able to, explain how to do this? I would love to drop the javascript and use CSS instead. :)
Link to comment
Share on other sites

Here's one way to go about it. I've demonstrated with only 2, but you can repeat the pattern as many times as you need.Notice that much of the work is handled by the .rollover class. This way, the definitions for the individual elements can stay pretty small. If I understood correctly, changing the links to floating block-level elements also eliminates the spacing problem you were having with your images. So now we don't have to put all the HTML on one line.CSS

a.rollover {   display: block;   float: left;   width: 208px;   height: 100px;   background-position: 0 0;   background-repeat: no-repeat;}a#druid {   background-image: url("Images/classes/NewDruidIcon.png")}a#druid:hover {   background-image: url("Images/classes/DruidRollover.png")}a#druid {   background-image: url("Images/classes/NewHunterIcon.png")}a#druid:hover {   background-image: url("Images/classes/NewHunterIconRollover.png")}.clear {   clear: both;}

HTML

<a href="druid.html#main" id="druid" class="rollover"></a><a href="hunter.html#main" id="hunter" class="rollover"></a><div class="clear">   <!-- some content --></div>

You don't actually need a <div> element after the images. I'm just illustrating the next block-level element in your page. Because all the image/links have a float property, the next element needs to have a clear property so that it does not also get floated.I don't really know your requirements, but an even better way to handle this whole thing might be to use image sprites. Because of the size of your images, you might want to limited your sprites to two "frames" per image, instead of ganging them all into one giant image. but the principle stays the same.

Link to comment
Share on other sites

Hmm, this is very interesting. Since I am on a deadline for a school contest I will go with this example for now and see how well it works. And I will definetely look into the image sprites. However, what do you mean two "frames" per image, instead of ganging them all into one giant image? Do you mean have 2 not so giant images?

Link to comment
Share on other sites

There's not really a word for it, but when you look at the sprites example it should be clear. The idea is to combine two images (one for rest, one for rollover) into a single image. Then you adjust the background coordinates to determine which "frame" is visible at a time. The advantage is that both images load together, so there's never any waiting for the rollover image to load. People do this with multiple toolbar images, also, so that they all appear onscreen simultaneously, without that goofy "popping-in" effect.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...