But I'm having some trouble with the Internet Explorer non-support of the :hover tag in CSS. And it's starting to bug me. I have an awesome gallery of flowers which are all images, and when I hover over them in Firefox, they go to full opacity, but in IE, they don't.
Now, I could just copy/paste the following code into my HTML:
and it works in both browsers flawlessly. The problem is, what if I have 40 images in my gallery? That would take tons of time to copy/paste it for every single one... and that would be really impractical if I suddenly decided to decrease or increase opacity. I'd have to edit every one of them.
So yesterday I asked my brother, who is a genius and knows CSS better than I do, and he found the following code for me to put into my external style sheet:
img#flower {
opacity:0.4;
filter:alpha(opacity=40);
border: none;
}
img#flower:hover {
opacity:1.0;
filter:alpha(opacity=100);
border:none;
}
and it works perfectly in Firefox. And I only have to edit the style sheet for it to work in my web page. The reference I have in my HTML is:
<img id="flower" src="http://www.blogger.com/flowers/flower2.jpg" />
with the id="flower" I reference my CSS external style sheet. It's pretty awesome, I'm still thrilled with that ability to do that... :D
BUT it doesn't work in IE. So I'm going to keep researching and find out what I can do about that. Believe me, if I find a break though, you'll be the first to know.
And hopefully you guys won't stop following me after this post... it's a bit weird to read... haha
Now, I could just copy/paste the following code into my HTML:
<img src="flowers/flower1.jpg" style="opacity: 0.4;"
onmouseover="this.style.opacity=1;
this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;
this.filters.alpha.opacity=40"
/>
and it works in both browsers flawlessly. The problem is, what if I have 40 images in my gallery? That would take tons of time to copy/paste it for every single one... and that would be really impractical if I suddenly decided to decrease or increase opacity. I'd have to edit every one of them.
So yesterday I asked my brother, who is a genius and knows CSS better than I do, and he found the following code for me to put into my external style sheet:
img#flower {
opacity:0.4;
filter:alpha(opacity=40);
border: none;
}
img#flower:hover {
opacity:1.0;
filter:alpha(opacity=100);
border:none;
}
and it works perfectly in Firefox. And I only have to edit the style sheet for it to work in my web page. The reference I have in my HTML is:
<img id="flower" src="http://www.blogger.com/flowers/flower2.jpg" />
with the id="flower" I reference my CSS external style sheet. It's pretty awesome, I'm still thrilled with that ability to do that... :D
BUT it doesn't work in IE. So I'm going to keep researching and find out what I can do about that. Believe me, if I find a break though, you'll be the first to know.
And hopefully you guys won't stop following me after this post... it's a bit weird to read... haha
No comments:
Post a Comment