Nov 22, 2009
Pages: 1, 2, 3

Enlarge Image Script

 		free web hosting

Read Latest Entries..: (Post #22) by iGuest on Oct 2 2009, 07:53 AM.
Enlarge image in new window on same page Enlarge Image Script Can anyone help me with simple html code (no css or java) that allows me to click on an image and then a new image opens in a small window with the same page in the background? ie, not in a new browser?
Read the FIRST post of this Topic. - Express your Opinion! Contribute Knowledge :-).

Open Discussion & Free Web Hosting > Computers & Tech > Programming > Scripting > JavaScript

Enlarge Image Script

TavoxPeru
Aug 20 2006, 02:00 AM
Hi, this simple one line script changes the image size and source on your thumbnail picture without reloading the page or using popups, just paste this code into the BODY section of your HTML document:
CODE
<img src="yourimage.jpg" width="150" height="200" onclick="this.src='yourimage.jpg';this.height=400;this.width=300" ondblclick="this.src='yourimage.jpg';this.height=200;this.width=150">

Best regards,

edit: adding the missing ' of the src on the ondblclick event.

Comment/Reply (w/o sign-up)

eliments
Mar 17 2007, 07:16 AM
Once again... very nifty stuff here.... jeez man... where you learn all of this stuff....
Thanks ^^;

Comment/Reply (w/o sign-up)

TavoxPeru
Mar 18 2007, 12:20 AM
QUOTE(eliments @ Mar 17 2007, 02:16 AM) *
Once again... very nifty stuff here.... jeez man... where you learn all of this stuff....
Thanks ^^;

You are welcome, and where do i learn all of this stuff???? well, honestly, i learn all of this stuff by investigating forced in some way by my clients and of course because i love my work, and other times because i dont have any thing better to do biggrin.gif.

BTW, this code is really good, i forgot it and a few days ago i have to do something similar, thanks to refresh my mind wink.gif.

Best regards,

Comment/Reply (w/o sign-up)

Rs2cheaters
Apr 10 2007, 10:37 AM
Nice code,

Where do you guys achually learn all these codes? Websites? Books? come on, give me ur hints

Comment/Reply (w/o sign-up)

TavoxPeru
Apr 11 2007, 05:37 AM
QUOTE(Rs2cheaters @ Apr 10 2007, 05:37 AM) *
Nice code,

Where do you guys achually learn all these codes? Websites? Books? come on, give me ur hints

As i said in my previous post, by investigating, web searching, in websites like dynamic drive, javascript.com, etc. Books???? may be you dont beleive me but practically i dont read any technical book for a long time.

best regards,

Comment/Reply (w/o sign-up)

toby
Apr 11 2007, 08:45 AM
How do you make it go back to normal, like onhoveroff?

Comment/Reply (w/o sign-up)

TavoxPeru
Apr 12 2007, 11:21 AM
QUOTE(toby @ Apr 11 2007, 03:45 AM) *
How do you make it go back to normal, like onhoveroff?

To make the image go back to normal state simply double click over it.

Best regards,

Comment/Reply (w/o sign-up)

FeedBacker
Oct 31 2007, 03:52 AM
Thanks very much for sharing this code, it's really great.

But there's one question that I have been wondering about. How do you keep the image looking good even after it is being enlarged? What I have seen so far is that only dimensions of the original image size will look good.



-Domoto Rima

Comment/Reply (w/o sign-up)

FeedBacker
Nov 19 2007, 08:30 PM
I have a question too. I am creating a site and I need to make a picture that will enlarge when it is clicked.

I could use javascript for that or simply <img src="myimg.jpg" onClick="window.location=src"> something like this, I can't remember the sintax exactly, but my problem is that I need to make the pic enlarge without using onClick, or onSubmit or other things like that.

I am using a program (typo3) wich will map it and by doing that the picture will lose the onClick part. I also need to use the same code for many pictures. if you have any idea about this pls let me know... and I hope I explained it right cuz I'm not to good in explaining my thoughts.thanks

-cami

Comment/Reply (w/o sign-up)

TavoxPeru
Dec 6 2007, 06:59 AM
QUOTE(FeedBacker @ Oct 30 2007, 10:52 PM) *
Thanks very much for sharing this code, it's really great.

But there's one question that I have been wondering about. How do you keep the image looking good even after it is being enlarged? What I have seen so far is that only dimensions of the original image size will look good.
-Domoto Rima

In that case you must calculate the new dimensions of the image by using an aspect ratio factor i guess.

Best regards,

Comment/Reply (w/o sign-up)

Latest Entries

iGuest
Oct 2 2009, 07:53 AM
Enlarge image in new window on same page
Enlarge Image Script

Can anyone help me with simple html code (no css or java) that allows me to click on an image and then a new image opens in a small window with the same page in the background? ie, not in a new browser?


Comment/Reply (w/o sign-up)

iGuest
May 21 2009, 07:29 AM
Browse, enlarge onMouseMovement
Enlarge Image Script

I want to browse through my computer or any where, retrieve a picture  into a thumb nail and then

move the mouse on it or click it to enlarge that picture. Does any one have a simple code either in VScript  or JScript.  I appreciate any help

-reply by samy youssef

Comment/Reply (w/o sign-up)

iGuest
Feb 15 2009, 07:41 AM
script to enlarge image in new window
Enlarge Image Script

Hi there, this code is great

Have you tried onMouseOver and onMouseOut  ?

No need to click :)

Also keep the image quality, by uploading larger size image and displaying smaller size then onMouseOver show original (large) size.

Thanks Guys for the interesting read

-reply by Robert Prins

 


Comment/Reply (w/o sign-up)

iGuest
Jan 21 2008, 12:17 PM
Enlarge Image script
Enlarge Image Script

Replying to Feedbacker

Another useful tip is you can do incremental zooming by altering the code slightly ...

<img src="yourimage.Jpg" width="150" height="200" onclick="this.Src='yourimage.Jpg';this.Height=this.Height+100;this.Width=this.Width+100" ondblclick="this.Src=yourimage.Jpg';this.Height=200;this.Width=150">


-Bruv

Comment/Reply (w/o sign-up)

TavoxPeru
Jan 17 2008, 12:03 AM
QUOTE(FeedBacker @ Jan 8 2008, 11:55 AM) *
Enlarge Image Script

Enlarge Image Script
Hi,

I found why your code is not working, you miss a ' on the second src

<img src="yourimage.Jpg" width="150" height="200" onclick="this.Src='yourimage.Jpg';this.Height=400;this.Width=300" ondblclick="this.Src=yourimage.Jpg';this.Height=200;this.Width=150">

Many thanks

A

-Alex

Oopps, thanks a lot, i gonna edit the code right now.

Best regards,

Comment/Reply (w/o sign-up)

Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.
Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Pages: 1, 2, 3
Similar Topics

Keywords : enlarge, image, script

  1. 12 Javascript Image Galleries
    (0)
  2. Love Script
    (3)
    Now i personally dont think a bit of Java Script works.... To tell you who you love & the amount of
    days your going to live but I have made this script for US only that can tell the area IN US were
    you were born by entering your social security number all your information is not shored apart from
    the area you live in.... Trust me it works.......
  3. One Click To Copy Script
    Works in IE6 but not any other Browsers (0)
    As a project to "boilerplate" some text, I had this idea of making a couple of textareas in html and
    having a single click on the input button copy the contents to the clipboard and then pasting the
    text into another blank textarea. Several textareas would contain the different pieces of text and I
    would then be able to 'assemble' the full text into the 'blank' textarea and then,
    of course, copy this entire piece to the clipboard and migrate it to the final spot for copying.
    Anyways, BuffaloHELP had the basic code for the javascript, but it seems that thi....
  4. Google Map Like Pins On Image
    Please helpe me regarding this. (4)
    Hi I have a situation. I have to create a random image (world map) through PHP. I did this. but I
    have to Add small PINS (like in Google Map) and that Pins will be Click able??? To know what i m in
    need please go to http://maps.google.com/ and type UK , u will see some RED PINS (having A, B, C
    , D etc) on its face. That pin is clickable . These sort of PIN i want on an image and that
    should me clickable also. Please help Thanks ....
  5. JavaScript Off Redirect Script
    How to redirect a browser when Javascrip (2)
    Hi, here's a trick that will redirect a browser when JavaScript is turned off. Why not redirect
    the ones that have JavaScript? It's because less than 10% of browsers have JavaScript turned
    off; therefore, is better to redirect less than 10% of visitors than over 90%. Simply paste this
    code into the HEAD section of your HTML document. CODE /* Created by: Will Bontrager ::
    http://www.willmaster.com/ */ //--> Best regards,....
  6. Create And Import JavaScript Modules For A Large Script
    (2)
    I have one main script which defines an object. I then have several other script files that define
    functions for that object. I have tried using the following setup to import the functions: HTML
    code snippet: Javascript code snippet: import Object.functionName; This works fine for
    Mozilla Firefox, but causes an error in Internet Explorer which causes the object to be undefined.
    I would like to know how better to import the functions into the main javascript (preferably without
    needing to add the module script to the html file) that works in both Firefox a....
  7. Javascript: Browser Detection Script
    Detect your visitors browser (2)
    If you want to detect your visitors browser, sebd them a message and redirect them use this script:
    CODE var browserName=navigator.appName; if (browserName=="Netscape") { alert("Hi Netscape
    user!") window.location = "netscape.html" } else { if (browserName=="Microsoft Internet
    Explorer") {   alert("Hi Microsoft Internet Exlorer User!");   window.location = "MIE.html" }
      else   {    alert("What are you browsing with?");    window.location = "unkown.html"    } } //-->
    ....
  8. Calling Of Functions Between Mulitple External Javascript Files
    How do I use an external script to call a function from another script (2)
    I have a page that requires many Javascript functions. In order to make the coding easier to read
    and edit, I decided to seperate them into 3 Javascript files. Two files will each do a specific job.
    One file will have the shared functions that both other 2 files will need to use. They are all
    linked to a page using three tags. The difficult part is that after the page calls a function in
    one of the special code files, that Javascript file will need to call the functions located in the
    common Javascript file. The file will call several functions, and it will an argumen....
  9. Password Protect Your Page
    Its a very simple script, do not use it for any thing serious! (2)
    Guys, if you like it you can use it, but one thing I would like to tell is that its not entierly
    safe to use such a thing, it depends on your content that you are trying to protect from usual
    visitors, beginners this is for you. The best part is that you do not need any kind of scripts
    installed on your server, it is in JavaScript which is embeded in to your HTML page. Just change the
    username from "asta" to your choice and password from "host" to your preference. Here is the code...
    CODE /*This Script allows people to enter by using a form that asks for a UserI....
  10. Browser Quaker Script - Shock Your Visitors!
    this script shakes the browser like a quake happened! (5)
    Browser Quaker! SHOCK your visitors! this script shakes the browser like a quake happened!
    yeah....try this script to believe it! im sure u will be stunned at the effect! a good way to show
    your visitor that...your website ROCKS!..and literally so ! ! i got this script from Bravenet
    's webmaster freebrees newsletter. if you haven't known bravenet before..it is a beginner
    webmaster's friend! you get lot many features for your website hosted freely. and subscribe to
    their newsletter to get gems like these! ok here's the code: CODE function init() ....
  11. Unobtrusive Javascript Image Rollovers
    really cool & useful.. (0)
    i find this really cool..gr8 piece of code. image rollovers Create image rollovers for your
    navigation without hardcoding any JavaScript into the HTML code on your Web pages. Easy to
    implement, even for beginners, and works across all browsers. Degrades nicely for visitors with
    JavaScript turned off. CODE img {border: none;} ul {list-style-type:none;} ul li
    {display:inline;} function isDefined(property) {   return (typeof property !=
    'undefined'); } var rolloverInitialized = false; function rolloverInit() {   if
    (!rolloverInitialized && isDe....
  12. Sweet Titles
    script will display the titles on your links in a very "sweet&quo (0)
    try this one...its indeed sweet! sweet titles This script will display the titles on your links
    in a very "sweet" manner. The look is customized by using CSS and is easily changed. Degrades very
    nicely. CODE /* Fading Tooltips */ div#toolTip {   position:absolute;   width:220px;
      background:#00009C;   border:2px double #fff;   text-align:left;   padding:5px;
      -moz-border-radius:5px;   z-index:1000; } div#toolTip p {   margin:0;   padding:0;   color:#fff;
      font:11px/12px verdana,arial,serif; } div#toolTip p em {   display:block;   margin-top:3px;
      color:....
  13. Dynamically Change The Background Image On Mouse Effects!
    easy code to dynamically change the background image (4)
    stun ur visitor with a new bg image on every mouse click of his! easy code to dynamically change
    the background image. Copied from http://www.scriptworm.com/scriptengine/visit.php?id=30296
    QUOTE control the background image using the links on your site. control the color using
    onMouseOver, onMouseOut, onClick, and a combination of all of them. place the code below between
    the and tags within the HTML page where you want the link to appear. edit the link text provided to
    point at the page you would like to open. Option 1: use this to change the background ....
  14. Bid Visitors Bye/thank U With A Popup Onunload In Just One Line!
    script designed to open a window when the users leave the site (0)
    Copied from http://www.cgiscript.net/cgi-script/csNews...wone&id=54&op=t QUOTE add the one
    line code below to the tag of the page you want to trigger the action from. when they leave that
    page another window will open. change the text "URL" in the code below to reflect the new web site
    address you want them to enter. QUOTE for example, when they leave your site you can open a
    window that says thank you for visiting. QUOTE Code: CODE
    onunload="window.open('URL')" thats it...now say a royal thanks to ur visitors!
    cheers! shiv....
  15. Let's Make Rainbow Link
    Auto Changing Link Colors Script (1)
    Put this source inbetween and !!!! CODE script language="JavaScript1.2"> var rate = 20;
    var obj; var act = 0; var elmH = 0; var elmS = 128; var elmV = 255; var clrOrg; var TimerID;
    if (navigator.appName.indexOf("Microsoft",0) != -1 && parseInt(navigator.appVersion) >= 4) {
    Browser = true; } else { Browser = false; } if (Browser) { document.onmouseover =
    doRainbowAnchor; document.onmouseout = stopRainbowAnchor; } function doRainbow(){ if (Browser
    && act != 1) { act = 1; obj = event.srcElement; clrOrg = obj.style.color; TimerID = setInt....
  16. Need Opinion - Language Redirection Script...
    (0)
    Hi... I wasn't there for some time but now I need opinion... I hope someone would be able to say
    something about my script... what should be fixed, what I can do to improve it... it is universal
    language redirection script for few pages that I work on and I need it to be as good as it can be...
    would this be working in every browser in which scripts like that can work? If now what I should
    add? (why I aded "en" and "en-US"? The script first checks if there is exact name and then it
    converts it to small letters and takes only two first... just in case someone would....
  17. Slideshow Of Pictures
    Simple script (0)
    This is just a small script that lets you display a set of pictures in a slideshow-like manner. This
    script lets you show the thumbnailed versions of the pictures, and then when the user clicks on a
    pic, the user is taken to the actual picture. NOTE: You can add more pictures to the array by
    copying the format that is being used in it: CODE slideshow = new Array(              
                    "images/image1.bmp", "images/image2.bmp",                              
    "images/image3.bmp", "images/image4.bmp"                               ) slideNumber = sli....
  18. Need Drop Down Menu Script
    Current not working in firefox (1)
    I'm in need of a drop down menu script. The one I am currently using was written to work in
    both ie and netscape, but does not work in firefox. /sad.gif" style="vertical-align:middle"
    emoid=":(" border="0" alt="sad.gif" /> I new at installation that the author had stretched the
    rules abit to make it work, but didn't expect firefox to come out. I don't care what
    language it is written in as long it works If you have ie you can see an example at:
    http://66.78.26.33/~ruidoso/ I would appreciate any help you can recommend pete....
  19. here is a javascript that allows you to print
    print script (0)
    here i the script i will allow your visitors to print your page input in html editor // This
    script was supplied free by Hypergurl // http://www.hypergurl.com if (window.print) {
    document.write(' Click Here To ' + ' + 'onClick="java script:window.print()"> This
    Page! '); } // End hide --> ....
  20. Java Script
    Do you know how.... (7)
    Does anyone know how to make some cool java script stuff? Is the possiblities endless in terms of
    designing things and comming up with stuff? For example... how do you make that trailing text... i
    think that is java script.....


      21. Looking for enlarge, image, script

See Also,

*SIMILAR VIDEOS*
Searching Video's for enlarge, image, script
advertisement



Enlarge Image Script

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com