Spunky Posted February 26, 2010 Share Posted February 26, 2010 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 More sharing options...
boen_robot Posted February 26, 2010 Share Posted February 26, 2010 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 errorMeans 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 More sharing options...
ShadowMage Posted February 26, 2010 Share Posted February 26, 2010 I saw the missing space, but I wasn't sure if it was a problem. So, I tested it out and I didn't see any errors using the HTML Validator FireFox addon. Link to comment Share on other sites More sharing options...
jeffman Posted February 27, 2010 Share Posted February 27, 2010 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 More sharing options...
Spunky Posted February 27, 2010 Author Share Posted February 27, 2010 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 More sharing options...
jeffman Posted February 27, 2010 Share Posted February 27, 2010 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 More sharing options...
Spunky Posted February 28, 2010 Author Share Posted February 28, 2010 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 More sharing options...
jeffman Posted February 28, 2010 Share Posted February 28, 2010 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.