WEB anyone have a clean js rollover script?

Discussion in 'OT Technology' started by BoostedBoogie, May 22, 2008.

  1. i'm tired of using dreamweaver's sloppy code and would rather a clean indexOf code or something similar.
     
  2. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Wrote this one myself.

    Code:
    window.onload = rollover;
    
    function rollover() {
    	if(!document.getElementById && document.getElementsByTagName) return false;
    	
    	if (document.getElementById("mouseovers")) {
    		var source = document.getElementById("mouseovers");
    		var images = source.getElementsByTagName("img");
    		
    		for (var i=0; i < images.length; i++) {
    			var suffix = images[i].src.substring(images[i].src.lastIndexOf('.'));
    			var prefix = images[i].src.slice(0,images[i].src.length - suffix.length);
    			imgload = new Image();
    			imgload.src = prefix+"_on"+suffix;
    		}
    		
    		for (var i=0; i < images.length; i++) {
    			images[i].onmouseover = function() {
    				var suffix = this.src.substring(this.src.lastIndexOf('.'));
    				var prefix = this.src.slice(0,this.src.length - suffix.length);
    				this.src = prefix+"_on"+suffix;
    			}
    			
    			images[i].onmouseout = function() {
    				this.src = this.src.replace("_on", '');
    			}	
    		}
    	}
    }
    
    Code:
    <ul id="mouseovers">
      <li><img src="images/one.jpg" alt="First image" /></li>
      <li><img src="images/two.jpg" alt="Second image" /></li>
      <li><img src="images/three.jpg" alt="Third image" /></li>
      <li><img src="images/four.jpg" alt="Fourth image" /></li>
    </ul>
    
    Mouseover image will need to have '_on' appended to the file name. So, 'one.jpg' would be 'one_on.jpg'.
     
  3. :bowdown:
     
  4. ROFLCORE

    ROFLCORE Guest

    css rollover > javascript rollover
     
  5. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    You have no idea what you're talking about.
     
  6. ROFLCORE

    ROFLCORE Guest

    :ugh2:
     
  7. ROFLCORE

    ROFLCORE Guest

    This is the most pseudo "webmaster lab" on the net. :rofl:

    All you guys do is put eachother down. It's awesome.
     
  8. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Get back to me when you can accomplish an image based rollover utilizing only CSS without the use of JavaScript in IE6.
     
  9. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Then how about you make yourself useful instead of posting shit like:

    The above quote basically sums up the majority of your posts in this forum. Welcome to the most pseudo webmaster lab on the net. You'll fit quite nice here.
     
  10. ROFLCORE

    ROFLCORE Guest

    You're not able to produce image based rollovers with just css on ie6?
     
  11. ROFLCORE

    ROFLCORE Guest

    I just had to manually check several sites that I know accomplish this only because your post made me second guess myself. That was a waste of time, but at least I know now that I was correct. Thanks!
     
  12. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Give it a try.
     
  13. ROFLCORE

    ROFLCORE Guest

    I did and was successful. I emphasized the "you're" for a reason, big guy.
     
  14. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    :rofl: Ok, champ. It's not possible. Psuedo classes are buggy in IE6. You need JavaScript to back it up in order for it to function properly.

    Post a link to your test so we can observe your failure.
     
  15. ROFLCORE

    ROFLCORE Guest

  16. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Waiting on a link.
     
  17. ROFLCORE

    ROFLCORE Guest

    Just google it, guru.
     
  18. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Left the thread without posting a link to his test case. :hsughno: I'm not surprised.
     
  19. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    You have no clue what you're talking about. Again, the :hover Psuedo class is bugged in IE6. You need to write a JavaScript for it to work correctly. Why am I wasting my time on this 30 second tutorial web masters that come in here and think they know what they're talking about?
     
  20. ROFLCORE

    ROFLCORE Guest

    Oh, I'm still here. I just know for sure it works because I'm still doing it. But keep telling yourself you know what's up.
     
  21. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    We're waiting on a link, newbie.
     
  22. ROFLCORE

    ROFLCORE Guest

  23. Browning

    Browning Active Member

    Joined:
    Feb 14, 2005
    Messages:
    89,465
    Likes Received:
    10
  24. TurkeyChicken

    TurkeyChicken New Member

    Joined:
    Jun 26, 2003
    Messages:
    42,913
    Likes Received:
    0
    Location:
    Albuquerque, NM
    rollovers without javascript? unpossible.

    lets see some links.
     
  25. Ricky

    Ricky █▄ █▄█ █▄ ▀█▄

    Joined:
    Jun 17, 2005
    Messages:
    38,767
    Likes Received:
    6
    Webmaster lab. Serious bidnesss
     

Share This Page