2.20.2010

Computer Adventures part 1

So I have an AWESOME web design class right now, it's definitely one of my favorites! Using http://w3schools.com/, we're going through tutorials with CSS and HTML. HTML is fun to refresh, my coding skills are pretty outdated. I mean, it's the same HTML, but I've never played with the div tags and the span tags. I've missed out a lot apparently, 'cuz they're super fun. If you want to see the website I'm building (and keep in mind, this is my experimental playground, so nothing is really serious... ;) ) the URL is http://shcheidi.webng.com/
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:

<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