View Single Post
  #1 (permalink)  
Old 07-15-2007, 03:54 PM
Mr. Y Mr. Y is offline
Registered User
 
Join Date: Jul 2007
Posts: 6
Zoom 1 image in, 3 out.

Hi, im totally new to this forum so please be kind. My english is not the best, so if there is some thing that i write you do not understand, please tell me.

A day or two back i was looking for inspiration on templatemonster and then i saw this gallery site, and thought wow. Normally i only use templatemonster for the design inspiration not the programming part, but this was an exeption. I found this design. It is only the 4 picutres on the front page I like.
The way they zoom in and out, when you point the cursor over one.
http://www.templatemonster.com/flash...tes/10151.html

Then i thought, this can be made in javascript (since im a flash hater). Then i thought, hmm i make it my self, but why not make a google search first, and then i found this script/site: Controlling image sizes using onmouseover

The script is by unitygizmo...and then i started reading the script through.

Normally when i work with javascript i give my images or whatever a Name, so they have different ID's. But this function can be used on every picutre.

In my mind i think.. if i have
HTML Code:
<img src='test1.jpg' id="P1" onMouseOver='resizeImg(this, 200)' onMouseOut='resizeImg(this)' width="250" height="250">
<img src='test2.jpg' id="P2" onMouseOver='resizeImg(this, 200)' onMouseOut='resizeImg(this)' width="250" height="250">
<br>
<img src='test3.jpg' id="P3" onMouseOver='resizeImg(this, 200)' onMouseOut='resizeImg(this)' width="250" height="250">
<img src='test4.jpg' id="p4" onMouseOver='resizeImg(this, 200)' onMouseOut='resizeImg(this)' width="250" height="250">
So when mouseover P1, P1 will zoom, and P2+P3+P4 will schrink, and when mouseover is on P2, P2 will zoom, and P1+P3+P4 will schrink.(do you get the system?)

But i do not have any idea how to make this, so i hope some of your guys have an idea or two
Reply With Quote