Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to enlarge an image in HTML using mouse over or other options if possible

    Okay, so i have a blog called http://rishabhravindra.blogspot.com which i currently do not use, iam planning to make a website which has 4 rectangles spread and i want them to expand when mouse is hovered over them , just like the articles expand on my blog. Pl. help me, it would be better if someone could write a code and answer below is the code , when i click on each rectangle, it should enlarge a bit like it does in the link i've mentioned above

    Thanks

    <!DOCTYPE HTML>
    <HTML>
    <head>
    <title>
    XYZ
    </title>
    <body>
    <img src="http://www-03.ibm.com/software/lotus/symphony/gallery.nsf/GalleryClipArtAll/4605B1FC01A9E678852575960019A6D2/$File/Rectangle05-Orange.png" height="200" width="300" />
    <img src="http://www-03.ibm.com/software/lotus/symphony/gallery.nsf/GalleryClipArtAll/EA22E4575EA2C543852575960019CB40/$File/Rectangle02-LightBlue.png"
    height="200" width="300" /><br />

    <img src="http://www-03.ibm.com/software/lotus/symphony/gallery.nsf/GalleryClipArtAll/50661879DD59971A852575960019C21E/$File/Rectangle03-Green.png"
    height="200" width="300" />
    <img src="http://www-03.ibm.com/software/lotus/symphony/gallery.nsf/GalleryClipArtAll/68BBF6427BE78A34852575960019B84C/$File/Rectangle04-DarkRed.png"
    height="200" width="300" />





    </body>
    </HTML>

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Somebody correct me if I am wrong, but I think that's JavaScript. The closest thing I've ever done to that is when I used JavaScript for an 'onmouseover' and 'onmouseout'. But that just changed the image, it did not cause a scaling.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Since the site you're referencing is using CSS transitions, you can use that, but you won't get the smooth transitions in IE9 or lower. In that case the image will just enlarge.

    http://www.w3schools.com/css3/css3_transitions.asp
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •