29 users online (1 members and 28 guests)  


  Results 1 to 3 of 3

Related

  1. Classifed Ad Maker Site For Sale    Forum: Websites For Sale
    Replies: 1
  1. #1
    xnuzboss's Avatar
    New User

    Status
    Offline
    Join Date
    May 2005
    Posts
    1

    Javascript Mouseover Maker

    Hello, all. The Javascript Mouseover Maker located here doesn't work with Firefox. Can anybody help? Is there something similar that will work with all browsers? I really like this effect. thanks much. Terry

  2. #2
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: Javascript Mouseover Maker

    You can try dynamicdrive.com

    Dave

  3. #3
    coreybryant's Avatar
    Texan at Heart

    Status
    Offline
    Join Date
    Jun 2003
    Location
    Castle Rock, CO
    Posts
    107

    Re: Javascript Mouseover Maker

    If you are wanting a roll-over effect for images try this.

    Save this as rollover. js:
    Code:
    /*
    	Standards Compliant Rollover Script
    	Author : Daniel Nolan
    	http://www.bleedingego.co.uk/webdev.php
    */
    
    function initRollovers() {
    	if (!document.getElementById) return
    	
    	var aPreLoad = new Array();
    	var sTempSrc;
    	var aImages = document.getElementsByTagName('img');
    
    	for (var i = 0; i < aImages.length; i++) {		
    		if (aImages[i].className == 'imgover') {
    			var src = aImages[i].getAttribute('src');
    			var ftype = src.substring(src.lastIndexOf('.'), src.length);
    			var hsrc = src.replace(ftype, '_o'+ftype);
    
    			aImages[i].setAttribute('hsrc', hsrc);
    			
    			aPreLoad[i] = new Image();
    			aPreLoad[i].src = hsrc;
    			
    			aImages[i].onmouseover = function() {
    				sTempSrc = this.getAttribute('src');
    				this.setAttribute('src', this.getAttribute('hsrc'));
    			}	
    			
    			aImages[i].onmouseout = function() {
    				if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
    				this.setAttribute('src', sTempSrc);
    			}
    		}
    	}
    }
    
    window.onload = initRollovers;
    Now add the code to your website:
    Code:
    <script src="/js/rollover.js" type="text/javascript"></script>
    and then add the class to your image:
    Code:
    <img class="imgover" src="/images/issues.gif" alt="Issues with Congress"></a>
    And just have the image that you want to rollover in the same folder called issues_o.gif



Tags for this Thread