Forum Moderators: not2easy
It's CSS:
#Portfolio{
Width: 450px;
height: 250px;
overflow: auto;
border: 1px red solid;
}
#Portfolio img{
Position: absolute;
top: 270px;
left: 420px;
width: 100px;
height: 100px;
border: none;
z-index: 1;
}
#Portfolio a:hover img{
visibility: visible;
border: solid red 1px;
z-index:100;
! important;
}
The idea is that the default image will show on top. When the link is hovered the image for that particular link will get a higher z-index than the default and it will show up on top. The problem is that in IE the "#Portfolio a:hover img" does not seem to be working it IE recognizes it when it is just "#Portfolio a:hover" but it chokes when I add the img to the end.
Any ideas on ho to get around this?
I am not sure I understood what you wanted to achieve 100% but if what you wanted to do was to have all the images in a stack and depending on the linked hovered it is the default image that changes, I am not sure that it is possible to do with CSS alone.
You may need to look into dhtml or simply google for 'javascript disjointed rollover'.
Hope this helps
Leo
CSS is so great except for all the browser differences!
Thanks for the reply,
Eric
The problem is that in IE the "#Portfolio a:hover img" does not seem to be working it IE recognizes it when it is just "#Portfolio a:hover" but it chokes when I add the img to the end.
The reason for this is a bug in the IE browser that keeps it from applying this sort of change UNLESS there is an earlier occuring hover effect being applied to the same anchor that, get this, makes a change to the background of the anchor.
IE doesn't care what the background change is. It just has to have a hover effect applied to the anchor that calls a background property. With that in place, it functions fine.
Add something like...
#Portfolio a:hover{
background:transparent;
}
cEM
Rather than trying to z-index the images, try setting their width and height to 0, then use the :hover to position them and give them a width and height that allows them to display.
This does two things:
One, it preloads the images.
Two, it works. ;)
Test page using your code below...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Example</title>
<style>
#Portfolio a:hover{
background:transparent;
}
#Portfolio{
Width: 450px;
height: 250px;
border: 1px red solid;
}
#Portfolio a img{
width:0;
height:0;
border:0;
}
#Portfolio a:hover img{
position: absolute;
top: 270px;
left: 420px;
width: 100px;
height: 100px;
border: solid red 1px;
}
</style>
</head>
<body>
<div id="Portfolio">
<img id="Default" src="../Images/PortfolioImage.gif">
<ul>
<li><a href="fdsvdf">National Center for Fathering: brochure<img src="../Images/PortfolioImage1.gif" border="0"/></a></li>
<li><a href="gdfwgf">TIS Brochure<img src="../Images/PortfolioImage2.gif" border="0"/></a></li>
</ul>
</div></body>
</html>
Credit where credit is due: this method is lifted almost word-for-word from the one Eric Meyer outlines on his site. You can read his much better explanation here [meyerweb.com].
[/edit]
Thanks again for your help...Looks great!
Eric
