Email conversation
| From | Kris Zemlyak |
|---|
| To | Me |
|---|
| Subject | Using your DHTML workaround for :hover on a div background... |
|---|
| Date | 13 May 2005 03:32 |
|---|
Hi,
I used your invaluable tutorial on DHTML behaviors to create a usable
CSS menu in IE. Took some tweaking to get it to do what I needed, but
it works beautifully!
I moved on to another part of the page, and I decided I wanted to
create a rollover effect for the images in my galleries. Instead of
creating two images for each, I set a background for a div that
surrounds each image, and used the CSS "sprite map" technique to
change the background on hover. Works perfectly in standards-compliant
browsers.
I figured it would be a simple matter to adapt your script to work in
this application, but try as I might I *cannot* do it. I don't know a
thing about Javascript, though, so my trial-and-error puttering can't
be relied on. Basically I just need it to change the CSS when it
detects hovering over the relevant div, so I don't understand why the
basic script doesn't work. If you would be willing to help but need
more info, I can paste in the relevant html/CSS/htc I've tried.
Thank you so much for your help.
- Kris
PS: I found your site while working on an earlier page and getting
frustrated over why IE would not understand :first-child. I had always
figured all browsers were the same until I started designing. Your
site was instrumental in getting me pissed off at IE and trying the
alternatives! I'm sure you hear these kinds of testimonials all the
time, but I have learned so much from your site, so, thank you for
that.
| From | Me |
|---|
| To | Kris Zemlyak |
|---|
| Subject | Re: Using your DHTML workaround for :hover on a div background... |
|---|
| Date | 13 May 2005 09:48 |
|---|
Kris,
> I figured it would be a simple matter to adapt your script to work in
> this application.
> I just need it to change the CSS when it
> detects hovering over the relevant div
div.foo { background: whatever; }
/* more specific selector for the hover stuff */
body div.CSStoHighlight { background: new stuff; }
...
<!--[if gte IE 5]> <style type="text/css">
div.foo { behavior: url( hover.htc ); }
</style> <![endif]-->
<div class="foo"><img ...></div>
<attach event="onmouseover" handler="rollOver" />
<attach event="onmouseout" handler="rollOff" />
<script type="text/javascript">
function rollOver() {
//change the class
element.className += (element.className?' ':'') + 'CSStoHighlight';
}
function rollOff() {
//change the class back
element.className = element.className.replace(/ ?CSStoHighlight$/,'');
}
</script>
> I'm sure you hear these kinds of testimonials all the
> time, but I have learned so much from your site, so, thank you for
> that.
Always nice to hear. Happy to help. :)
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Kris Zemlyak |
|---|
| To | Me |
|---|
| Subject | Re: Using your DHTML workaround for :hover on a div background... |
|---|
| Date | 13 April 2005 18:51 |
|---|
Tarquin,
Thank you so much, that was *exactly* what I needed!
- Kris