At 09:48 AM 11/23/04, Ben Curtis wrote:
I want a list of products which on mouse over triggers a preview image to the left of the list as well as an arrow pointing to the product currently being previewed. The arrow and preview are sticky; if you mouse off of one without hitting another, nothing will change.
...
Ben,
Just a quick note about the sticky aspect of your page: I too use javascript in these cases because I don't know of a way to implement 'sticky' using CSS alone. To minimize the script, however, I use js merely to copy the id of the hovered item to be the class name of the page body or another box that contains the objects I want to toggle. Then, instead of using script to swap images, etc., I let CSS handle all the presentational manipulations.
Here's a stripped-down example of what I mean: _____________________________________
<body class=""> <img class="bear" src="bear.jpg" /> <img class="cougar" src="cougar.jpg" /> <img class="deer" src="deer.jpg" />
<ul
<li id="bear">Bear</li>
<li id="cougar">Cougar</li>
<li id="deer">Deer</li>
</ul>
</body>
_____________________________________/* javascript function applied to LI mouseover */
function jsItemHover()
{
body.className = this.id;
}
_____________________________________
/* toggle image display */
img
{
display: none;
}
body.bear img.bear,
body.cougar img.cougar,
body.deer img.deer
{
display: block;
}/* toggle menu selection */
li
{
color: #09c;
}
body.bear li#bear,
body.cougar li#cougar,
body.deer li#deer
{
color: #000;
}
_____________________________________In practice, I enhance this technique to fail relatively gracefully on browsers lacking CSS and/or JavaScript support.
Regards,
Paul
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
