www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 19 of 19

Thread: [RESOLVED] Image scale onclick

  1. #16
    Join Date
    Jun 2012
    Posts
    20
    Ok, had to switch over to my laptop, can't debug stuff from my phone lol.

    This should work for you.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- saved from url=(0039)http://www.suresure.co.uk/Temp/BM3.html -->
    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            
            <title></title>
            <style type="text/css">
                img:hover{
    cursor: pointer;
                }
            </style>
    <script type="text/javascript">
    function toggle(el) {
    	if (el.class === undefined) {
    		el.class = "";
    	}
    	if (el.class !== undefined && el.class.match(/enlarged/) === null) {
    		el.class += " enlarged";
    		el.width = el.width * 2;
    		el.height = el.height * 2;
    	} else {
    		el.class = el.class.replace(/\senlarged/,"");
    		el.width = el.width / 2;
    		el.height = el.height / 2;
    	}
    	return true;
    }
    </script>
        <style type="text/css"></style></head>
        <body>
                <img src="./BM3_files/biscuitman.svg" onclick="toggle(this)">
                <img src="./BM3_files/biscuitman.svg" onclick="toggle(this)">
        
    </body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>

  2. #17
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    IT WORKS! Ha! Genius - thanks so much! I've dropped the el.height = el.height lines - it distorts some of the spacing, but that's a really lovely, clean bit of code. Thanks a lot - can't believe you were answering from your phone - cheers !

  3. #18
    Join Date
    Jun 2012
    Posts
    20
    You can actually use this,

    Code:
    function toggle(el) {
    	if (el.class === undefined) {
    		el.class = "";
    	}
    	if (el.class.match(/enlarged/) === null) {
    		el.class += " enlarged";
    		el.width = el.width * 2;
    		el.height = el.height * 2;
    	} else {
    		el.class = el.class.replace(/\senlarged/,"");
    		el.width = el.width / 2;
    		el.height = el.height / 2;
    	}
    	return true;
    }
    Having that el.class !== undefined is redundant since you check it in the line before.

  4. #19
    Join Date
    Apr 2009
    Location
    London, UK
    Posts
    34
    Thanks - that's extra nice! I'll show you when I get the content in place. Thanks again!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles