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.