Jump to content

Expanding Image Issue


Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...