SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb A Real Unobtrusive Image Rollover

    Hey All,
    I have been all over the net looking for a good Javascript image rollover script (i have seen about 10 million bad ones), and so far no luck, it seems like everyone just over complicates it.

    I came up with this:
    Code:
    /* = Image rollover
    -----------------------------------------------------------------------------*/
    function imageChange(){
      if(!document.getElementsByTagName) return false;
      var imgs = document.getElementsByTagName("IMG");
      for(i=0; i<imgs.length; i++){
        if(imgs[i].src.match("_n")){
          //Preload Image
          var preloadPath = imgs[i].src.replace("_n", "_x");
          var imageObj = new Image();
          imageObj.src=preloadPath;
          // onmouseover change
          imgs[i].onmouseover=function(){
            this.src=this.src.replace("_n", "_x");
          }
          imgs[i].onmouseout=function(){
            this.src=this.src.replace("_x", "_n");
          }
        }
      }
    }
    Just load this function on page load with your addLoadEvent() function and away you go.
    any image that you want to have a rollover just name like this:
    just add "_n" for the normal state.
    and a "_x" for the over state.
    eg:
    imageName_n.jpg - normal
    imageName_x.jpg - over

    the script preloads all the _x images when the page loads so all you have to worry about is naming your images.

    away you go with no extra markup in your html.
    It seems like the best solution to me.
    Let me know what you think.

    Thanks,
    Weston

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Mirek Komárek,

    Yes i am aware that you can make great rollovers with css, though the point was doing it with an actual image rather than a background image. Like if your client wants you to use a specific font lets say for a navigation, and rather than using flash replacement which can turn out to be a mess and consume a whole lot of time, why not do it with the good old image. It is still fairly accessable if you use your alt and title attributes.

    what do you think?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't trust this line:
    Code:
    if(imgs[i].src.match("_n")){
    There are plenty of other images that have _n in the filename that aren't rollovers, eg my_new_bicycle.jpg

    Maybe it'd be worth using a specific class name in the img tags and limiting the replacement to only images that have that class...
    <img class="rollover" src="title1_n.jpg">
    or something like that.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can have an image-button with custom fonts and have it all CSS and accessible. JS for rollovers is dead:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Untitled Page</title>
    		<style type="text/css" media="screen"><!--* {
    	margin: 0;
    	padding: 0;
    }
    
    .menu li {
    	list-style-type: none
    }
    
    .menu a {
    	background-repeat: no-repeat;
    	background-position: 0 0;
    	text-indent: -9999px;
    	display: block;
    	width: 100px;
    	height: 30px
    }
    	
    .menu a:hover {
    	background-position: 0 -30px;
    }
    
    #link1 {
    	background-image: url("http://img129.imageshack.us/img129/3345/link1ck1.gif")
    }
    	
    #link2{
    	background-image: url("http://img125.imageshack.us/img125/1205/link2ip7.gif")
    }
    
    --></style>
    	</head>
    
    	<body>
    		<ul class="menu">
    			<li><a href="1.html" id="link1">Link 1</a>
    			<li><a href="2.html" id="link2">Link 2</a>
    		</ul>
    	</body>
    
    </html>

  6. #6
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by westoncansingpun View Post
    var imageObj = new Image();
    imageObj.src=preloadPath;
    [/code]
    You're repeatedly creating an object then destroying it again. Can you be certain that this won't cause the previous downloads to be abandoned?
    Tab-indentation is a crime against humanity.

  7. #7
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    You're repeatedly creating an object then destroying it again. Can you be certain that this won't cause the previous downloads to be abandoned?
    It does preload them but i would rather not take the chance.

    Thats a good point, thanks for the critique i should make the image object before i start the loop.

    Code:
    function imageChange(){
    	if(!document.getElementsByTagName) return false;
    	// set image rollover extention
    	var extOff = "_n";
    	var extOver = "_x";
    	var imgs = document.getElementsByTagName("IMG");
    	var imageObj = new Image();
    	for(i=0; i<imgs.length; i++){
    		if(imgs[i].src.match(extOff)){
    			//Preload Image
    			var preloadPath = imgs[i].src.replace(extOff, extOver);
    			imageObj.src=preloadPath;
    			// onmouseover change
    			imgs[i].onmouseover=function(){
    				this.src=this.src.replace(extOff, extOver);
    			}
    			imgs[i].onmouseout=function(){
    				this.src=this.src.replace(extOver, extOff);
    			}
    		}
    	}
    }
    thats better right?
    i have only been doing Javascript for a few months, i appreciate all the help i can get.
    the reason i use '_n' and '_x' is thats the way i always name my rollover images, i added variables to make it easier to change it to whatever you want.

    How does that look?


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
  •