Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2004
    Location
    England
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Validating code for a Javascript Rollover - problems!

    I have this javascript file here which acts creates a rollover effect for some buttons I have in a navigation bar on my XHTML page...

    Code:
    if(document.images)
    {
    buttonHome = new Image
    buttonHomeRollover = new Image
    					
    buttonHipHop = new Image
    buttonHipHopRollover = new Image
    					
    buttonPop = new Image
    buttonPopRollover = new Image
    					
    buttonRock = new Image
    buttonRockRollover = new Image
    					
    buttonNewReleases = new Image
    buttonNewReleasesRollover = new Image
    					
    buttonCharts = new Image
    buttonChartsRollover = new Image
    					
    buttonHome.src = "buttons/homeButton.gif"
    buttonHomeRollover.src = "buttons/homeButtonRollover.gif"		
    buttonHipHop.src = "buttons/hiphopButton.gif"
    buttonHipHopRollover.src = "buttons/hiphopButtonRollover.gif"		
    buttonPop.src = "buttons/popButton.gif"
    buttonPopRollover.src = "buttons/popButtonRollover.gif"
    buttonRock.src = "buttons/rockButton.gif"
    buttonRockRollover.src = "buttons/rockButtonRollover.gif"
    buttonNewReleases.src = "buttons/newreleasesButton.gif"
    buttonNewReleasesRollover.src = "buttons/newreleasesButtonRollover.gif"
    buttonCharts.src = "buttons/chartsButton.gif"
    buttonChartsRollover.src = "buttons/chartsButtonRollover.gif"
    }
    			
    else
    {
    buttonHome = ""
    buttonHomeRollover = ""
    					
    buttonHipHop = ""
    buttonHipHopRollover = ""
    					
    buttonPop = ""
    buttonPopRollover = ""
    					
    buttonRock = ""
    buttonRockRollover = ""
    					
    buttonNewReleases = ""
    buttonNewReleasesRollover = ""
    
    buttonCharts = ""
    buttonChartsRollover = ""
    
    document.home = ""
    document.hiphop = ""
    document.pop = ""
    document.rock = ""
    document.newreleases = ""
    document.charts = ""
    			}
    Here's the relevant XHTML too...

    Code:
    <div id="navigation">
    			<table class="width">
    				<tr>
    					<td class="button">
    						<a href="index.htm" 
    							onmouseover="document.home.src=buttonHomeRollover.src" 
    							onmouseout="document.home.src=buttonHome.src">
    							<img class="border" src="buttons/homeButton.gif" name="home" alt="home"/>
    						</a>
    					</td>
    					<td class="button">
    						<a href="hiphop.htm" 
    							onmouseover="document.hiphop.src=buttonHipHopRollover.src" 
    							onmouseout="document.hiphop.src=buttonHipHop.src">
    							<img class="border" src="buttons/hiphopButton.gif" name="hiphop" alt="hiphop"/>
    						</a>
    					</td>
    					<td class="button">
    						<a href="pop.htm" 
    							onmouseover="document.pop.src=buttonPopRollover.src" 
    							onmouseout="document.pop.src=buttonPop.src">
    							<img class="border" src="buttons/popButton.gif" name="pop" alt="pop"/>
    						</a>
    					</td>
    					<td class="button">
    						<a href="rock.htm" 
    							onmouseover="document.rock.src=buttonRockRollover.src" 
    							onmouseout="document.rock.src=buttonRock.src">
    							<img class="border" src="buttons/rockButton.gif" name="rock" alt="rock"/>
    						</a>
    					</td>
    					<td class="button">
    						<a href="newreleases.htm" 
    							onmouseover="document.newreleases.src=buttonNewReleasesRollover.src" 
    							onmouseout="document.newreleases.src=buttonNewReleases.src">
    							<img class="border" src="buttons/newreleasesButton.gif" name="newreleases" alt="newreleases"/>
    						</a>
    					</td>
    					<td class="button">
    						<a href="charts.htm" 
    							onmouseover="document.charts.src=buttonChartsRollover.src" 
    							onmouseout="document.charts.src=buttonCharts.src">
    							<img class="border" src="buttons/chartsButton.gif" name="charts" alt="charts"/>
    						</a>
    					</td>
    				</tr>
    			</table>
    		</div>
    Basically, I'm trying to validate my XHTML page in XHTML 1.0 Strict, only trouble is, XHTML Strict 1.0 no longer accepts the use of the 'name' attribute within the <img> tag. When I delete the 'name' attribute of the <img> tags in my XHTML file, my javascript rollovers no longer work. Can anyone help me satisfy the problem of getting the rollovers to work but at the same time getting the code to validate in XHTML 1.0 Strict please?

    I'm new to this kinda stuff, only a university student.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    dont cross post! use the id attribute instead that should work in place of the name attribute


  •  

    Posting Permissions

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