Highlighting a bunch of tags and staying w3c compliant

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Highlighting a bunch of tags and staying w3c compliant

Post by Luke »

I am building an ecommerce store, and right now I'm working on the product list page... the layout consists of a list of divs that contain the product's name, a thumbnail and an outline (around the div). I'd like for all three of these things to highlight orange when you hover over any of them. So let's say you just hover over the div (not the image or the text). I'd like it to highlight all of them at once. does that make sense? If so, is it possible without javascript and still with the ability to be w3c compliant? How could I accomplish this?

Oh and I'd also like for any one of those to be "clickable" and take you to that product's page.

This is what I'm doing for now... but I don't particularly like it:

Code: Select all

<div class="product_category" onclick="javascript:jsLink(this, '/pc/PL-MP-HD/DAK30');">
 <div class="image"> 
  <div class="no_photo"><a href="/pc/PL-MP-HD/DAK30"><img src="images/products/DAK30.jpg" alt="Heli-Pack w/70 oz Reservoir"></a></div></a>
 </div>
 <div class="details">
  <div class="title"><a href="/pc/PL-MP-HD/DAK30">Heli-Pack w/70 oz Reservoir</a></div>
  <div class="price">$80.00</div>
 </div>
</div>

Code: Select all

/* Product Styling */

.product_category, #related_products div.image{
	width: 140px;
	height: 140px;
	float: left;
	margin: 5px;
	padding: 5px;
	border: 1px solid #bbb;
	text-align: center;
}
/* Hides from IE5-mac \*/
* html .product_category, #related_products div.image {margin: 3px; padding: 2px;} /* Only show to IE-Win */
/* End hide from IE5-mac */

.product_category:hover, #related_products div.image:hover{
	border: 1px solid #000;
	cursor: pointer;
}
.product_category div{
	margin:  auto;
}
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Alright... see the google ads on the top of this page... http://digg.com/

That's what I'm looking for... see how it highlights the border as well as the links inside? That's what I want...
User avatar
theYinYeti
Forum Newbie
Posts: 15
Joined: Thu Oct 26, 2006 3:33 pm
Location: France

Post by theYinYeti »

By "w3c-compliant", I suppose you mean using CSS only. If so, then yes it is possible, using :hover on the div. However, IE won't recognise that :(

A solution would be to apply a hint of unobstrusive Javascript on top of your page, provided your divs are well-identified (all with the same class for example), so that the effect works in IE as well.

Yves.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

theYinYeti wrote:By "w3c-compliant", I suppose you mean using CSS only. If so, then yes it is possible, using :hover on the div. However, IE won't recognise that :(

A solution would be to apply a hint of unobstrusive Javascript on top of your page, provided your divs are well-identified (all with the same class for example), so that the effect works in IE as well.

Yves.
sounds good. I guess I could probably accomplish that on my own. I'll post if I have questions.
Post Reply