A Piece of Code to Create Large Images When the Thumbnail is Moused Over
I was looking for a way to use thumbnails on the previous projects page of my website. The catch was that I wanted them to pop up about 3 times the thumbnail size when the viewer passed their mouse over the thumbnail.
I found three lines of code that worked like a dream for what I was trying to accomplish.
<img src="/image.jpg" width="150" height="100" name="image_name" onmouseover="image_name.width='300';image_name.height='200';" onmouseout="image_name.width='150';image_name.height='100';" />
This is the hosted location of the photo you want to use. I had originally created thumbnails and large versions of each photo I wanted to use, but using the thumbnail here causes it to be stretched to the larger size which makes it look terrible. Instead I used the large version here and the width/height tag constrained it to my thumbnail size and allowed it to look perfect when it was brought to the larger size.
This is simply a name you give the photo for this piece of code. It can be anything you wish. Whatever you name you assign it in the name="image_name" spot is the name you will use in all the other yellow highlighted spots.
These are the image dimensions. If you are going to have multiple photos on your page like I do, I would recommend changing the photo sizes so that they all match in a photo editing software program like Photoshop so that you can control the quality of the photos as their sizes are changed.
See it in action on my website at http://www.mdc5designs.com/portfolio212.html
Hope this helps!
****************************************************************
 |
| MCA Now Hiring Home Agents! Click Here to Learn More!! |
Need a better opportunity? Need a new starting line? Come join me and we’ll blaze the trail together working from home and making the most of our lives! Click the link! Take the risk! Make the investment! Start today on your new starting line!
Mony Coleman
Entrepreneur and Way Maker
Twitter: @MonyColeman
Email: mony.coleman@gmail.com
No comments:
Post a Comment