Ruth! Hello trying to figure out a JS hover delay

Poster: gottaloveit317
Dated: Wednesday January 23 2008 - 20:02:15 GMT

I was reading http://www.milonic.com/mfa/2006-Septemb ... oblem.html and i'm fairly certain it contains the exact solution to my problem, and you seemed right on top of solving that one.

My client's company web site I am developing sells lingerie etc., and she wanted to have each product zoom to a larger preview when you mouseover the thumbnail, something like "yandy.com", and the best solution I could handle with my limited JS skills was using this method found at http://sonspring.com/journal/hoverbox-image-gallery - which the creator Nathan calls HoverBox. I was fairly satisfied except for the fact that I'm under the impression all the larger images (separate jpgs from thumbs, as i've never trusted code to shrink or enlarge images, and some of the larger images are not perfect squares) are loading before called with the a:hover css command. The client likes it except she wants the larger preview-images to delay before popping up, so it's not as distracting dragging the mouse across the screen. I know this is easy with javascript but I really need a little help putting the pieces together.

Ideally I wish I could figure out the method used at http://www.dark-i.com/ on the links in the bottom left, but it uses aspx files and i haven't found any good tutorial to learn those tricks.

Do you think you might be able to help me out on this?! I would really appreciate any advice, thank you.

my HTML for an item is like this:
<code>
<div class="item"><ul class="hoverbox">
<li><a href="#"><img src="images/accessories/boa-sm.jpg" title="Black Furry Boa"/>
<img src="images/accessories/boa.jpg" alt="description" class="preview" /><br />
<span class="caption">Black Furry Boa - With Silver or Gold Shimmer</span></a>
</li></ul>
<br />
Black Furry Boa<br />
Silver or Gold Shimmer<br />
<span class="price">$25.00</span><br />
<a href="#" class="button">.</a>
</div>
</code>

with css telling
<code>
.hoverbox a:hover .preview {
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
padding: 0px 0px;
}

.hoverbox a:hover .caption {
text-align:center;
display: block;
width:340px;
text-decoration:none;
color: #000000;
font-size:11px;
position: absolute;
top: 325px;
left:-45px;
z-index: 1;
padding: 5px 5px;
border:1px solid #000000;
background-color:#FFFFFF;
margin:0;
}
</code>

Re: Ruth! Hello trying to figure out a JS hover delay

Poster: Ruth
Dated: Thursday January 24 2008 - 5:01:46 GMT

Hi,

I really can't help on that because I don't know js and my css skills are limited. However you can do what you want using the Milonic menu and its pop function. LINK REMOVED.

The advantage to using the Menu is that you can pop up the larger image from the thumb, but you can also set all the images to popup in the same place, or you can position them based on the thumb from which they open. You can also set it up so that the larger image has a text description if your client would like that, or so that the description is a link to a particular page with the item, or so that the desciption opens a submenu that has more information and links. For many who use this, they want the control of opening the images in the same place while at the same time having a regular menu on the page. So, they use the popup and also create menus.

The menu is very easy to use and does not require knowledge of js. You just have to be able to type If you're interested I'd be glad to walk you through it for your site.

Ruth.

Re: Ruth! Hello trying to figure out a JS hover delay

Poster: gottaloveit317
Dated: Friday January 25 2008 - 20:14:38 GMT

Thanks so much for putting a few minutes to show me some options, they may come in handy in the future. I had a working pop-up thing as far as placement/ style & caption, The only issue I was having was the client wanted the pop-up to delay before popping up, but she said it wasn't a big deal as soon as i said "researching javascript / complicated/ etc".

But thanks for answering and have a beautiful weekend!

Brian B
http://www.the317life.com