Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post

    On img rollover screen entire frame

    I am trying to achieve an image rollover which causes the rest of the frame to be darkened with an opaque screen. I want to fill the rest of the frame except for the image being rolled over to give it a highlighted effect.

    I'm not sure where to get started with this. Any help or tutorials you can direct me towards would be greatly appreciated.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,620
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    You can start by modifying the lightbox script, for example.

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    58
    Thanks
    4
    Thanked 3 Times in 3 Posts
    Well, To start with, here is some code that will change your background color on a image rollover
    its from memory, but should work...

    Code:
    <SCRIPT TYPE="text/javascript">
    
    function mouseover()
    {
    document.getElementById("container").style.backgroundColor='black';
    }
    function mouseout()
    {
    document.getElementById("container").style.backgroundColor='red';
    }
    
    
    </SCRIPT>
    
    <body style="height:100%; margin:0px;">
    <DIV id="container" style="width:100%; height:100%;" >
    
    Page stuff here
    
    <img src="IMAGEURL" onmouseover="mouseover()" onmouseout="mouseout()" >
    
    <DIV>
    </body>
    To be honest, your best bet is googeling for a bit, or using the Lightbox script:
    Code:
    http://www.huddletogether.com/projects/lightbox/
    and editing it to work on rollover...
    Goodluck just ask if you want more help!

    damn VIPStephan beat me to it...
    Last edited by CalumK; 05-04-2009 at 09:55 PM. Reason: beaten to the point...

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    Thank you for the replies. I have been trying unsuccessfully to recreate the effect I want however. perhaps due to lack of skills. this site however is using the effect I am trying to replicate:

    http://tinyurl.com/cy469v

    if you scroll over one of the rings you will see the effect in action.

    the css code they use I'm pretty sure is just this (correct me if I'm wrong there may be more to it):

    Code:
    .productGrid,
    
    .defaultGrid
    
    {
    
    	width:588px;
    
    }
    
    .productGrid, 
    
    .productGrid li,
    
    .productGrid ul,
    
    .defaultGrid, 
    
    .defaultGrid li,
    
    .defaultGrid ul
    
    {
    
    	margin:0;
    
    	padding:0;
    
    	list-style-type:none;
    
    }
    
    /* defaults to small size */
    
    	.productGrid li
    
    	{	
    
    		float:left;
    
    		width:147px;
    
    		display:block;
    
    		position:relative;
    
    		overflow:hidden;
    
    		height:192px;	
    
    	}
    
    	.defaultGrid li
    
    	{	
    
    		display:inline;
    
    		width:147px;
    
    		overflow:hidden;
    
    		height:250px;
    
    		text-align:center;
    
    		color:#fff;
    
    		float:left;
    
    	}
    
    	.productGrid li a.productImg img,
    
    	.defaultGrid li a.productImg img
    
    	{	
    
    		display:block;
    
    	}
    
    	.productGrid li a:link,
    
    	.productGrid li a:visited,
    
    	.productGrid li a:active
    
    	{
    
    		color:#fff;
    
    	}
    
    	.defaultGrid li a:link,
    
    	.defaultGrid li a:visited,
    
    	.defaultGrid li a:active
    
    	{
    
    		color:#fff;
    
    	}
    
    	.defaultGrid li a:hover
    
    	{
    
    		color:#000;
    
    	}
    
    /*	.productGrid li .shopOnlineCaption .bgBlocker{ */
    
    
    
    	.productGrid li
    
    	{
    
    		/*background-color:#000;*/
    
    	}
    
    	.productGrid li.over img{		
    
    		opacity:				.5;
    
    		filter:					alpha(opacity=50);
    
    		-moz-opacity:			0.5;	
    
    	}
    
    	/*
    
    	.productGrid li .bgBlocker{
    
    		top:					0;
    
    		left:					0;
    
    		border:					2px solid #000;
    
    		position:				absolute;
    
    		width:143px;
    
    		height:188px;
    
    		background-color:		#000;
    
    		opacity:				.2;
    
    		filter:					alpha(opacity=20);
    
    		-moz-opacity:			0.2;		
    
    		display:none;
    
    	}*/
    
    
    
    	
    
    	.productGrid li .shopOnlineCaption{
    
    /*		display:block;
    
    		position:absolute;
    
    		z-index:2;
    
    		top:0;
    
    		left:0;
    
    		text-align:center;
    
    		cursor:pointer;
    
    		_cursor:hand;
    
    		width:147px;
    
    		height:192px;*/
    
    	}	
    
    	.productGrid li .shopOnlineCaption a:link
    
    	{
    
    		
    
    /*		position:relative;
    
    		display:block;
    
    		margin:0 auto;
    
    		top:45%;
    
    		color:#fff;
    
    		z-index:3;
    
    		text-transform:uppercase;		
    
    		width:120px;*/
    
    	}
    and then in the html:

    Code:
     <ul class="productGrid">
                        
                        <li>
                            <a class="productImg" href="/shoponline/product.aspx?itemId=Y09SH&amp;folderid=/women/rings"
                                title="David Yurman - ROSE QUARTZ CERISE RING - $1,800.00">
                            <img src="http://davidyurman.images.createthesoftware.com/prodthumb/147/192/a21ee076-98d7-456b-9507-7b849a0697cd.jpg" alt="David Yurman - ROSE QUARTZ CERISE RING - $1,800.00"
                                title="David Yurman - ROSE QUARTZ CERISE RING - $1,800.00"
                                width="147" height="192" />
    
                            </a>

    I tried changing all the li's in the css to td's however that was probably wishful thinking at best. can you maybe point me in the right direction here?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,620
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    This isn’t done with CSS (alone):
    Code:
    $(document).ready(function(){
                var productList = $(".productGrid li:not(:has('ul'))");  // collection of li that are not parents of nested lists
    		     //** setup tooltip on product hover **/
    		        $(productList).each(function(i){
    		         //** fade out all other products on hover **/
    		            var liItem = $(this);
    		            liItem.css("background-color","#000000");
    		            liItem.hover(
    		                function(){
    		                    $(this).stop().siblings().addClass("over");
    		                },
    		                function(){ 
    		                    $(this).stop().siblings().removeClass("over");
    		                }
    		            );
    		        });
    		        
                    $(productList).find("a.productImg").each(function(i){
                        var productImg = $(this);
                        
                        productImg.attr("title","");
                        productImg.find("img").attr("title","");
                        
                        productImg.tooltip({
    		                track: true, 
    		                delay: 0, 
    		                showURL: false, 
    			            extraClass: "p-tooltip",
    			            bodyHandler: function() {
    				            //$this.siblings(":not($(this))").find("a>img").fadeTo("slow","0.5");
    		   		            return productImg.next().html();
    		   	            }
    		            });
    		            //productImg.append('<div class="bgBlocker" ></div>');
    		            //$(".bgBlocker").hide();
                    });
            });
    To be precise: On mouseover of one item all other items are getting a class of “over” which has the CSS rule opacity: 0.5 applied in the CSS. The JS looks like jQuery although I can’t find a reference to it in the source code. Must be the javascript.axd file although I have no idea what that is.

  • #6
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    hmmm seems quite complex. do you still think this effect is achievable through use of lightbox?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •