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 9 of 9
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question rollover image position?

    Hi everyone! I am using some JS and CSS that loads a big image when you rollover the small image. This effect works when the small image is fully shown in the browser but if the browser is resized so the small image is cut off showing half the image then the bigger image doesnt adjust with the browser. I would like to know how to get the big image to adjust with the browsers height and width.

    This is the JS I am using:
    Code:
    <script type="text/javascript">
    function display(x,y,text,src) {
    var brokenstring = src.split("_small");
    var newstring = brokenstring[0]+'_big'+brokenstring[1];
    
    var c = document.getElementById("capt");
    c.innerHTML ="";
    c.style.left = x + "px";
    c.style.top = y + "px";
    
    var myImage = document.createElement('img');
    myImage.setAttribute('src',newstring);
    myImage.setAttribute('alt','');
    c.appendChild(myImage);
    
    c.appendChild(document.createTextNode(text));
    }
    
    function showdiv(id) {
    t = document.getElementById(id);
    document.getElementById("capt").style.display = "block";
    t.onmousemove = function(e) {
    var ev = e || event,ox=20,oy=20;
    display(ev.clientX+ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));
    return false;
    }
    }
    function hidediv() {
    document.getElementById("capt").style.display = "none";
    }
    
    </script>
    The big image loads in this div:
    Code:
    <div style="display: none; left: 437px; top: 32px;" id="capt"></div>
    Does anyone know how to make the rollover image to reposition itself?
    Last edited by youandI; 07-12-2007 at 11:34 PM.

  • #2
    New Coder
    Join Date
    May 2007
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    please help

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    function display(x,y,text,src) {
    var brokenstring = src.split("_small");
    var newstring = src.replace('_small','_big');
    
    var c = document.getElementById("capt");
    c.innerHTML ="";
    c.style.left = x + "px";
    c.style.top = y + "px";
    
    var myImage = document.createElement('img');
    myImage.setAttribute('src',src.replace('_small','_big'));
    myImage.setAttribute('alt','');
    myImage.setAttribute('id','myimage'); // given an id to resize on window resize
    c.appendChild(myImage);
    
    c.appendChild(document.createTextNode(text));
    }
    // call zxcResizeImage('myimage') on window resize easiest onresize="zxcResizeImage('myimage',4)" in the body tag
    function zxcResizeImage(zxcimg,zxcfactor){
     if (typeof(zxcimg)=='string') zxcimg=document.getElementById(zxcimg);
     if (!zxcimg) return false;
     zxcimg.width=zxcWWHS()[0]/zxcfactor;// I have used 4 but your choise
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    I have show image size but technique can be used for position
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    What should I put in the body tag? Can I change myimage to _big? I want every image that has the suffix _big at the end to display fully in the browser when the scale of the browser window is adjusted.

    This is how the JS currently looks like:
    Code:
    <script type="text/javascript">
    function display(x,y,text,src) {
    var brokenstring = src.split("_small");
    var newstring = src.replace('_small','_big');
    
    var c = document.getElementById("capt");
    c.innerHTML ="";
    c.style.left = x + "px";
    c.style.top = y + "px";
    
    var myImage = document.createElement('img');
    myImage.setAttribute('src',src.replace('_small','_big'));
    myImage.setAttribute('alt','');
    myImage.setAttribute('id','myimage'); // given an id to resize on window resize
    c.appendChild(myImage);
    
    c.appendChild(document.createTextNode(text));
    }
    // call zxcResizeImage('myimage') on window resize easiest onresize="zxcResizeImage('myimage',4)" in the body tag
    function zxcResizeImage(zxcimg,zxcfactor){
     if (typeof(zxcimg)=='string') zxcimg=document.getElementById(zxcimg);
     if (!zxcimg) return false;
     zxcimg.width=zxcWWHS()[0]/zxcfactor;// I have used 4 but your choise
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    function showdiv(id) {
                    t = document.getElementById(id);
                    document.getElementById("capt").style.display = "block";
                    t.onmousemove = function(e) {
                        var ev = e || event,ox=20,oy=20;
                        display(ev.clientX+ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));
                        return false;
                    }
    }
    function hidediv() {
        document.getElementById("capt").style.display = "none";
    }
    
    </script>

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what am i doing wrong? what should be in the body tag?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script type="text/javascript">
    function display(x,y,text,src) {
    var brokenstring = src.split("_small");
    var newstring = src.replace('_small','_big');
    
    var c = document.getElementById("capt");
    c.innerHTML ="";
    c.style.left = x + "px";
    c.style.top = y + "px";
    
    var myImage = document.createElement('img');
    myImage.setAttribute('src',src.replace('_small','_big'));
    myImage.setAttribute('alt','');
    myImage.setAttribute('id','myimage'); // given an id to resize on window resize
    c.appendChild(myImage);
    
    c.appendChild(document.createTextNode(text));
    }
    // call zxcResizeImage('myimage') on window resize easiest onresize="zxcResizeImage('myimage',4)" in the body tag
    function zxcResizeImage(zxcimg,zxcfactor){
     if (typeof(zxcimg)=='string') zxcimg=document.getElementById(zxcimg);
     if (!zxcimg) return false;
     zxcimg.width=zxcWWHS()[0]/zxcfactor;// I have used 4 but your choise
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    function showdiv(id) {
                    t = document.getElementById(id);
                    document.getElementById("capt").style.display = "block";
                    t.onmousemove = function(e) {
                        var ev = e || event,ox=20,oy=20;
                        display(ev.clientX+ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));
                        return false;
                    }
    }
    function hidediv() {
        document.getElementById("capt").style.display = "none";
    }
    
    </script>
    </head>
    
    <body onresize="zxcResizeImage('img',2)">
    <input type="button" name="" value="ReSize Image" onclick="zxcResizeImage('img',2)">
    <img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif">
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    May 2007
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    but that is not what I want to do.. I uploaded your code to here:
    http://www.newmedia.lincoln.ac.uk/jecgardner/vic.html

    If you go to this URL:
    http://www.newmedia.lincoln.ac.uk/jecgardner/
    Rollover the screenshot in the first blog entry and you can see a bigger image loads. I would like the _big image to automatically adjust its position so all of the _big image can be seen in the browser instead of half of it being cut off below the browser window and the user has to scroll down to see it all.

  • #8
    New Coder
    Join Date
    May 2007
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anyone know how to do this?

  • #9
    New Coder
    Join Date
    May 2007
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok here is my site:
    http://www.newmedia.lincoln.ac.uk/jecgardner/

    When you rollover the screenshot in the first blog entry titled Conducting Code a bigger image appears.

    Now look at this site:
    http://www.skaffers.com/

    When you rollover an image here and change the browser window size the image adjusts so it can be seen in its best position within the browser.

    I would like my image to have the same effect as skaffers. So when you rollover the small image the big image puts itself into the best position to be seen in the browser.

    I dont know how to do this. Please help


  •  

    Posting Permissions

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