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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    document.getElementById("row1").style.backgroundImage = "images/Picture1.jpg"; issue

    Good morning

    I've run into a little problem or two with an onmouseover image switching script.

    I wanted to apply a background image to a table row onmouseover, and remove in onmouseout. I can't seem to be able to do this and I can't figure out why.

    You can see it at www.enviromark.ca/head/aboutInclude.php --> Click 'Staff' then 'Staff' again
    (If you use IE you won't be able to see the background image superimposed behind the <THEAD>... which is another issue I'd like to fix ) edit... apparently sometimes it works in FF, other times not... super weird

    Code:
    // add as many effects per function as you want
    function onStaff() 
    {document.staffPhoto.src = "images/staff/Marlo.jpg"; document.getElementById("row1").style.backgroundImage = "images/Picture1.jpg"} 
    function onStaff1() 
    {document.staffPhoto.src = "images/staff/Leah.jpg";} 
    function onStaff2() 
    {document.staffPhoto.src = "images/staff/Amber.jpg";} 
    function onStaff3() 
    {document.staffPhoto.src = "images/staff/Jordan.jpg";} 
    function onStaff4() 
    {document.staffPhoto.src = "images/staff/Allison.jpg";} 
    function onStaff5() 
    {document.staffPhoto.src = "images/staff/Adriana.jpg";} 
    function onStaff6() 
    {document.staffPhoto.src = "images/staff/Christina.jpg";} 
    function onStaff7() 
    {document.staffPhoto.src = "images/staff/Neil.jpg";} 
    function onStaff8() 
    {document.staffPhoto.src = "images/staff/Helene.jpg";} 
    function onStaff9() 
    {document.staffPhoto.src = "images/staff/TBA.jpg";} 
    function onStaff10() 
    {document.staffPhoto.src = "images/staff/Rhonda.jpg";} 
    function onStaff11() 
    {document.staffPhoto.src = "images/staff/Anita.jpg";} 
    function onStaff12() 
    {document.staffPhoto.src = "images/staff/Tyler.jpg";} 
    function onStaff13() 
    {document.staffPhoto.src = "images/staff/Jay.jpg";} 
    
    /*--------------------------------------------------------------------------------*/
    
    function offStaff() 
    {document.staffPhoto.src = "images/staff/blankPhoto.jpg";} 
    
    /*--------------------------------------------------------------------------------*/
    and the html:
    Code:
    <TABLE cellpadding="1" cellspacing="0" CLASS="MYTABLE">
    			
    <THEAD >
    <div id="topWaveStaff"></div>
      <TR CLASS="MYTABLE">
    	<TH width="172" CLASS="MYTABLE">Name</TH>
    	<TH width="310" CLASS="MYTABLE">Position</TH>
    	<TH width="110" CLASS="MYTABLE">Contact</TH>
      </TR>
    </THEAD>
    
    <TBODY>
      <TR CLASS="MYTABLE" id="row1" onmouseover="onStaff();" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Marlo Turner-Ritchie</TD>
    	<TD CLASS="MYTABLE">Executive Director</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[0], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row2" onmouseover="onStaff1()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Leah Dolgoy</TD>
    	<TD CLASS="MYTABLE">Fundraising & Development</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[1], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row3" onmouseover="onStaff2()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Amber</TD>
    	<TD CLASS="MYTABLE">Information and Referral</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[2], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row4" onmouseover="onStaff3()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Jordan</TD>
    	<TD CLASS="MYTABLE">Information and Referral</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[3], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row5" onmouseover="onStaff4()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Allison</TD>
    	<TD CLASS="MYTABLE">Medical Services</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[4], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row6" onmouseover="onStaff5()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Adriana</TD>
    	<TD CLASS="MYTABLE">Health Animator</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[5], "emails", "text", "")</script></TD>
      </TR>
      
      <TR CLASS="MYTABLE" id="row7" onmouseover="onStaff6()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Christina Foisy</TD>
    	<TD CLASS="MYTABLE">Sense Project</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[6], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row8" onmouseover="onStaff7()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Neil</TD>
    	<TD CLASS="MYTABLE">Jeunesse 2000</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[7], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row9" onmouseover="onStaff8()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">H&eacute;lene</TD>
    	<TD CLASS="MYTABLE">Young Parents Program</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[8], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row10" onmouseover="onStaff9()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">TBA</TD>
    	<TD CLASS="MYTABLE">Legal Services</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[9], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row11"  onmouseover="onStaff10()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Rhonda</TD>
    	<TD CLASS="MYTABLE">Social Services</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[10], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row12"  onmouseover="onStaff11()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Anita</TD>
    	<TD CLASS="MYTABLE">Streetwork</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[11], "emails", "text", "")</script></TD>
      </TR>
    
      <TR CLASS="MYTABLE" id="row13"  onmouseover="onStaff12()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Tyler</TD>
    	<TD CLASS="MYTABLE">Streetwork</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[12], "emails", "text", "")</script></TD>
      </TR>
      
      <TR CLASS="MYTABLE" id="row14" onmouseover="onStaff13()" onmouseout="offStaff()">  
    	<TD CLASS="MYTABLE">Jay</TD>
    	<TD CLASS="MYTABLE">Web Design</TD>
    	<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[13], "emails", "text", "")</script></TD>
      </TR>
    </TBODY>
    </TABLE>
    If I can't apply a background image to a row, is is possible to code a script to use a similar method to what I used here but applied onmouseover:
    Code:
    <div id="topWaveStaff"></div>
    <TR CLASS="MYTABLE">
    <TH width="172" CLASS="MYTABLE">Name</TH>
    <TH width="310" CLASS="MYTABLE">Position</TH>
    <TH width="110" CLASS="MYTABLE">Contact</TH>
    </TR>
    
    and the css
    #topWaveStaff, {
    z-index: -1;
    height: 30px;
    width: 600px;
    background-image: url(../images/topWave.jpg);
    margin-bottom: -30px;
    }
    i tried to simply put divs (id="rowX") above each <tr> but it didnt show anything onmouseover
    Last edited by canadianjameson; 08-30-2007 at 04:33 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Hi Jay,

    You're missing the ".src" off the backgroundImage from this line:
    Code:
    document.getElementById("row1").style.backgroundImage = "images/Picture1.jpg"
    Although I don't think it's going to help you anyway.
    I seem to remember trying to dynamically change the background image of elements before and could never get it to work, I think it's a limitation of IE (I've never tried in other browsers).

    I don't think your idea of putting divs above the tr's is going to work as it's not valid html so there's no guessing how IE will handle it!

    I was trying to think of a solution and this crazy idea popped into my head:
    What if you had a 1px wide table cell at the beginning of each row and inside it you had an normal image (which would probably have to be a 1px clear image to begin with). If you could set the overflow of this cell to overflow/display without moving the over cells in the row (this is key to this idea working but don't know if it's possible!) then you could assign the onmouseover to the row and change the src of the image in the first cell.

    The only other thing I could think of would be to have a floating div containing the image behind the table that you moved by pixel coordinates as you mouseover each row.

    What do you think?

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I think thats a great idea

    Isn't that what I'm doing with the <div id="topWaveStaff"></div> though?

    Could we just write a function to change the margin-bottom: -30px to incriment by 30 for each row?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,722
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there canadianjameson,
    document.getElementById('row1').style.backgroundImage = 'images/Picture1.jpg';
    ...should be...
    document.getElementById('row1').style.backgroundImage = 'url(images/Picture1.jpg)';

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I've tried both

    document.getElementById('row1').style.backgroundImage = 'url(images/Picture1.jpg)';

    and

    document.getElementById('row1').style.backgroundImage.src = "images/Picture1.jpg";

    and still no results

    i think I've found a simpler way to do this:
    I can use
    Code:
    document.getElementById("row1").className = "tableOver";}
    and have a css class like
    Code:
    .tableOver {
    background-image: url(../images/topWave.jpg);
    }
    The only thing I'd like now, to simplify my life, is to know how to do the following:

    How can i do this:
    Code:
    document.getElementById(this).style.backgroundImage.src = "images/Picture1.jpg";
    so that i do not have to enumerate each now id... how would I do this?

    EDIT Why does it display fluidly across all columns in FF but repeat at every column in IE?
    www.enviromark.ca/head/aboutInclude.php --> Click 'Staff'
    Last edited by canadianjameson; 08-30-2007 at 08:40 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Looks like you can forget everything I said! I must be getting this confused with something else!

    It would appear IE doesn't follow html standards (insert mock gasp of surprise here). Search google for apply a background image to a table row to try and find a solution, not sure you will though!

    oh and in answer to your other question, try this:
    Code:
    function rowRollOver(row){
     row.style.backgroundImage.src = "images/Picture1.jpg";
    }
    used like this:
    Code:
    <tr onmouseover="rowRollOver(this)">

  • #7
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    according to msdn, the proper syntax for IE is:
    Code:
    object.style.backgroundImage = 'url(path/to/jpeg)'
    "object.style.backgroundImage.src" would be for JS Image objects, which isn't what canadianjameson is working with; he's trying to manipulate the CSS.

    my guess is that it's some issue with the path. IE and FF have a long history of interpreting paths differently. try using an absolute path, e.g. http://yoursite/images/Picture1.jpg .

    regarding the question you asked in your edit, i'd bet that the cells in the table's rows are inheriting their background information from the row. you can probably take care of this by creating a style rule that tells table cells to have no background image, and a transparent color.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • Users who have thanked joh6nn for this post:

    canadianjameson (08-31-2007)

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hey,

    Sorry for the delayed response.

    I tried giving the TD a background-image: none and it prevented TR background as well...

    as for the .src versus backgroundImage: I went with .src because this prevents me from having to account for images sizes in the future (height and width would need to be defined in order for it to display properly, no?). Is my approach fundamentally wrong, or is it just a preference thing?

    lastly:
    I've noticed an onmouseover glitch in FF which sometimes occurs...
    if you go to www.enviromark.ca/head/aboutInclude.php and click 'Staff', then mouseover the different rows a bunch of times without leaving the table... after a few times the images that are displayed on the right begin to stick (i.e you will onmouseover an adjacent row and the image wont change. Oddly enough it occurs most often between 'Allison' and 'Neil'... the problem goes away for a bit if you take your mouse off of the table.

    What could be causing this? It is a very simple script that i thought i coded cleanly

    Code:
    // add as many effects per function as you want
    function onStaff() 
    {document.staffPhoto.src = "images/staff/Marlo.jpg";} 
    function onStaff1() 
    {document.staffPhoto.src = "images/staff/Leah.jpg";} 
    function onStaff2() 
    {document.staffPhoto.src = "images/staff/Amber.jpg";} 
    function onStaff3() 
    {document.staffPhoto.src = "images/staff/Jordan.jpg";} 
    function onStaff4() 
    {document.staffPhoto.src = "images/staff/Allison.jpg";} 
    function onStaff5() 
    {document.staffPhoto.src = "images/staff/Adriana.jpg";} 
    function onStaff6() 
    {document.staffPhoto.src = "images/staff/Christina.jpg";} 
    function onStaff7() 
    {document.staffPhoto.src = "images/staff/Neil.jpg";} 
    function onStaff8() 
    {document.staffPhoto.src = "images/staff/Helene.jpg";} 
    function onStaff9() 
    {document.staffPhoto.src = "images/staff/TBA.jpg";} 
    function onStaff10() 
    {document.staffPhoto.src = "images/staff/Rhonda.jpg";} 
    function onStaff11() 
    {document.staffPhoto.src = "images/staff/Anita.jpg";} 
    function onStaff12() 
    {document.staffPhoto.src = "images/staff/Tyler.jpg";} 
    function onStaff13() 
    {document.staffPhoto.src = "images/staff/Jay.jpg";} 
    
    /*--------------------------------------------------------------------------------*/
    function rowRollOver(row){
    row.className = "tableOver";
    }
    function rowRollOut(row){
     row.className = "tableOut";
    }
    // technically for this application you only need 'off()' because they are all the same, but nevertheless...
    function offStaff() 
    {document.staffPhoto.src = "images/staff/blankPhoto.jpg";} 
    //function offStaff14() 
    //{if (!document.images) return; document.streetworkButton.src = "images/staff/streetwork_BW.jpg"; document.staffPhoto.src = "images/staff/blankPhoto.jpg";} 
    
    
    /*--------------------------------------------------------------------------------*/
    Code:
    #staffAbout TABLE{ 
    border: 1px solid #39f;
    vertical-align: middle;
    border-collapse: collapse
    }
    #staffAbout TH {
    height: 30px;
    vertical-align: middle;
    }
    #staffAbout TD {  
    border-top: 1px solid #39f;
    font-size:10pt;
    text-align:center;
    height: 30px;
    vertical-align: middle;
    background-image: none;
    }
    .EMAILCELLS {
    text-align: right; 
    vertical-align: middle;
    border-top: 1px solid #39f;
    font-size:10pt;
    height: 30px;
    padding-right: 10px
    }
    .topWave {
    background-image: url(http://www.enviromark.ca/head/images/topWave.jpg);
    }
    .tableOver {
    background-image: url(http://www.enviromark.ca/head/images/topWaveMauve.jpg);
    }
    .tableOut {
    background-image: none;
    }
    Code:
    <div id="staffAbout">
    				<div class="centerLinks">
    					<a href="#staff" id="openStaff" onclick="zxcToggle('staff',3,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#006633','solid #006633 1px',3,1); return false">Staff</a>
    					<a href="#directors" onclick="zxcToggle('directors',3,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#006633','solid #006633 1px',3,1); return false">Board of Directors</a>
    				</div>
    				<div id="staff">
    					<TABLE cellpadding="1" cellspacing="0">
    								
    					<THEAD>
    					
    					  <TR class="topWave">
    						<TH width="172">Name</TH>
    						<TH width="310">Position</TH>
    						<TH width="110">Contact</TH>
    					  </TR>
    					</THEAD>
    					
    					<TBODY>
    					
    					  <TR id="row1" onmouseover="onStaff(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Marlo Turner-Ritchie</TD>
    						<TD>Executive Director</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[0], "emails", "text", "")</script></TD>
    					  </TR>
    				   
    					  <TR id="row2" onmouseover="onStaff1(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Leah Dolgoy</TD>
    						<TD>Fundraising & Development</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[1], "emails", "text", "")</script></TD>
    					  </TR>
    	
    					  <TR id="row3" onmouseover="onStaff2(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Amber</TD>
    						<TD>Information and Referral</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[2], "emails", "text", "")</script></TD>
    					  </TR>
    	
    					  <TR id="row4" onmouseover="onStaff3(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Jordan</TD>
    						<TD>Information and Referral</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[3], "emails", "text", "")</script></TD>
    					  </TR>
    	
    					  <TR id="row5" onmouseover="onStaff4(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Allison</TD>
    						<TD>Medical Services</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[4], "emails", "text", "")</script></TD>
    					  </TR>
    	
    					  <TR id="row6" onmouseover="onStaff5(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Adriana</TD>
    						<TD>Health Animator</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[5], "emails", "text", "")</script></TD>
    					  </TR>
    					  
    					  <TR id="row7" onmouseover="onStaff6(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Christina Foisy</TD>
    						<TD>Sense Project</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[6], "emails", "text", "")</script></TD>
    					  </TR>
    	
    					  <TR id="row8" onmouseover="onStaff7(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Neil</TD>
    						<TD>Jeunesse 2000</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[7], "emails", "text", "")</script></TD>
    					  </TR>
    	
    					  <TR id="row9" onmouseover="onStaff8(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>H&eacute;lene</TD>
    						<TD>Young Parents Program</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[8], "emails", "text", "")</script></TD>
    					  </TR>
    	
    					  <TR id="row10" onmouseover="rowRollOver(this)" onmouseout="rowRollOut(this)">  
    						<TD>TBA</TD>
    						<TD>Legal Services</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[9], "emails", "text", "")</script></TD>
    					  </TR>
    	
    					  <TR id="row11"  onmouseover="onStaff10(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Rhonda</TD>
    						<TD>Social Services</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[10], "emails", "text", "")</script></TD>
    					  </TR>
    	
    					  <TR id="row12"  onmouseover="onStaff11(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Anita</TD>
    						<TD>Streetwork</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[11], "emails", "text", "")</script></TD>
    					  </TR>
    	
    					  <TR id="row13"  onmouseover="onStaff12(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Tyler</TD>
    						<TD>Streetwork</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[12], "emails", "text", "")</script></TD>
    					  </TR>
    					  
    					  <TR id="row14" onmouseover="onStaff13(); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
    						<TD>Jay</TD>
    						<TD>Web Design</TD>
    						<TD CLASS="EMAILCELLS"><script>displaycontact(contacts[13], "emails", "text", "")</script></TD>
    					  </TR>
    					</TBODY>
    				  </TABLE>
    			  </div>
    I suppose the table problem would be fixed if i coded this as a div table, but i spent 3hrs trying to do that and failed
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    I've looked around on the web and can't find an example of how to apply an image to the table row in IE.
    I get the impression that IE doesn't support applying an image to a table row so when you do the cells inherit the image, which is why setting the background image of a cell to none means no image is displayed.

    On the wierd FF mouseover issue, I have no idea why this is happening, you could try preloading the images. Done something like this:
    Code:
    var files = Array("images/staff/Marlo.jpg","images/staff/Leah.jpg","images/staff/Amber.jpg","images/staff/Jordan.jpg","images/staff/Allison.jpg", "images/staff/Adriana.jpg","images/staff/Christina.jpg","images/staff/Neil.jpg","images/staff/Helene.jpg","images/staff/TBA.jpg", "images/staff/Rhonda.jpg","images/staff/Anita.jpg","images/staff/Tyler.jpg","images/staff/Jay.jpg" 
    );
    var staffPhotos=Array();
    for(var i=0; i<files.length; i++){
     staffPhotos[i] = new Image();
     staffPhotos[i].src = files[i];
    }
    var blankPhoto = new Image();
    blankPhoto.src="images/staff/blankPhoto.jpg";
     
    function onStaff(num){
     document.staffPhoto.src=staffPhotos[num].src;
    }
    function offStaff(){
     document.staffPhoto.src=blankPhoto.src;
    }
    Then your html will look like this:
    Code:
     <div id="staffAbout">
        <div class="centerLinks">
         <a href="#staff" id="openStaff" onclick="zxcToggle('staff',3,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#006633','solid #006633 1px',3,1); return false">Staff</a>
         <a href="#directors" onclick="zxcToggle('directors',3,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#006633','solid #006633 1px',3,1); return false">Board of Directors</a>
        </div>
        <div id="staff">
         <TABLE cellpadding="1" cellspacing="0">
            
         <THEAD>
         
           <TR class="topWave">
          <TH width="172">Name</TH>
          <TH width="310">Position</TH>
          <TH width="110">Contact</TH>
           </TR>
         </THEAD>
         
         <TBODY>
         
           <TR id="row1" class="tableOver" onmouseover="onStaff(0); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Marlo Turner-Ritchie</TD>
          <TD>Executive Director</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[0], "emails", "text", "")</script></TD>
           </TR>
           
           <TR id="row2" onmouseover="onStaff(1); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Leah Dolgoy</TD>
          <TD>Fundraising & Development</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[1], "emails", "text", "")</script></TD>
           </TR>
     
           <TR id="row3" onmouseover="onStaff(2); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Amber</TD>
          <TD>Information and Referral</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[2], "emails", "text", "")</script></TD>
           </TR>
     
           <TR id="row4" onmouseover="onStaff(3); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Jordan</TD>
          <TD>Information and Referral</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[3], "emails", "text", "")</script></TD>
           </TR>
     
           <TR id="row5" onmouseover="onStaff(4); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Allison</TD>
          <TD>Medical Services</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[4], "emails", "text", "")</script></TD>
           </TR>
     
           <TR id="row6" onmouseover="onStaff(5); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Adriana</TD>
          <TD>Health Animator</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[5], "emails", "text", "")</script></TD>
           </TR>
           
           <TR id="row7" onmouseover="onStaff(6); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Christina Foisy</TD>
          <TD>Sense Project</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[6], "emails", "text", "")</script></TD>
           </TR>
     
           <TR id="row8" onmouseover="onStaff(7); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Neil</TD>
          <TD>Jeunesse 2000</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[7], "emails", "text", "")</script></TD>
           </TR>
     
           <TR id="row9" onmouseover="onStaff(8); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>H&eacute;lene</TD>
          <TD>Young Parents Program</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[8], "emails", "text", "")</script></TD>
           </TR>
     
           <TR id="row10" onmouseover="onStaff(9); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>TBA</TD>
          <TD>Legal Services</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[9], "emails", "text", "")</script></TD>
           </TR>
     
           <TR id="row11"  onmouseover="onStaff(10); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Rhonda</TD>
          <TD>Social Services</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[10], "emails", "text", "")</script></TD>
           </TR>
     
           <TR id="row12"  onmouseover="onStaff(11); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Anita</TD>
          <TD>Streetwork</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[11], "emails", "text", "")</script></TD>
           </TR>
     
           <TR id="row13"  onmouseover="onStaff(12); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Tyler</TD>
          <TD>Streetwork</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[12], "emails", "text", "")</script></TD>
           </TR>
           
           <TR id="row14" onmouseover="onStaff(13); rowRollOver(this)" onmouseout="offStaff(); rowRollOut(this)">  
          <TD>Jay</TD>
          <TD>Web Design</TD>
          <TD CLASS="EMAILCELLS"><script>displaycontact(contacts[13], "emails", "text", "")</script></TD>
           </TR>
         </TBODY>
          </TABLE>
         </div>

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hey man,

    Thanks, but unfortunately it throws a whole bunch of object expected errors

    It's odd... i can't understand why this is occuring
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Oh, ok. I was trying to post as little as necessary, but guess that didn't work.
    Attached is the full page that works for me.
    Attached Files Attached Files

  • Users who have thanked mcjwb for this post:

    canadianjameson (09-05-2007)

  • #12
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hey

    It doesn't seem to work for me

    http://www.enviromark.ca/head/testy.htm

    maybe this would be easier if instead of a table i made a div table....
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #13
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    It's working fine, it was only suppose to solve the wierd FF issue where the images weren't changing! Sorry should have made that clearer.

    I'm afraid I don't know how to solve the mouseover table row image problem! And I can't really advise you about divs instead of tables since I suck at design, sorry!

  • #14
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    ohhhhhhhh k now i get it

    It does seem to fix that, although I notice that it seems to preload the entire image set every onmouseover regardless of whether or not it needs to... should this be happening or should it just preload the images above or below the current image? I point it out because if you onmouseover very fast in IE it says like "50 items remaining" or more (or less)

    What about preloading fixes the bug?

    i don't know if these will help you, but perhaps they can make this easier:
    Code:
    <script type="text/javascript">
     var reload = 1;
      function chkLoad(){
    
    // THE BELOW LINE IS FOR TESTING PURPOSE ONLY, PLEASE REMOVE //;
    // document.getElementById('test1').innerHTML += '<br>reload = '+reload+'<br>';
    
       var badLoad = [];
        for(var i=0;i<document.images.length;i++){
          if(!document.images[i].complete || document.images[i].onerror==true){
           var image = document.images[i].src.split('?');
             document.images[i].src = image[0]+'?'+reload;
             badLoad++;
    
    // THE BELOW LINE IS FOR TESTING PURPOSE ONLY, PLEASE REMOVE //;
    // document.getElementById('test1').innerHTML += document.images[i].src+'<br>';
    // <div id="test1"></div>
    
          }
        }      
    
        if(badLoad > 0 && reload < 5){
           setTimeout('chkLoad()',5000);
           reload++;
        }  
      }	
    </script>
    and this one i will be using a lot to make things load smoother -- i will be adding all of the images to this on any given page. basically it loads the images AFTER the page has loaded

    Code:
    <script type="text/javascript">
     //<![CDATA[
      function postLoad(){ 
        if(!window.name.match(/preLoad.complete/gi)){ 
         var images = new Array('images/smallBull1.gif',
    	                        'images/smallBull2.gif',
                                'images/bullLong.gif'); 
    
         var loader = new Array();
          for(var i=0; i<images.length; i++){
             loader[i] = new Image();
             loader[i].src = images[i];
           }
    		  window.name = 'preLoad.complete';
        }         
      }
     //]]>
    </script>
    Last edited by canadianjameson; 09-05-2007 at 08:55 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #15
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    I'm not seeing that problem I'm afraid, but perhaps this will help:
    Code:
    function onStaff(num){
     if (staffPhotos[num].complete)
     {
      document.staffPhoto.src=staffPhotos[num].src;
     }
    }
    the script I posted earlier is suppose to load the images in the background during the page load so when you mouseover the table the browser can just grab the image from the javascript memory. It definately shouldn't be preloading the entire image set every onmouseover and I'm a little confused as to how it could!?!

    I have no idea why this way works and the other way doesn't. The other way relies on the browser's cache for images, this means that each mouseover is actually a request to the server - it's just the browser intercepts this and says "I just loaded that image and I don't think it's changed, here, have it from my cache instead of going all the way to the server". I blame IE for lack of a better excuse!

  • Users who have thanked mcjwb for this post:

    canadianjameson (09-05-2007)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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