School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,495
  • Replies: 826,155
  • Topics: 137,486
  • Snippets: 4,420
  • Tutorials: 1,148
  • Total Online: 1,851
  • Members: 81
  • Guests: 1,770

Welcome to Dream.In.Code
Become an Expert!

Join 300,495 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,851 people online right now. Registration is fast and FREE... Join Now!




Elarge Image

 

Elarge Image
JohnWaters

26 Jun, 2009 - 01:35 PM
Post #1

D.I.C Head
**

Joined: 28 Nov, 2008
Posts: 69



Thanked: 5 times
My Contributions
Hi,

Im trying to enlarge an image using onmouseover but im trying to keep the image in the same central position eg. The image increases in size from the middle out rather than the top left corner staying in the same position (as in my code).

An onmouseout setting the image back to the original size.

Here is my rather rough code so far ...

CODE


<html>
<head>
<script>
var img1 = {
    height: 120,
    width: 120
}

var diff = 50;

function largeImage(img){
    img.width = img1.width + diff;
    img.height = img1.height + diff;
}

function smallImage(img){
    img.width = img1.height;
    img.height = img1.width;
}
</script>
</head>
    <img src="myImage.png" border=0 id="img1" name="img1" onmouseover="largeImage(this);" onmouseout="smallImage(this);">
</body>
</html>


Any help is appreciated. : )

This post has been edited by JohnWaters: 26 Jun, 2009 - 01:36 PM

User is offlineProfile CardPM
+Quote Post


BetaWar

RE: Elarge Image

26 Jun, 2009 - 01:43 PM
Post #2

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
You have to use the CSS position: relative for each image you want to allow this for and then change the functions to this:

CODE
function largeImage(img){
    img.width = img1.width + diff;
    img.height = img1.height + diff;
    img.style.posLeft = -diff/2; // IE, Chrome
    img.style.left = -diff/2; // FF
    img.style.posTop = -diff/2; // IE, Chrome
    img.style.top = -dfiff/2; // FF
}

function smallImage(img){
    img.width = img1.height;
    img.height = img1.width;
    img.style.posLeft = 0; // IE, Chrome
    img.style.left = 0; // FF
    img.style.posTop = 0; // IE, Chrome
    img.style.top = 0; // FF
}


Now, I haven't tested this, but it is the general idea.

HTH
User is offlineProfile CardPM
+Quote Post

JohnWaters

RE: Elarge Image

26 Jun, 2009 - 01:52 PM
Post #3

D.I.C Head
**

Joined: 28 Nov, 2008
Posts: 69



Thanked: 5 times
My Contributions
I tweaked it a little but this worked great.

Thanks for the help smile.gif
User is offlineProfile CardPM
+Quote Post

BetaWar

RE: Elarge Image

26 Jun, 2009 - 01:56 PM
Post #4

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
No problem. Just glad to have been of service smile.gif
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/8/09 04:51AM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month