Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorthisthat2334
- CommentTimeFeb 18th 2008
I am trying to get a link to hover over an image, but it's not working. Here is an image to explain it more...
Here is what I have so far...
<div class="container">
<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}
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}
I'm stuck on this, any help would be awesome. -
-
CommentAuthorbenjitastic
- CommentTimeFeb 18th 2008
In IE you can only apply the hover state to <a> tags - it can't affect the children of an anchor tag.
This will work:a:hover {
background: red;
}
This will not work:a:hover div {
background: red;
}
You could use javascript to apply classes with something like this:function mouseOut(hoverElement) {
hoverElement.className = "mouseOut";
}
function mouseOver(hoverElement) {
hoverElement.className = "mouseOver";
}<div class="mouseOut" onmouseover="mouseOver(this);" onmouseout="mouseOut(this);"></div> -
-
- CommentAuthorthisthat2334
- CommentTimeFeb 18th 2008
ok, i was thinking javascript was probably the way i'm going to have to go. i'm not too familiar with javascript though. so which would be the best way to lay this out? should i use an "if ie 6 or ie7" then "do something"?? any ideas? -
- CommentAuthorthisthat2334
- CommentTimeFeb 19th 2008
i'm still having trouble with this. anybody got any ideas? -
- CommentAuthorfransgaard
- CommentTimeFeb 21st 2008
maybe use CSS instead:
a{
background:url(offstate.gif);
}
a:hover{
background:url(onstate.gif);
}
Example at my old works website
http://www.fortunecookie.co.uk/ -
-
CommentAuthoradjustafresh
- CommentTimeFeb 21st 2008
Have you considered Flash? -
-
- CommentAuthorthisthat2334
- CommentTimeFeb 21st 2008
@ fransgaard: where on your old works website is this located?
@ adjustafresh: this is not for video, this is for images so flash wouldnt really be necessary -
I had a go at creating what I think you are trying to acheive and managed the following without Javascript...
http://www.growldesign.co.uk/portfolio/thisthat/
It works great in IE7, FF, Opera & Safari (Win) but it's buggy in IE6 and I haven't tested it in Safari on Mac.
I assumed the two clickable areas need to link to different places which is why I did it this way. If this is not the case and the two links will be linking to the same place then the code would be far simpler.
Am I right in assuming they need to go to different locations? -
- CommentAuthorthisthat2334
- CommentTimeFeb 22nd 2008
Yep, they need to go to different locations. This is EXACTLY what I needed!!! Thank you. I tested it in Safari on Mac and it works perfectly. What do you mean it's a bit buggy in ie6 though? -
In IE6, when you hover the image, the "play" button doesn't appear unless you hover the bottom corner where the play button is.... then if you slide your mouse from the play button back onto the image, the play button stays visible and remains visible if you then take your mouse off the image as well. It disappears when you hover the play button and take you mouse straight outside the linkable areas.
It's pretty tough to explain to be honest... you'd be better off testing it somewhere to see what I mean!
Alternatively, you could just use * html to make the play button permanently visible, no matter what for IE6 only... It wouldn't have the neat hover effect but at least people could see there is a play button.Thankful People: thisthat2334 -
- CommentAuthorthisthat2334
- CommentTimeFeb 22nd 2008
I think i understand what you're talking about. Again, thank you soo much for this. You're awesome! -
Wow... That is devastatingly simple, JJenZz :o)
A much better solution than my suggestion a few weeks back. -
-
CommentAuthorArcNeXuS.net
- CommentTimeFeb 26th 2008
we,llk this may seem simple but this is what I used ....
CSS..place this in your style sheet ...
//** text below only
.rolloverINFO_1 a {
display:block;
width: 105px;
font: bold 13px sans-serif;
background: url(webServiceRed_Right.gif);
text-decoration: none;
}
.rolloverINFO_1 a:hover {
display:block;
width: 105px;
background: url(webServiceGreen_Right.gif);
}
.rolloverINFO_1 a:active {
background: url(webServiceRed_Right.gif);
}
//*text above goes in style sheet
//*html code below
<div class="rolloverINFO_1 a">
<a href="http://www.arcnexus.net/index_net.html"><IMG SRC="images/gif/transpacer.gif" WIDTH=100 HEIGHT=16></a>
</div>
//*html code above
so basically I now have an elegant rollover effect that works in all browsers and is smooth... ..just adjust the images to suit and remember they must be the exact same size ...
I also did not bother creating a third image ...for active .. just used the first one again ..
You can use it as many times as needed just remember to name the rollover class different each time .. like info1.. info2..info3..etc... hope this helps... -
-
You haven't tackled the problem correctly ArcNeXuS... He/she needed TWO links on the image as they need to go to different locations. One link for the image and one link for the play button. If they needed only ONE link then sure, it is MILES simpler/easier to acheive.
Also, your play button wouldn't ever be visible because it would appear UNDERNEATH the image. Try it and you will see what I mean.
Your code is invalid XHTML as well but that's neither here nor there in this discussion... lol
1 to 14 of 14