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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OnMouseover graphics size issue

    I am using the OnMouseover Slideshow. Can someone tell me how to edit it so that different size pictures can be displayed without the graphics stretching to fit in the original sized box? Thanks! Jennifer

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Welcome to Coding Forums!

    Now your problem. You've not given us much to go on, but I'm gonna take a guess that when you mouseover a link it calls a script that changes some image. Well what you'll need to do is firstly know the dimensions of the replacing image. Once you know this you can use:

    Code:
    function imageSwaper(what, to, w, h){
        document.getElementById(what).src = 'root/to/images/folder/' + to + '.gif';
        document.getElementById(what).width = w;
        document.getElementById(what).height = h;
    }
    BUT the image tag you're going to be changing must be written like this:
    <img src="original/image.gif" id="image2change">

    and the links need to take this format:
    <a href="#" onMouseover="JavaScript: imageSwaper('image2change','newimage','apx','bpx');">LINK TEXT</a>
    where a = width of the newimage.gif and b = height.

    If you have any problems, let us know and we'll help out
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #3
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind I got it thanks!
    Last edited by jhutton@ate.net; 04-25-2005 at 10:21 PM.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Okay to put this into your example:
    Code:
    <script>
    
    function imageSwaper(whatto, url, w, h){
        document.getElementById('targetimage').src = whatto.src;
        document.getElementById('targetimage').width = w;
        document.getElementById('targetimage').height = h;
        gotolink = url;
    }
    
    function warp(){
    window.location=gotolink
    }
    </script>
    <script language="JavaScript1.1">
    var myimages=new Array()
    var gotolink="#"
    
    function preloadimages(){
    for (i=0;i<preloadimages.arguments.length;i++){
    myimages[i]=new Image()
    myimages[i].src=preloadimages.arguments[i]
    }
    }
    
    <td width="50%" align="center"><a href="#" onMouseover="changeimage(myimages[0],this.href,myimages[0].width, myimages[0].height)">
    <img src="images/BMY102s_small.jpg" border=0 width="100" height="134"></a></td>
    <td width="50%" align="center"><onMouseover="changeimage(myimages[2],this.href, myimages[2].width, myimages[2].height)">
    <img src="images/BMY103s_small.jpg" border=0 width="100" height="153"></a></td>
    
    <a href="javascript:warp()">
    <img src="gallery_exclusive/interior/BMY102s.jpg" name="targetimage" border=0 width="249" height="335" ></a>
    I think that'll do it. Let us know if it doesn't.
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #5
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you SOOO much for your 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
    •