SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    swapping 'name' for 'id' for W3C HTML 4.0 compliancy

    Hi All,

    Can anyone point me to an image rollover script that uses id and not name in the img tag?

    I'm trying to validate a page (using validator.w3.org) that uses the name attribute in support of some javascript image rollover script, but this is causing the validator to error.

    Code:
    Line 280, column 242:  there is no attribute "NAME"  (explain...).
    
      ...images/misc/dotoff.gif');"><img name="name1" SRC="images/misc/dotoff.gif" hsp
    Apparently 'name' has been dropped in favour of 'id'. If I simply change name to id in my script, the results are:
    1. The page now validates BUT
    2. The rollover effect no longer works in Internet Explorer AND causes a javascript error
    3. The rollover effect DOES work in Mozilla (well, Phoenix/Firebird).

    Can anyone set me straight on the road to javascript rollovers and w3c compliancy? :-)

    Thanks.
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    What's your JS function look like?

  3. #3
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is ridiculous...as long as "name" works, who cares if it's "w3c compliant" or not? But if you really want to be compliant, you could write a function like this:

    <script language="javascript">
    function rolloverImg(imgId, rolloverImgName, format)
    {
    var imgTag = document.getElementById(imgId);

    imgTag.src = rolloverImgName+format;
    }
    </script>

    <img src="img1.gif" id="image1" OnMouseOver="rolloverImg(this.id, 'img2', '.gif')">

    I didn't test this code but it should work...

  4. #4
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    What's your JS function look like?
    The key parts of the code look like this:

    Code:
    <script LANGUAGE="JavaScript" type="text/javascript">
    	<!--	
    	if (document.images) 
    	{
    	   aoff = new Image();
    	   aoff.src ="images/buttons/discussion_off.gif";
    	   aon = new Image();
    	   aon.src ="images/buttons/discussion_on.gif";
    	}
    	function imgOn(imgName)
    	{
    	   	if (document.images)
    		{
    	       	document[imgName].src = eval(imgName + "on.src");
    	    }
    	}
    	function imgOff(imgName)
    	{
    	   	if (document.images)
    		{
    	       	document[imgName].src = eval(imgName + "off.src");
    	    }
    	}	
    	function changeImages(){
    	if (document.images) {
    		for (var i=0; i<changeImages.arguments.length; i+=2) {
    			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    		}
    	}
    	}
    	
    	function newImage(arg) {
    	if (document.images) {
    		rslt = new Image();
    		rslt.src = arg;
    		return rslt;
    	}
    	}
    	
    	var preloadFlag = false;
    	function preloadImages() {
    	if (document.images) {
    		doton = newImage("images/misc/doton.gif");
    		dotoff= newImage("images/misc/dotoff.gif");			
    		preloadFlag = true;
    	}
    	}
    	// -->
    </script>
    	
    
    <a href="index.htm?" ONMOUSEOVER="changeImages('name1','images/misc/doton.gif');" ONMOUSEOUT="changeImages('name1', 'images/misc/dotoff.gif');"><img name="name1" SRC="images/misc/dotoff.gif" hspace="5" width="18" height="18" border="0" alt="home"></a>
    This is ridiculous...as long as "name" works, who cares if it's "w3c compliant" or not?
    http://www.digital-web.com/features/..._2002-09.shtml
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This should work a little better. I replaced "document.images" with "document.getElementById". This code is untested, but if you need help fixing it up I'd be more than happy to work this out:
    Code:
    <script LANGUAGE="JavaScript" type="text/javascript">
    <!-- 
    if (document.getElementById) 
    { 
    	aoff = new Image(); 
    	aoff.src ="images/buttons/discussion_off.gif"; 
    	aon = new Image(); 
    	aon.src ="images/buttons/discussion_on.gif"; 
    	} 
    	
    function imgOn(imgName) { 
    if (document.getElementById) { 
    	document.getElementById(imgName).src = eval(imgName + "on.src" );
    	 } 
    } 
    
    function imgOff(imgName) { 
    if (document.getElementById) { 
    document.getElementById(imgName).src = eval(imgName + "off.src" ); 
    } 
    } 
    function changeImages(){ 
    if (document.getElementById) { 
    for (var i=0; i<changeImages.arguments.length; i+=2) { 
    document.getElementById(changeImages.arguments[i]).src = changeImages.arguments[i+1]; 
    } 
    } 
    } 
    
    function newImage(arg) { 
    if (document.getElementById) { 
    	rslt = new Image(); 
    	rslt.src = arg; 
    	return rslt; 
    	} 
    } 
    var preloadFlag = false; 
    
    function preloadImages() { 
    if (document.getElementById) { 
    	doton = newImage("images/misc/doton.gif" ); 
    	dotoff= newImage("images/misc/dotoff.gif" ); 
    	preloadFlag = true; 
    	} 
    } 
    // --> 
    </script>

  6. #6
    Don't eat yellow snow spaceman's Avatar
    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    1,039
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks vgarcia - as you say, it looks like getElementById was the bit I was missing. Will give it a go and report back...
    Web Design Perth Melbourne .:. Itomic Business Website Solutions
    Drupal Experts .:. Drupalise


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •