Start New Discussion within our Web Development Community

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 :).

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.

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");
	});

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.

This question has already been answered. Start a new discussion instead.