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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image expand/zoom script problem

    Hello dear codingforums members...
    This is my first post,

    I have this script which is used to expand/zoom an image to make it look larger..
    But it only works in IE but not in Firefox or Google Chrome... Can anyone have a look and help out...

    I came to know that img.style.width=obj.width*2; is not supported in chrome and fire...

    So if there is some alterations I could make to the code...

    Code:
    function Large(obj)
    {
      debugger;
     
        var imgbox=document.getElementById("imgbox");
        imgbox.style.visibility='visible';
        var img = document.createElement("img");
        var statusbar = document.createElement("span");
        var Urlstr=obj.alt;
        img.src=obj.src;//replace("_th.jpg","_pr.jpg");
        img.style.width=obj.width*2;
        img.style.height=obj.height*2;
       
    
      document.getElementById('<%=hdnInfoUrl.ClientID%>').value=Urlstr;
      
        if(img.addEventListener){
            img.addEventListener('mouseout',Out,false);
            
        } else {
            img.attachEvent('onmouseout',Out);
           img.attachEvent('onclick',ClickThis);
        }             
        imgbox.innerHTML='';
        imgbox.appendChild(img);
        imgbox.style.left=(getElementLeft(obj)-50) +'px';
        imgbox.style.top=(getElementTop(obj)-50) + 'px';
        // add span
        statusbar.innerHTML = "<p>Other Image Details Text</p>";
        imgbox.appendChild(statusbar);
    }
    function Out()
    {
    document.getElementById("imgbox").style.visibility='hidden';
    }



    So there is a hidden div with id=imgbox on the html page, when mouse is hovered on a thumbnail,this div gets visible and the image is increased in width and height and displayed...when on mouse out its invisible... works in IE ....

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,996
    Thanks
    15
    Thanked 233 Times in 233 Posts
    See how I have added a line here. This is the code you need to include for FF and other browsers. And I also added for the hidden part.
    Code:
    imgbox.style.visibility='visible';
    imgbox.style.display = 'block';
    This is for the hidden.
    imgbox.style.visibility='hidden';
    imgbox.style.display = 'none';
    You're welcome.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    See how I have added a line here. This is the code you need to include for FF and other browsers. And I also added for the hidden part.
    Code:
    imgbox.style.visibility='visible';
    imgbox.style.display = 'block';
    This is for the hidden.
    imgbox.style.visibility='hidden';
    imgbox.style.display = 'none';
    You're welcome.
    Hi... thank you...

    It wasnt exactly what i needed but helped me to understand what had to be done...

    ff and chrome cant understand "imgbox.style.width"
    they only need to be converted to "imgbox.width" for the zooming effect to work on ff and chrome..

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,996
    Thanks
    15
    Thanked 233 Times in 233 Posts
    Quote Originally Posted by coidn View Post
    Hi... thank you...

    It wasnt exactly what i needed but helped me to understand what had to be done...

    ff and chrome cant understand "imgbox.style.width"
    they only need to be converted to "imgbox.width" for the zooming effect to work on ff and chrome..
    Not exactly, when you use obj.style.width you have to use the +'px'; along with it.

    obj.style.width = 300+'px';

    I can't tell you how many times I've been caught out by forgetting to include the +'px'


  •  

    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
    •