amnilsen11 Posted July 3, 2012 Report Share Posted July 3, 2012 I am building a website for work and I am trying to have a line of photos across the top of the page under the heading and navigation bar. I want this pictures to expand on mouseover and this is code I've been using for the three pictures I have up so far : <img src="Rotary/ss.gif" alt="Aeroturn Rotary Turnstile" width="75" height="91" onmouseover="this.width=300;this.height=372;" onmouseout="this.width=75;this.height=91;" style="float:left; margin-left: 250px" /> <img src="Linear/ciglinear.jpg" alt="Aeroturn Linear Turnstile" width="122" height="91" onmouseover="this.width=450; this.height=338;" onmouseout="this.width=122; this.height=91"/> <img src="Aerowing/aerowing.jpg" alt="Aeroturn AeroWing Turnstile" width="105" height="91" onmouseover="this.width=500; this.height=375;" onmouseout="this.width=105; this.height=91" style="float:center;"/> The images are in line and do expand but when I mouseover the middle picture ["Linear/ciglinear.jpg] the third picture moves out of line and stays at the bottom right corner of the expanded picture. The same happens when I mouseover the third picture - the middle picture will stay in the bottom left corner. Is there a way I can stop this and maybe have the picture disappear behind the picture that is expanded? Thanks - amnilsen11 Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted July 3, 2012 Report Share Posted July 3, 2012 You might be able to do something to that effect if you put them all position: relative and have them be in one spot by adding left: amountpx; then add the z-index of the hovered one to be higher than the others. By the picture expanding do you mean stretching or showing more of the picture? If it is just expanding you could have divs floated and change the background image and then change the hover in CSS. Sorry if I am being confusing. Quote Link to comment Share on other sites More sharing options...
newseed Posted July 4, 2012 Report Share Posted July 4, 2012 For what you are doing I would use something like FancyBox or Highslide. Quote Link to comment Share on other sites More sharing options...
amnilsen11 Posted July 5, 2012 Author Report Share Posted July 5, 2012 By expanding I mean that I am have thumbnails and when the mouse rolls over the picture it expands to the full size image. I will look into fancybox/highslide - thanks! And benjaminmorgan can you explain what you mean a little bit more? Thanks!! Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted July 5, 2012 Report Share Posted July 5, 2012 I think I have misunderstood the question. Try the fancybox that Eddie suggested. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.