Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times

    Growing Images on Mouseover Distortion

    Hi. Firstly, I'd like to say I suck at all coding stuff since I started learning last week, so I won't be insulted, but would rather appreciate it if you guys talked to me like I were an idiot

    My situation is this: Some of the images on my site are links, so I added code to them so they will expand by 5% when the mouse hovers over them, and shrink back when the mouse moves away.

    <a href="#"><img src="http://www.webdesignforums.net/forum/general-web-design-discussion/...images/image1.png" height="180 width="160" onmouseover="this.width=168;this.height=189;" onmouseout="this.width=160;this.height=180"/></a>

    The problem is, when I mouse over them, they distort all the other images which are sharing the line with them and those below them, since I have 5 images side by side sharing a <p>, and 5 images below them sharing another <p>.

    I tried to add style="position:absolute left: 400px; top 500px;" but that gives me problems. Depending on my window size, the image ends up waaaaay on the left or waaaaay on the right, since it is defined by how far from the left it is. My question is: Is there a way to put these images in absolutely in relation to the center or my page, not the left? If not, is there something someone can recommend to me to fix my problem?


    Thank you!
    Last edited by teapot; Aug 09th, 2016 at 09:05 PM.

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Actually, it's doing exactly what it's suppose to do... when you use css or JS to change a height / width attribute onhover, and the element is "relatively positioned", everything around it will move...

    hard to explain... but you can actually use: Enlarge Image On Hover CSS3 Demos | Grains of Sand - CSS & HTML5 Demos & Templates as a example of doing what you explained what you want to do... just position it differently...

  4. #3
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    Hi Webzarus! Yeah, I figured it was doing what it was supposed to do since the elements were relatively positioned. I looked at your link, and those pictures actually pop out a new, bigger picture. What I wanted was for the actual picture to just enlarge a little bit, so people know they are hovering over a button. I guess what I'm saying is, I'd like to figure out a way around "exactly what it's supposed to do." Any suggestions?

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Adjust your DIV padding on the padding ( not margin ), and image size, this will allow the image to enlarge by a couple of pixels ( reduce the padding increase image size ), on hover.... Keep the div size the same... Should not mess with other elements this way.

  6. #5
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    I have 5 images on the same line all within a <p></p>. I don't have any divs. Wouldn't divs make each image be on its own line? I tried increasing the padding within the image, and that didn't work, but I think you knew that and that wasn't what you were suggesting.

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    You could do this with divs, but i'd recommend an unordered list for this purpose. I wouldn't use CSS margins or padding, but I would make the list items about 20px wider and taller than the images. Then, when you resize your images, you'll have natural spacing in their containers.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    I typed this up, and it had 2 problems: first, it always had a bullet point before each picture; second, each picture was on its own line. I haven't even put any padding in yet or anything, as you can see.

    <ul><li><a href="#">
    <img style="border:none" alt="" src="../image1.png" height="160" width="140" onmouseover="this.width=147;this.height=168;" onmouseout="this.width=140;this.height=160"/></a></li>
    <li><a href="#">
    <img style="border:none" alt="" src="../image2.png" height="160" width="140"onmouseover="this.width=147;this.height =168;" onmouseout="this.width=140;this.height=160"/></a></li>
    </ul>

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    That's because an unordered list is styled that way by default.

    You can control the bullet points, the padding and margin, the floating, and the width and height through CSS to make it do what you want.

    Stu Nicholls | CSSplay | A photograph gallery tutorial <-- here's a tutorial that will give you the general idea. You'll need to adapt it to your purposes, but it should work.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Member
    Join Date
    Jun 2013
    Posts
    38
    Member #
    36453
    Liked
    1 times
    Hi TheGame1264. I read the guide, and tried to adapt it to my website, but it seems not to work either. I did get my images to be five on a row with an unordered list stretching 800 pixels. I also set the size of the list items.The increase in size of an image, however, still distorts the others, both on the same line and below, no matter how large I make the list item, or how much padding I add.

    I wrote the list item like this, as you suggested:

    <li height="170"; width="150">

    I used this css from the tutorial to organize the pictures:

    #container ul {
    width:800px;
    }
    #container li {
    float:left;
    padding:0px;
    }

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    I'd set the width and height in the CSS. Make sure you also set the margin to 0 as well.

    If that doesn't work, upload the revised code and we'll see what's up.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:59 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com