SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast mayo2003's Avatar
    Join Date
    Apr 2003
    Location
    England
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Preloading and mouseovers

    Hello, i have a very good idea for a website, using buttons. I want the button once pressed to change and keep that image once pressed i dont want a mouseover only when you click on it. is that possible?

    Also any good free scripts online that have a javascript percentage/bar preloader?

    Hope you can help me

    Thanks
    Jason

  2. #2
    SitePoint Enthusiast townmiddleburgh's Avatar
    Join Date
    Aug 2003
    Location
    Middleburgh, NY
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could just make the on onmouseover and onmouseout events the same image? I do almost the same thing you want to do...my script would work for you, I believe. I just would need to change the onmouseout to the same as onmouseover.

    And as for a percentage bar script, I haven't seen any...I'm looking also, but I've found a animated GIF works about the same, because it loops until the images are ready.

  3. #3
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Percentage bar I stumbled upon!
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <title>Preloading Images...</title>
    <style type="text/css">
    <!--
    A {
    	color: #c0c0c0;
    	text-decoration: none;
    }
    Body {
    	background-color: #000000;
    	margin-top: 200px;
    }
    P {
    	color: #c0c0c0;
    	font-family: Tahoma;
    	font-size: 8pt;
    }
    .big {
    	font-size: 14pt;
    	font-weight: bold;
    	font-style: italic;
    }
    //-->
    </style>
    <script type="text/javascript">
    <!--
    
    // (C) 2000 Marcin P Wojtowicz [one_spook@hotmail.com]. All rights reserved.
    // Obtain permission before selling/redistributing in any medium.
    
    startingColor = new Array() // Do not modify!
    endingColor = new Array() // Do not modify!
    
    // YOU MAY MODIFY THE FOLLOWING:
    var yourImages = new Array("screens/1.jpg","screens/2.jpg","screens/3.jpg","screens/4.jpg","screens/5.jpg","screens/6.jpg","screens/7.jpg","screens/8.jpg","screens/9.jpg","screens/10.jpg","screens/11.jpg","screens/12.jpg","screens/13.jpg","screens/14.jpg","screens/15.jpg","screens/16.jpg","screens/17.jpg","screens/18.jpg","screens/19.jpg","screens/20.jpg","/re4/images/gallery/background.jpg","/re4/images/gallery/previous.gif","/re4/images/gallery/next.gif","/online/images/gallery/close.gif") // Fill this array with the images you wish to preload
    var locationAfterPreload = "index.html" // The script will redirect here when the preloading finishes *successfully*
    var preloadbarWidth = 250 // The length of the preload bar. Should be greater than total amount of images you want to preload!
    var preloadbarHeight = 15 // The height of the gradient/preload bar
    var backgroundOfGradient = "#111111" // Default color while the preload bar is "filling up"
    
    // Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code
    startingColor[0] = "6" 
    startingColor[1] = "0"
    startingColor[2] = "0"
    
    // Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
    endingColor[0] = "6"
    endingColor[1] = "0"
    endingColor[2] = "0"
    
    // FOR TROUBLESHOOTING:
    var gap = 5 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT ERROR!!! 2 is the minumum value!!!
    
    
    // DO NOT MODIFY ANYTHING BEYOND THIS POINT!!!
    
    if (!document.all) location.replace(locationAfterPreload)
    var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
    var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
    var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
    var num = Math.floor(preloadbarWidth/gap);
    for (i = 0; i < 3; i++) {
    	startingColor[i] = startingColor[i].toLowerCase();
    	endingColor[i] = endingColor[i].toLowerCase();
    	startingColor[i] = eval(startingColor[i]);
    	endingColor[i] = eval(endingColor[i]);
    	diff[i] = (endingColor[i]-startingColor[i])/num;
    	ones[i] = Math.floor(diff[i]);
    	sixteens[i] = Math.round((diff[i] - ones[i])*15);
    }
    endingColor[0] = 0;
    endingColor[1] = 0;
    endingColor[2] = 0;
    i = 0, j = 0;
    while (i <= num) {
    	hilite[i] = "#";
    	while (j < 3) {
    		hilite[i] += convert[startingColor[j]];
    		hilite[i] += convert[endingColor[j]];
    		startingColor[j] += ones[j];
    		endingColor[j] += sixteens[j];
    		if (endingColor[j] > 15) {
    			endingColor[j] -= 15;
    			startingColor[j]++;
    		}
    		j++;
    	}
    	j = 0;
    	i++;
    }
    function loadImages() {
    	for (i = 0; i < imgLen; i++) {
    		preImages[i] = new Image();
    		preImages[i].src = yourImages[i];
    		loaded[i] = 0;
    		cover[i] = Math.floor(num/imgLen)*(i+1)
    	}
    	cover[cover.length-1] += num%imgLen
    	checkLoad();
    }
    function checkLoad() {
    	if (pending) { changeto(); return }
    	if (currCount == imgLen) { location.replace(locationAfterPreload); return }
    	for (i = 0; i < imgLen; i++) {
    		if (!loaded[i] && preImages[i].complete) {
    			loaded[i] = 1; pending++; currCount++;
    			checkLoad();
    			return;
    		}
    	}
    	setTimeout("checkLoad()",10);
    }
    function changeto() {
    	if (h+1 > cover[currCount-1]) {
    		var percent = Math.round(100/imgLen)*currCount;
    		if (percent > 100) while (percent != 100) percent--;
    		if (currCount == imgLen && percent < 100) percent = 100;
    		defaultStatus = "Loaded " + currCount + " out of " + imgLen + " images [" + percent + "%].";
    		pending--;
    		checkLoad();
    		return;
    	}
    	eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
    	h++;
    	setTimeout("changeto()",1);
    }
    
    defaultStatus = "Loaded 0 out of " + imgLen + " images [0%].";
    
    //-->
    </script>
    </head>
    
    <body>
    
    <p align="center" class="big">PRELOADING IMAGES...</p>
    <div align="center">
    <script type="text/javascript">
    <!--
    
    document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '" style="border: 1px solid #444444"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
    for (i = 0; i < num; i++) {
    	document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
    }
    document.write('</tr></table>');
    document.write('<p><small><strong>Total Size: ~340kB</strong><br /><br /><a href="javascript:location.replace(locationAfterPreload)">Skip Preloading</a></small></p>')
    loadImages();
    
    //-->
    </script>
    </div>
    
    </body>
    </html>


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
  •