I am developing a photo gallery page here:
http://dev.aiwmedia.com/Si
I am trying to use a CSS gallery technique and I seem to have created the code correctly however i have two questions:
1/ The image rollover doesn't seem to work in IE6, how can i fix this?
2/ How can i modify the code so that the last image rollover stays on screen even when the mouse has left the thumbnail, so that theres never just a blank space to the left?
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
I don't think there's any js involved - only CSS (:hover). And while onmouseover without onmouseout (as suggested by stanscott2) seems like the best way to go in js, I don't see how it could be done with CSS only. You're either hovering or not. When the mouse leaves the element, the style for the non-hover state will apply. You'd need javascript for anything beyond that, I'd say.
Yes, this IE problem with hover is known.
Check this, it should help.
http://www.vladdy.net/Demo
Have a look at this very small js example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html
<html>
<head>
<script>
function swap(imgId, theSrc) {
document.getElementById(im
document.getElementById(im
}
</script>
</head>
<body>
<img src="large1.jpg" id="largeImageId" style="visibility:hidden;"
<br>
<img src="small1.gif" onMouseover="swap('largeIm
<img src="small2.gif" onMouseover="swap('largeIm
<img src="small3.gif" onMouseover="swap('largeIm
</body>
</html>
I had already checked this thing, it works. So, in your case:
Your css/IEFixes.htc:
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="RestoreActive()" />
<SCRIPT LANGUAGE="JScript">
function DoHover()
{ element.className += ' hover';
}
function DoActive()
{ element.className += ' active';
}
function RestoreHover()
{ element.className = element.className.replace(
}
function RestoreActive()
{ element.className = element.className.replace(
}
</SCRIPT>
Add to the end of your css/layout.css:
.thumbnail{
behavior: url('IEFixes.htc');
}
.htc is an invention by microsoft and for microsoft only. It's a format that can be used to add behavior logic to a page, or more specifically to targetted elements.
It has to be a seperate file, or at least that's the most common way it is used and then using the behavior property it can be applied to specific elements in your page.
In the same line as the mentioned solutions:
http://www.xs4all.nl/~pete
The difference being that the whatever hover solutions parses your styles, targets the elements that need a fix and also generates the nessecary style-rules. In adition in ignores IE7, which finally supports :hover as it was meant to be.
A downside of these htc's, its' url is always resolved relative to your html-document even when you're defining it in an external css file, which is something that most people run their heads into a wall on.
I just went to re-read your question and have to realise this:
All this nagging about .htc's doesn't, and never will, solve the second part of your question! However, TName's provided you with a simple enough javascripted solution that would do the trick.
Since the second part of your question requires javascripting anyway the first part becomes a moot point! My advice, ignore the IE6 problem for now and work with TName on getting the second part fixed, IE6 will get swept up in that fix nomatter what.
Business Accounts
Answer for Membership
by: stanscott2Posted on 2007-08-16 at 13:37:39ID: 19712169
You haven't made your javaScript available, so it isn't possible to tell what, if anything, you're doing wrong. If you post your script, someone can tell you why it doesn't work with IE6.
I assume you're using an "onmouseover" and an "onmouseout". If you always want the last image to be displayed, just remove the onmouseout event.