...

View Full Version : On img rollover screen entire frame



sackstein
05-04-2009, 08:58 PM
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.

VIPStephan
05-04-2009, 09:28 PM
You can start by modifying the lightbox (http://www.lokeshdhakar.com/projects/lightbox2/) script, for example.

CalumK
05-04-2009, 09:55 PM
Well, To start with, here is some code that will change your background color on a image rollover
its from memory, but should work...




<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:

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...

sackstein
05-06-2009, 04:27 PM
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):


.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:


<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?

VIPStephan
05-06-2009, 11:55 PM
This isn’t done with CSS (alone):


$(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 (http://jquery.com/) although I can’t find a reference to it in the source code. :confused: Must be the javascript.axd file although I have no idea what that is.

sackstein
05-07-2009, 01:56 PM
hmmm seems quite complex. do you still think this effect is achievable through use of lightbox?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum