Mouseover an image to enlarge it

I have a webpage with photos in it. Their display size is small in order to make space for other content on the page.
     How can I configure the photos so that when a visitor hovers the cursor any one of them, it's size will then enlarge (and then when the cursor goes off it the size reverts back to normal)?
     Would this require me to create and upload a 2nd, bigger, version of each photo (to be loaded onto the page when the cursor hovers over any of them) or is that not necessary?
john8217Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

William FulksSystems Analyst & WebmasterCommented:
This is the simplest way to do it, but it can cause some oddball formatting issues if you have text or other objects around it because the larger size may displace those items.

This example below will take a 100x100 image and blow it up to 150x150 when the mouse goes over it.

<img src="graphic.png" width="100" height="100" onmouseover="this.width=150;this.height=150;" onmouseout="this.width=100;this.height=100" />

You can also use other tricks and then create two different images to perform a "swap" on mouse over. Many ways to go about this.
William FulksSystems Analyst & WebmasterCommented:
Another method using two images:

<a href="link.html"><img src="smallgraphic.jpg" onMouseOver="this.src='largegraphic.jpg'" onMouseOut="this.src='smallgraphic.jpg'" /></a>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
No you can do it with a single photo and some css

Give each image a container - this is what you style to set the size of the thumbs - you place the images in these containers and make the image width 100%.
Set up a hover style on the image to change its css to position absolute and then position as required.
CSS
<style type="text/css">
.image-box {
  width: 25%;
  position: relative;
  float: left;
}
.image-box img {
  width: 100%;
  z-index: 1;
  position: relative;
}
.image-box img:hover {
  position: absolute;
  top: -100px;
  left: -100px;
  z-index: 1000;
  width: auto;
}
.image-box::last-child::after {
  display: table;
  content: "";
  clear: both;
}
</style>

Open in new window

HTML
    <div class="image-box">
      <img src="images/background5.jpg" />
    </div>
    <div class="image-box">
      <img src="images/background6.jpg" />
    </div>
    <div class="image-box">
      <img src="images/background5.jpg" />
    </div>
    <div class="image-box">
      <img src="images/background6.jpg" />
    </div>

Open in new window

Working sample here
john8217Author Commented:
Due to the restrictive nature of the web editing program we're using, I might not  be able to use the CSS method, even though that would be the ideal method to use. I'll probably have to fall back on the method using the eventhandler.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.