#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0

    Image Swap Fade Transition


    Trying to script a fade-in/fade-out transition on mouseover. I've used this same code effectively using only one image, but in this instance there's an image swap involved. I'm having two issues: 1) The fade transition on mouseover doesn't work when rolling over the image the first time - you have to roll over it a second time before the fade transition actually works. 2) The fade transition on mouseout isn't working at all.

    This is the page in question: http://lauradrida.com/shaneblack/index.php

    Here's the HTML:

    Code:
    <!-- Include jQuery Library -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
    <!-- Animate Image Hovers -->
    <script type="text/javascript">
    	$(function() {
    		// on mouse over
    		$("#abouthex, #design1hex, #design2hex, #contacthex, #wheretobuyhex, #presshex, #architecturehex").hover(function () {
    			// animate opacity to full
    			$(this).stop().animate({
    				opacity: 1
    			}, "slow");
    		},
    		// on mouse out
    		function () {
    			// animate opacity to nill
    			$(this).stop().animate({
    				opacity: 0
    			}, "slow");
    		});
    	});
    </script>
    
    </head>
    
    <body id="home">
    <div id="wrapper">
    <div id="header">
    <?php include("includes/header.php"); ?>
    </div> <!-- end header -->
    
    <div id="mainContent">
    
    <div id="imageMap">
       <div id="menu">
    	   <a href="about.php" id="abouthex"><span>About</span></a>
    	   <a href="design.php" id="design1hex"><span>Design</span></a>
    	   <a href="design.php" id="design2hex"><span>Design</span></a>
    	   <a href="contact.php" id="contacthex"><span>Contact</span></a>
    	   <a href="wheretobuy.php" id="wheretobuyhex"><span>About</span></a>
    	   <a href="press.php" id="presshex"><span>Press</span></a>
    	   <a href="architecture.php" id="architecturehex"><span>Architecture</span></a>
       </div>
    </div>
    
    </div> <!-- end mainContent -->
    
    </div> <!-- end wrapper -->
    And the CSS:

    Code:
    #mainContent {
    
    	width: 960px;
    	overflow: hidden;  /* Needed to show the 30px top margin of the footer on floated column pages  */
    	margin: 0 auto;
    
    	position: relative;
    }
    
    
    
    #imageMap {
    	width: 948px;
    	height: 650px;
    	background-image: url(../images/homepage/imagemap.jpg);
    }
    
    #menu a {
    	position: absolute;
    	width: 172px;
    	height: 197px;
    	top: 0px;
    	text-decoration: none;
    }
    
    #menu a span {
    	visibility: hidden;
    }
    
    a#abouthex { left: 430px; top: 2px; }
    a#design1hex { left: 174px; top: 151px; }
    a#design2hex { left: 687px; top: 152px; }
    a#contacthex { left: 431px; top: 301px; }
    a#wheretobuyhex { left: 6px; top: 450px; }
    a#presshex { left: 345px; top: 447px; }
    a#architecturehex { left: 687px; top: 450px; }
    
    a#abouthex:hover { background-image: url(../images/homepage/about_hover.jpg); }
    a#design1hex:hover { background-image: url(../images/homepage/design1_hover.jpg); }
    a#design2hex:hover { background-image: url(../images/homepage/design2_hover.jpg); }
    a#contacthex:hover { background-image: url(../images/homepage/contact_hover.jpg); }
    a#wheretobuyhex:hover { background-image: url(../images/homepage/wheretobuy_hover.jpg); }
    a#presshex:hover { background-image: url(../images/homepage/press_hover.jpg); }
    a#architecturehex:hover { background-image: url(../images/homepage/architecture_hover.jpg); }
    
    a#abouthex:hover,
    a#design1hex:hover, 
    a#design2hex:hover, 
    a#contacthex:hover, 
    a#wheretobuyhex:hover,   
    a#presshex:hover, 
    a#architecturehex:hover { border: none; }
    Help?
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,169
    Rep Power
    184
    I am going to answer your question; with a question (Note: I am a big fan of CSS3). Have you thought about using CSS3 Transition; for this jQuery effect? It is not yet supported by Internet Explorer, but I think it soon will be.

    Here's a basic example; similar to your jQuery function:

    Code:
    <style>
    img {
    opacity:1.0;
    transition: opacity 1s ease;
    -ms-transition: opacity 1s ease; /* IE11+ (Maybe) */
    -moz-transition: opacity 1s ease; /* Firefox 4+ */
    -webkit-transition: opacity 1s ease; /* Safari and Chrome */
    -o-transition: opacity 1s ease; /* Opera */
    }
    img:hover
    {
    opacity:0.10;
    }
    </style>
    
    <img src="http://www.google.com/images/srpr/logo3w.png"/>
    Last edited by web_loone08; January 12th, 2013 at 10:14 PM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    165
    Rep Power
    18
    Here is the crossfade i use. Not written by me but works very well and easily customizable


    Code:
    
    /* general variables */
    
    var galleryId = 'gallery'; /* change this to the ID of the gallery list */
    var	gallery; /* this will be the object reference to the list later on */
    var galleryImages; /* array that will hold all child elements of the list */
    var currentImage; /* keeps track of which image should currently be showing */
    var previousImage;
    var preInitTimer;
    var isspacer = 0; /* Identifies blank slides for less delay */
    preInit();
    
    /* functions */
    
    function preInit() {
    	
    	if ((document.getElementById)&&(gallery=document.getElementById(galleryId))) {
    		gallery.style.visibility = "hidden";
    		if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer); /* thanks to Steve Clay http://mrclay.org/ for this small Opera fix */
    	} else {
    		preInitTimer = setTimeout("preInit()",2);
    	}
    }
    
    function fader(imageNumber,opacity) {
    	/* helper function to deal specifically with images and the cross-browser differences in opacity handling */
    	var obj=galleryImages[imageNumber];
    	if (obj.style) {
    		if (obj.style.MozOpacity!=null) {  
    			/* Mozilla's pre-CSS3 proprietary rule */
    			obj.style.MozOpacity = (opacity/100) - .001;
    		} else if (obj.style.opacity!=null) {
    			/* CSS3 compatible */
    			obj.style.opacity = (opacity/100) - .001;
    		} else if (obj.style.filter!=null) {
    			/* IE's proprietary filter */
    			obj.style.filter = "alpha(opacity="+opacity+")";
    		}
    	}
    }
    
    function fadeInit() {
    	if (document.getElementById) {
    		preInit(); /* shouldn't be necessary, but IE can sometimes get ahead of itself and trigger fadeInit first */
    		galleryImages = new Array;
    		var node = gallery.firstChild;
    		/* instead of using childNodes (which also gets empty nodes and messes up the script later)
    		we do it the old-fashioned way and loop through the first child and its siblings */
    		while (node) {
    			if (node.nodeType==1) {
    				galleryImages.push(node);
    			}
    			node = node.nextSibling;
    		}
    		for(i=0;i<galleryImages.length;i++) {
    			/* loop through all these child nodes and set up their styles */
    			galleryImages[i].style.position='absolute';
    			galleryImages[i].style.top=0;
    			galleryImages[i].style.zIndex=0;
    			/* set their opacity to transparent */
    			fader(i,0);
    		}
    		/* make the list visible again */
    		gallery.style.visibility = 'visible';
    		/* initialise a few parameters to get the cycle going */
    		currentImage=0;
    		previousImage=galleryImages.length-1;
    		opacity=100;
    		fader(currentImage,100);
    		/* start the whole crossfade process after a second's pause */
    		window.setTimeout("crossfade(100)", 0);
    	}
    }
    
    function crossfade(opacity) {
    		if (opacity < 100) {
    			/* current image not faded up fully yet...so increase its opacity */
    			fader(currentImage,opacity);
    			/* fader(previousImage,100-opacity); */
    			opacity += 7;
    			window.setTimeout("crossfade("+opacity+")", 30);
    		} else {
    			/* make the previous image - which is now covered by the current one fully - transparent */
    			fader(previousImage,0);
    			/* current image is now previous image, as we advance in the list of images */
    			previousImage=currentImage;
    			currentImage+=1;
    		
    			if (currentImage>=galleryImages.length) {
    				/* start over from first image if we cycled through all images in the list */
    				currentImage=0;
    							}
    			/* make sure the current image is on top of the previous one */
    			galleryImages[previousImage].style.zIndex = 0;
    			galleryImages[currentImage].style.zIndex = 100;
    			/* and start the crossfade after a second's pause */
    			opacity=0;
    
    
    */Sets time for delay. Each controlls every other frame
    			if (isspacer==1){
    			window.setTimeout("crossfade("+opacity+")", 50);
    			isspacer=0;
    			} else {
    			window.setTimeout("crossfade("+opacity+")", 5000);
    			isspacer=1;
    			}
    		}
    		
    }
    
    /* initialise fader by hiding image object first */
    addEvent(window,'load',fadeInit)
    
    
    
    
    /* addEvent handler for IE and other browsers */
    function addEvent(elm, evType, fn, useCapture) 
    // addEvent and removeEvent
    // cross-browser event handling for IE5+,  NS6 and Mozilla
    
    {
     if (elm.addEventListener){
       elm.addEventListener(evType, fn, useCapture);
       return true;
     } else if (elm.attachEvent){
       var r = elm.attachEvent("on"+evType, fn);
       return r;
     }
    }
    then on your html document

    Code:
    <ul id="gallery" style="list-style: none;">
    <li><img src="new/head1.jpg" alt=""  /></li>
    <li><img src="new/headb.jpg" alt=""  /></li>
    <li><img src="new/head2.jpg" alt="" /></li>
    <li><img src="new/headb.jpg" alt=""  /></li>
    <li><img src="new/head3.jpg" alt="" /></li>
    <li><img src="new/headb.jpg" alt=""  /></li>
    <li><img src="new/head4.jpg" alt=""  /></li>
    <li><img src="new/headb.jpg" alt=""  /></li>
    <li><img src="new/head5.jpg" alt=""  /></li>
    <li><img src="new/headb.jpg" alt=""  /></li>
    </ul>
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0
    Web_loone08: I would LOVE to use the CSS3 solution - I hate going through so much work for a simple hover effect. However, I'm pretty wary of using CSS3 until IE supports it.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0
    Portcityofwar: That particular code would be useful for a photo gallery, but what I'm trying to cross-fade are only image links that take the user to another page.

    The cross-fade coding I've found on the web seems to be geared mostly to photo galleries. The few examples I've come across for simple hyperlinks haven't worked for me. Possibly because my application is a little different. I needed to create an image map (because of the irregularly-shaped images) with absolutely-positioned hyperlinks.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0
    I think the main reason I can't get it to work is because I'm not using sprites since I had to create an image map.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    206
    Rep Power
    31
    Try to look at your stylesheet.css , starting line 167:
    Code:
    a#abouthex:hover { background-image: url(../images/homepage/about_hover.jpg); }
    ...
    If you intend to have that whitish text image fading-in/-out on hover (via jQuery), then I think these CSS lines would prevent that.
    You might want to just remove the :hover but also set each to have zero opacity, like the following:
    Code:
    a#abouthex {
      opacity: 0;
      background-image: url(../images/homepage/about_hover.jpg); 
    }
    ...
    Image map ? Yes, I would also recommend that if you need fading happens only when mouse hovers a truly hexagonal element, but... don't you think using transparent .PNG is sufficient? For example, the background for #abouthex would be about_hover.png, not about_hover.jpg...
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0

    Smile


    Yaaay! That fixed it! You just saved me a lot more work as my next step was going to be coding html map coordinates.

IMN logo majestic logo threadwatch logo seochat tools logo