rollover images

[li0id]

Hi im kinda new to all this coding and im having a problem with rollovers. i pretty much figured out how to do them yet when i add one to my site on myspace and then when i go to the image and put my mouse over it it still shows the picture that was there first then also shows the rollover picture that i wanted it to show but trasnparent to the first one. Im not sure why it does this expect for maybe this one string of code i have that deals with img filters, i fiddled around with the code for a while but cant seem to get it to my desired affect of when u put the mouse on the image i would liek to show another different image and not a transparent one. this is what i have for my code and the filter part is bolded so u can see where i think i need to change something.


<style type="text/css">
body {
font-family: helvetica, arial, sans-serif;
font-size: 62.5%;
background-color: 444444;
}

table, td {
background-color: 444444;
}

.main{
position:absolute;
left:50%;
top:125px;
width:850px;
z-index:1;
margin-left:-430px;
}

.main a:link, .main a:active, .main a:visited {
color: ffc71c;
text-decoration: none;
font-size: 1em;
}

.main a:hover {
color: ffffff;
}

img {
border: 0;
filter:alpha(opacity=100);
..-opacity: 0.100;
opacity: 0.100;
}

img:hover{
filter:alpha(opacity=95);
..-opacity: 0.95;
opacity: 0.95;
}

p, li {
font-size: 1.2em;
color: 575757;
}

.title1, .title2 {
font-weight: bold;
text-transform: lowercase;
letter-spacing: -1px;
color: 575757;
}

.title1 {
font-size: 1.3em;

}

.title2 {
font-size: 1.2em;



}

.title2 a {
font-size: 1.1em;

}

.sidebar .title2 {
padding: 0 0 0 12px;
}



.sidebar {
float: right;
margin-top: 50px;
width: 200px;
}

.content {
float: left;
margin-top: 65px;
margin-left: 30px;
width: 500px;
padding: 0 0 0 28px;
}




.lastfm {
position:fixed; left:50%; top:140px; margin-left:-314px;
width: 200px; height:100px;
background-color:transparent; border:1px solid rgb(0,0,0); z-index:3; }
* html .lastfm { position:absolute; width:50px; height:70px; }

}



.breaker {
clear: both;
margin-top: 120px;
margin-left: -400px
border-top: 2px solid;
border-color: ffffff;
background-image: url("http://img440.imageshack.us/img440/3802/gradient5gj.jpg");
background-repeat: repeat-x;
height: 200px;
}



.cell {
float: center;
padding-top: 0px;
margin: 0 0 0 0px;
text-align: center;
}

.cell-inner {
width: 850px;
float: center;
padding: 0 0px 0 0;


}


.bottoms {
clean: both;
margin-left: 200;
float: center;
padding: 25px 0 0 0;
}


textarea {
color: 575757;
width: 425px;
height: 125px;
padding: 3px !important;
background-color: E7F1D3;
border: 3px solid;
border-color: ffc71c;
overflow: auto;
}



.li0id {
position:fixed; left:50%; top:52px; margin-left:-23px;
background-color:transparent; border:2px solid ffc71c; z-index:2; }
* html .li0id { position:absolute; width:450px; height: 519px; }


.daliah {
position:fixed; left:50%; top:270px; margin-left:-18px;
background-color:E7F1D3; border:2px solid ffc71c;
z-index:2; padding:0px 4px 0px 4px; text-align:left;
}
* html .daliah { position:absolute; width:440px; height:200px; }




.hate {
position:fixed; left:50%; top:56px; margin-left:-18px;
background-color:E7F1D3; border:2px solid ffc71c;
z-index:3; text-align:left; padding:0px 4px 0px 4px;
}
* html .hate { position:absolute; width:172px; height:211px; }


.love {
width:160px; height:12px;
position:fixed; left:50%; top:35px; margin-left:107px;
background:transparent; border:0px;
z-index:3; text-align:center; font-size:8pt; }
* html .love { position:absolute; width:370px; height:20px; }


.love2 {
width:160px; height:12px;
position:fixed; left:50%; top:253px; margin-left:110px;
background:transparent; border:0px;
z-index:3; text-align:center; font-size:8pt; }
* html .love2 { position:absolute; width:370px; height:20px; }


.block {
position:absolute;
left:50%;
top:25px;
width:250px;
z-index:1;
margin-left:-430px;
}




input {
background-color: E7F1D3;
color: 575757;
border: 1px solid;
border-color: ffc71c;
}

</style>


thanks in advanced everyone ive been searching for an answer for this on alot of places and have yet to find an answer.

[mburt]

The pseudo class :hover only works for the anchor tag (a:hover {}; ) in IE, and is only supported in FF. Search the board, there are many threads on this issue.

[li0id]

The pseudo class :hover only works for the anchor tag (a:hover {};) in IE, and is only supported in FF. Search the board, there are many threads on this issue.

thank you,,, but like i was saying im quite new to this and i have no idea what a pseduo class and anchor tags.

[li0id]

so would i have to change my filter and if so to what so it would work, im sorry for all the question but i tried searching googlefor days but i didnt even kknow what to look for to fix this and i came accross this site.

[mburt]

Okay. I do have a solution for you but it may be complex. It involves a scripting language called JavaScript. It lets you interact dynamically with elements in your document. This language generally goes into the <head> section of your webpage (it doesn't have to).
Try this for image hovers.
Remove your img: hover, and add this CSS Code:

.original {
border: 0;
filter:alpha(opacity=100);
..-opacity: 0.100;
opacity: 0.100;
}
.hover {
filter:alpha(opacity=95);
..-opacity: 0.95;
opacity: 0.95;
}
Okay, now for the JavaScript:

<script type="text/javascript">
window.onload = function() {
var images = document.getElementsByTagName("IMG");
for (var i = 0;i < images.length;i++) {
images[i].onmouseover = function() {
this.className = "hover"
}
images[i].onmouseout = function() {
this.className = "original"
}
}
}
</script>
Untested.

[mburt]

Your filter isn't the problem, read my above post.

[li0id]

i would really like to thank you for your help and taking time out and all, but i musttell you the site on which im doing this on has filtered out javascript.

sorry

i was looking into flash because what i really want to do is have an image and when u put your mouse over it i want it to switch over to a slide show of other images....so like i was stating in my first one i can see the slide show and all but its very transparaent to my first image and u can barley see the slide show cause of the other image

[mburt]

Change the opacity to 0 on the roll-over.

[li0id]

ok here what i have

a:hover{
filter:alpha(opacity=0);
..-opacity: 0.95;
opacity: 0.95;
}

now what does the ..-opacity: 0.95 and the one below it do i cant figure that out do i change thoes to zero or can i get ride of that part of the code all together

[mburt]

That's for different browsers. You need all of that, they are just on different scales. In this case though, you can set them all to "0" just as they are.

[li0id]

ok one more question on this code that i have above my ahover code do i keep the img there or do i change it to something else now since u were saying it doesnt work in ie or something

img {
border: 0;
filter:alpha(opacity=100);
..-opacity: 0.100;
opacity: 0.100;
}

[mburt]

You can't do this in IE:

img:hover {...
Anyways... Your filters are a bit messed up too.
The ones with a decimal place a ranked like so

1.0 = 100%
0.9 = 90%
...
0.4 = 40%
etc

The filter:alpha(opacity=100)
is out of 100, so how you type it is how it ends up.

[li0id]

ok so imstead of img what should i put there i replaced one in front of hover to an a but what should i replace the other img with

img {
border: 0;
filter:alpha(opacity=100);
..-opacity: 1.00;
opacity: 1.00;
}

a:hover{
filter:alpha(opacity=0);
..-opacity: 0.00;
opacity: 0.00;
}

[mburt]

No, I'm sorry that won't work. :) There's not much more I can do here, you'll have to get a good tutorial on JavaScript hovers, because this obviously isn't working. Try searching google for javascript tutorial. It will take a while, but it is important if you want this to work.

[li0id]

ok well thank you for all your help