Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
- CommentAuthorthisthat2334
- CommentTimeFeb 2nd 2008
I have been looking numerous places all over the internet, but I can't seem to find the answer. I am trying to find a way using CSS (NO JAVASCRIPT) to have an image hover over another image. They will be two different links.
I have attached an image to better explain what I'm trying to do:
Any help with this would be greatly appreciated, I'm going crazy. -
Well, I can achieve that by using a 'Suckerfish' style unordered list. However, the down side is that it still needs a tiny Javascript snippet to make it work in IE6...
-
- CommentAuthorthisthat2334
- CommentTimeFeb 2nd 2008
well, that is close. is there a way to only use the javascript if the page is loaded in ie6?
Is there some way I can build off of this code:<div style="width:100px; height:100px; position:absolute; z-index:0;">
<a href="http://www.yahoo.com"><img src="1.gif" alt="image1" border="0" /></a>
<div style="width:21px; height:21px; right:2px; bottom:2px; position:absolute; z-index:10">
<a href="http://www.google.com"><img src="2.gif" alt="image2" border="0" /></a>
</div>
</div>
it doesn't display the arrow on hover, is there a way to do this? -
In the example I whipped up, the Javascript link could easily be enclosed in IE6 conditional tags.
I don't think I could make it work using individual divs like you are wanting there, though- I'm not clever enough, I'm afraid... -
First, at least some versions of IE only recognize the hover state on link objects, so your container object will need to be a link. It looks like your images are 100 pixels square, and your overlays are 21 pixels square. Here's what I'm thinking:
<a class="hoverImage" href="#">
<img class="normal" src="/images/normal.jpg" />
<a class="overlay"><img src="/images/somethingElse.jpg" /></a>
</a>Then, here's the CSS:
a.hoverImage {
display: block;
width: 100px;
height: 100px;
}
a.hoverImage img.normal {
width: 100px;
height: 100px;
display: block;
}
a.hoverImage a.overlay {
display: none;
width: 21px;
height: 21px;
position: absolute;
right: 0;
bottom: 0;
}
a.hoverImage:hover a.overlay {
display: block;
}
a.hoverImage a.overlay img {
display: block;
width: 21px;
height: 21px;
} -
Um... Have you missed something out, there, varland? I cannot get that work at all.
(Sorry, I'm not meaning to be rude or anything, it's just that this has me intrigued.) -
- CommentAuthorcrimsonengine
- CommentTimeFeb 3rd 2008
just heading out, but got this to work in Firefox. Requires you to know the dimensions of the image, so may be good for image thumbnails that are all the same size.
<style type="text/css">
.imagelinkouter {
position: absolute;
left: 100px;
top: 100px;
}
.imagelinkimage {
position: absolute;
left: 0px; top: 0px;
z-index: 1;
}
.imagelinklink{
position: absolute;
left: 0px; top: 0px;
width: 300px; height: 300px;
z-index: 2;
}
.imagelinklink:hover{
background: url(imagelink.png) bottom right no-repeat;
}
</style>
</head>
<body>
<div class="imagelinkouter">
<a href="#" class="imagelinklink"></a>
<img src="image.gif" width="300" height="300" class="imagelinkimage" />
</div>
</body> -
The problem there, crimsonengine, is that your example would still need some javascript to make it work in IE6 (it will only apply :hover to an anchor). Also, thisthat2334 was wanting two anchored images.
I had actually been wondering about using <span> within the first anchor, but including the second anchor inside the span tags only upsets everything. -
- CommentAuthorthisthat2334
- CommentTimeFeb 4th 2008
What about something like this... would it work?
<html>
<head>
<style>
body { text-align:left; background:black; }
img { border:none; padding:0; margin:0; }
#container
{
width:480px; /* Width of image */
height:272px; /* Height of image */
padding:0px;
overflow:hidden;
}
img.image
{
margin:0px;
padding:0px;
}
a:hover img.image
{
cursor:pointer;
margin-bottom:-32px;
*margin-bottom:-36px;
}
img.play
{
text-align:right;
position:relative;
top:0px;
float:right;
margin-right:3px;
}
a:hover img.play
{
cursor:pointer;
top:-32px;
*top:-36px;
}
</style>
</head>
<body>
<div id='container'>
<a href='?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#'><img class='image' src='image.jpg'></a>
<a href='?phpMyAdmin=4594f30712f4fabaff6997416810f3f2#'><img class='play' src='play.jpg'></a>
</div>
</body>
</html> -
-
CommentAuthoradjustafresh
- CommentTimeFeb 4th 2008 edited
Here's a crazy question... should you do this?
At first, I thought that the image that appeared on hover in the lower-right corner of the larger image linked to the same url. That effect would be both easy to achieve with CSS and useful as an indicator that the image is also a hyperlink.
<a href="#"><img src="path/to/image" alt="image" /><span></span></a>
Absolutely position the span within the relatively positioned anchor tag, and give it a background image that appears on a:hover span.
When I read closer, I realized that your intention is to create two different links--only one of which appears when the user's mouse hovers over the image. Perhaps you are intending to execute this a bit differently than your example, but based on what you initially described, I think this will cause a lot of confusion for your users.
Just something to consider... -
-
- CommentAuthorthisthat2334
- CommentTimeFeb 5th 2008
Have you looked at my latest post? Do you see any errors this could cause in different browsers? -
Your latest effort appears to work ok in Opera 9, Firefox 2 and IE7. It does not work in IE6, though.
-
- CommentAuthorthisthat2334
- CommentTimeFeb 5th 2008
hmmm... do you know how I could alter this so it would in ie6? If not, do you think I should use one of the other examples in this thread? -
To be honest, I do not know how you could get anything to work in IE6 like you want, without some Javascript. Unless you have a particular reason for wanting to avoid the Javascript altogether, I think you might have to use something like one of the examples here.
-
- CommentAuthorthisthat2334
- CommentTimeFeb 6th 2008 edited
hey what about using something that's from this css gallery:
http://joshuaink2006.johnoxton.co.uk/templates/gallery/ -
That gallery uses the <span> system that adjustafresh and I were mentioning earlier. Those "image descriptions" that appear on hover are only styled text, not secondary links.
-
- CommentAuthorthisthat2334
- CommentTimeFeb 7th 2008
Ahh yes, i didn't even realize they weren't secondary links. Well it seem as though ie ruins the party. :( -
- CommentAuthorthisthat2334
- CommentTimeFeb 14th 2008
Ok so here is the code that I am using, but I want it to work in as many browsers as possible (obviously). Any ideas of what javascript I should use to get this to work in ie6? The html:<div class="container">the css:
<a href="#"><img class="hardlink" img src="image1.jpg" ></a>
<a href="#"><img class="play" src="image2.jpg" ></a>
</div>.container{float:left; line-height:25px; margin:3px; width:186px; height:126px; overflow:hidden}Any suggestions?????
a img.hardlink{overflow:hidden; border:solid 3px #dbdbdb}
a:hover img.hardlink{margin-bottom:-39px; border:3px solid #919191}
img.play{text-align:right; position:relative; top:0px; float:right; right:3px}
a:hover img.play{top:-39px} -
- CommentAuthorthisthat2334
- CommentTimeFeb 15th 2008
any help with this would be awesome, i'm going crazy over it...
1 to 19 of 19