Rollover images help

[navp]

Hey guys, so I am trying to do an animation rollover image for this gallery and I did make one of the design but the image is absolute and the positioning changes when I change the screen size. Is there a way I can fix that? I know about enclosing the images in a relative div but I have 8 images and its not working for me at all. Is there is a good gallery rollover animation out there? I am using jquery for that. PLEASE help. I am coop student and a noob :).

[AleMonteiro]

Hi nvap, please post an example with what you are trying to do.

[elbeato]

Not sure if this is what you are asking, but if you set the container div to a fixed width and height, it will prevent the images from moving around on resize.

Also, be sure that your images and rollovers are the same size. If you're adding borders, padding, etc, to your rollover effects, it can screw up spacing and alignment.

I'd suggest posting a little code if this doesn't help.

[navp]

i am making a facebook fan page so it has to be 520px width and center. As soon as i remove center it works but when i put the center tag it stops working again.

<tr>
                <td rowspan="12">
                    <img src="images/index_18.gif" width="15" height="810" alt=""></td>
                  <td colspan="3">
                  <a href="http://360mediamanagement.com/lp/index.php/component/k2/item/32-telus-commercial" target="_blank"><img src="images/index_19.jpg" width="185" height="185" alt="Telus" name="telus" class="telus"></a>
                <img name="hoverImage" src="HoverImages/hoverImage.jpg" width="185" height="185" alt="" class="bTelus">
                </td>
                <td rowspan="4">
                    <img src="images/index_20.gif" width="14" height="407" alt=""></td>
                <td colspan="2">
                    <a href="http://360mediamanagement.com/lp/" target="_blank"><img src="images/index_21.jpg" width="186" height="185" alt="Nyoods" class="nyoods"></a>
                    <img src="HoverImages/hoverImage.jpg" width="185" height="185" alt="" class="bNyoods">
                    </td>
                <td colspan="4">
                     <a href="http://360mediamanagement.com/lp/index.php/k2-categories/social-media/item/33-mma-canada" target="_blank"><img src="images/index_22.jpg" width="185" height="185" alt="MMA" class="mma"></a>
                      <img src="HoverImages/hoverImage.jpg" width="185" height="185" alt="" class="bMma">
                     </td>
                <td rowspan="5">
                    <img src="images/index_23.gif" width="14" height="546" alt=""></td>
                <td colspan="13">
                    <a href="http://360mediamanagement.com/lp/index.php/k2-categories/social-media/item/34-the-mario-lemieux-foundation" target="_blank"><img src="images/index_24.jpg" width="186" height="185" alt="Mario" class="mario"></a>
                    <img src="HoverImages/hoverImage.jpg" width="185" height="185" alt="" class="bMario">
                    </td>
                <td rowspan="12">
                    <img src="images/index_25.gif" width="11" height="810" alt=""></td>
                <td>
                    <img src="images/spacer.gif" width="1" height="185" alt=""></td>
            </tr>

and there are total of 8 images in the gallery.

The CSS:

img.telus {
	position: absolute;
	left: 285px;
	top: 189px;
	z-index: 10;
}

img.bTelus {
	position: absolute;
	top: 189px;
	left: 285px;
}	
	
img.nyoods {
	position: absolute;
	left: 484px;
	top: 189px;
	z-index: 10;
}

img.bNyoods {
	position: absolute;
	left: 484px;
	top: 189px;
}	

img.mma {
	position: absolute;
	left: 684px;
	top: 189px;
	z-index: 10;
}

img.bMma{
	position: absolute;
	left: 684px;
	top: 189px;
}	
	
img.mario {
	position: absolute;
	left: 882px;
	top: 189px;
	z-index: 10;
}

img.bMario{
	position: absolute;
	left: 882px;
	top: 189px;
}

jquery/javascript:

$("img.telus").hover(
		function() {
		$(this).stop().animate({"opacity": "0"}, "medium");
		},
		function() {
		$(this).stop().animate({"opacity": "1"}, "slow");
	});

[elbeato]

Have you tried setting the image width in your css like this?

img.telus{
width: 185px;
height: 185px;
}

You'll also need to take out the height/width attributes from the HTML.

Don't know if that'll do it, but it's a good place to start.