Nice Rollover effect in gadget shop 1

leeboycymru · Nov 15, 2007

I have just seen a lovely rollover effect in the gadget shop website, and cant fathom out how they have done it.

Any ideas guys?

http://www.gadgetshop.com/gadgetshop/index.jsp

Its the black surround as you rolloevr the stock.

Lee

trollacious · Nov 15, 2007

Try View -> Source, find the external JS file, and download it. You might have to download the CSS files, too.

Lee

j4606 · Nov 15, 2007

mmm the featured _wrapper class gets converted from a 1px border to a 3 px border on mouseover. They are using jquery and have removed whitespace. But you can achieve this use regular javascript style properties and onmouseover events.

kaht · Nov 15, 2007

you can achieve this use regular javascript style properties and onmouseover events.

Or with the :hover pseudoclass in css for smarter browsers. Hell... since all the items seem to be clickable you could just use anchors and then it would even work in IE6.

One thing to note when changing the border of elements - at least when working with standards-compliant browsers and using a proper doctype - the border on an element will attribute to the total space that element uses. For instance, if you have box that is 10x10 but it has a 1px border, then it's actually a 12x12 box when you include the border. Margins (space outside the box) and padding (space inside the box) also affect the total size of an item.

What this effectively means is that if you use the :hover pseudoclass to change the width of the border of an element on the page, you will likely see the element jump around on the page as it's total size is changing. However, if you'd like to get that element to stay in once place, one easy trick is to adjust the margin of the item by the difference so that it stays in place.

Here's an example of what I'm talking about:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css">

* {
   border:0px;
   margin:0px;
   padding:0px;
}

ul {
   list-style-type:none;
   clear:left;
}

ul li {
   float:left;
   width:100px;
}

ul li a {
   display:block;
   height:20px;
   line-height:20px;
   text-decoration:none;
   border:1px solid black;
   text-align:center;
   margin:5px;
}

ul li a:hover {
   border:3px solid gray;
}

ul#static li a:hover {
   margin:3px;
}

</style>
</head>
<body>

<ul id="static">
   <li>
      <a href="[URL unfurl="true"]http://www.google.com">Google</a>[/URL]
   </li>
   <li>
      <a href="[URL unfurl="true"]http://www.tek-tips.com">Tek-Tips</a>[/URL]
   </li>
   <li>
      <a href="[URL unfurl="true"]http://www.playboy.com">Good[/URL] Times</a>
   </li>
</ul>

<ul id="jumpy">
   <li>
      <a href="[URL unfurl="true"]http://www.google.com">Google</a>[/URL]
   </li>
   <li>
      <a href="[URL unfurl="true"]http://www.tek-tips.com">Tek-Tips</a>[/URL]
   </li>
   <li>
      <a href="[URL unfurl="true"]http://www.playboy.com">Good[/URL] Times</a>
   </li>
</ul>

</body>
</html>

If you copy/paste the example into a new html file you'll see that the top row does not make the links jump around, but the bottom row does. The difference is that when the top row is hovered over, 2 pixes are removed from it's margin to accomodate for the extra 2 pixels that are added to the border.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
[small] <. bites again.[/small]

leeboycymru · Nov 15, 2007

Ye wicked kaht, good thinking about changing the margin size on rollover.

Im going to give that a go, my boss will love that tomorrow, keep that one close to my chest I think until it works.

its a nice effect isnt it?

j4606 · Nov 15, 2007

Good idea kaht. I also remember reading something about borders that don't add to container width, don't know it was for future css specifications. But its getting late and I'm going home.

leeboycymru · Nov 16, 2007

I had a thought last night about the expanding width, and really you could set a margin width of the same colour as the background of your website, and on rollover just change its colour. No need for adjustments then.

But I like it, on an ecommerce site and used correctly that could be a nice touch.

Stretchwickster · Nov 16, 2007

The only problem with not adjusting its margin is that if the additional width (onmouseover) pushes it beyond the boundaries of a fixed-width layout, I think it would then wrap to the next line when hovering over it - which isn't very nice behaviour at all.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

leeboycymru · Nov 16, 2007

Ye your right, but what i was meaning was set a border width to it anyway of say 2px, and as a normal a link set it to white if thats the background of the website, then on hover set that already set 2px border to black.
The possible 4px growth on rollover is already set in its normal state.

Stretchwickster · Nov 16, 2007

I understand now.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

leeboycymru · Nov 16, 2007

Ok im giving this a go, but I am going ot have to try it using tables with css, but Im still not sure if it will work.

http://www.littleacornsgifts.co.uk/scripts/prodList.asp?idCategory=54

here is the html:

Code:

<td align=center valign=bottom width="<%=cellWidth%>%" class="CPcolsViewLee">
<%call getProdImage("center")%><br>
<%call getprodDesc()%><br>
<%call getPricing(1)%><br>
<table border=0 cellpadding=0 cellspacing=0 width="100%">
<tr>
<td align=center valign=bottom><%call getViewButt()%></td>
<td align=center valign=bottom><%call getAddButt()%></td>
<% if listAction = "favorites" then %>
<td align=center valign=bottom><%call getDeleteButt()%></td>
<% end if %>					
</tr>
</table>
</td>

As you can see the outline of the box is controlled by class="CPcolsViewLee" and the cssis below:

Code:

.CPcolsViewLee {BACKGROUND-COLOR: #ffffff; BORDER: 1px solid #000000}
.CPcolsViewLee A:link    {COLOR: #000099; TEXT-DECORATION: none}
.CPcolsViewLee A:visited {COLOR: #000099; TEXT-DECORATION: none}
.CPcolsViewLee A:hover   {COLOR: #996666; TEXT-DECORATION: underline}

Whats happening is that I can control the colour of the outline by this:
.CPcolsViewLee {BACKGROUND-COLOR: #ffffff; BORDER: 1px solid #000000}

but the a link is on the image inside the table, and on rolloevr of that iamge im trying ot control the outline of the table, which as far as i can see cant be done can it, unless using jscript is it?

Ta

Lee

Vragabond · Nov 16, 2007

You could make it work for all browsers except for dying and decaying IE6. You would just use :hover on CPcolsViewLee.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Nice Rollover effect in gadget shop 1

leeboycymru

Programmer

trollacious

Programmer

j4606

MIS

kaht

Programmer

leeboycymru

Programmer

j4606

MIS

leeboycymru

Programmer

Stretchwickster

Programmer

leeboycymru

Programmer

Stretchwickster

Programmer

leeboycymru

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor