Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making an image larger

    On my homepage I have an image and I'd like users to be able to click the image and it becomes larger. Does any one know how I would do that?
    Thank you!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The image would become pixelated if its original size is small. It will also expand move things around unless its position:absolute. Which do you want?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making image larger

    http://www.malibuchronicle.com
    so that when you click on the image on the home page (girl) you get the full size of the pub. As far as the image I get it attach in my email and then take it to Photo Shop and Web ready so there is know problem with a larger pix. Thank you!
    Last edited by holly m; 10-17-2006 at 07:52 PM.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Do you want the image to open in a new window?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would like it so that when a user checks out the site and the mouse moves over the image they can click on it and it fill up the page. If that means open to a new window then that's okay. Thanks

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Change this
    Code:
              <td width="332" align="center"> <div align="right"> 
                  <p><img src="Graphics/Cover/photo_51.jpg" width="360" height="556"></p>
    to this
    Code:
              <td align="center" id="coverpichold"> <div align="right"> 
                  <p><img src="Graphics/Cover/photo_51.jpg" id="coverpic"></p>
    add this to your CSS
    Code:
    #coverpic {
    cursor:pointer;
    }
    and add this in between your head tags somewhere
    Code:
    <script type="text/javascript">
    function setSize()
    {
    	var whatwidth = 600; // you just need to set the width, not the height
    	document.getElementById('coverpic').onclick = function()
    	{
    		if(this.offsetWidth == 360)
    		{
    			this.style.width = whatwidth + 'px';
    		}
    		else
    		{
    			this.style.width = 360 + 'px';
    		}
    	}
    }
    window.onload = setSize;
    </script>
    Last edited by _Aerospace_Eng_; 10-18-2006 at 02:36 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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