1,105,169 Community Members

Rollover images help

Member Avatar
navp
Light Poster
28 posts since Apr 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
0
 

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

Member Avatar
elbeato
Light Poster
33 posts since Jun 2005
Reputation Points: 0 [?]
Q&As Helped to Solve: 4 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
navp
Light Poster
28 posts since Apr 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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");
	});
Member Avatar
elbeato
Light Poster
33 posts since Jun 2005
Reputation Points: 0 [?]
Q&As Helped to Solve: 4 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Question Answered as of 1 Year Ago by elbeato and AleMonteiro
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: