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
    Dec 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question image swapping with single target

    heyall, i'm trying to produce a variation on mouseover image swaps. basically, i've got several thumbnail images that when the visitor mouses over one of them, the larger version of the thumb should replace a similarly dimensioned invisible image positioned on the same page. this blank image should be the target for all the thumbs' mouseover events and should be replaced with each thumb's respective larger version.

    i tried to accomplish this by declaring a variable that would assume the value of which ever thumb was being moused over. i get the "document.images[...] is not an object" error. without the variable i can't get the blank image to swap with more than one of the thumbs.

    i don't want to open a new window, use frames, or have a target for every triggering source.

    can this be done? how?

    thanks in advance

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Of course that can be done. It should be simple in fact, show us your current code and we'll help you adjust it to make it work.

  • #3
    New to the CF scene
    Join Date
    Dec 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    code for image swap:

    hi ron, thanks for the help, i really appreciate it.

    here are the functions to preload the images and to perform the image swap:


    if (document.images)
    {
    // Preload original images
    var pic101_init= new Image();
    pic101_init.src="Photos/Pics/dutchCottageT.jpg";
    var pic102_init= new Image();
    pic102_init.src="Photos/Pics/keukenhofT.jpg";
    var pic103_init= new Image();
    pic103_init.src="Photos/Pics/bruggeCanalT.jpg";


    // Preload hover images
    var pic101_new= new Image();
    pic101_new.src="Photos/Pics/dutchCottage.jpg";
    var pic102_new= new Image();
    pic102_new.src="Photos/Pics/keukenhof.jpg";
    var pic103_new= new Image();
    pic103_new.src="Photos/Pics/bruggeCanal.jpg";


    }

    function imageSwap(the_name)
    {

    var picName;
    var picID;

    if (document.images)
    {
    document.images[the_name].src= eval(the_name + "_new.src");
    picName=document.images[the_name]; // problem area!
    picID=document.images[the_name]; // how do i assign these?
    }
    }

    function imageReturn(the_name)
    {
    if (document.images)
    {
    document.images[the_name].src= eval(the_name + "_init.src");
    }
    }

    here are the html snippets where one of the mouseover events take place:

    <img src="Photos/Pics/dutchCottageT.jpg" width="75" height="52" border="0" onMouseOver="imageSwap('pic101')" onMouseOut="imageReturn('pic101')">

    <img src="Images/spacer.gif" width="431" height="297" name="picName" id="picID" border="0">

    <!-- i used the variables "picName" and "picID" in place of a specific image's index value such as, in this case, 'pic101' with the hope that all the thumbs could send their swap to the spacer gif. -->

    i guess i'm just confused as to how to make those variables work.

    thanks again for any assistance!

    -zuben

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    ...
    if (document.images)
        {
        // Preload hover images 
        var pic101_new= new Image(); 
        pic101_new.src="Photos/Pics/dutchCottage.jpg"; 
        var pic102_new= new Image(); 
        pic102_new.src="Photos/Pics/keukenhof.jpg"; 
        var pic103_new= new Image(); 
        pic103_new.src="Photos/Pics/bruggeCanal.jpg"; 
        }
    ...
    
    function imageSwap(the_name) 
        { 
        if (document.images) 
            {
            document.images["picID"].savesrc=document.images["picID'].src;
            document.images["picID"].src= the_name.src; 
            } 
        return true;
        } 
    function imageReturn(the_name) 
        { 
        if (document.images)
            {
             document.images["picID"].src = document.images["picID"].savesrc;
            }
        return true;
        } 
    
    ...
    
    <img src="Photos/Pics/dutchCottageT.jpg" width="75" height="52" border="0" onMouseOver="return imageSwap(pic101_new)" onMouseOut="return imageReturn()"> 
    
    ...
    
    <img src="Images/spacer.gif" width="431" height="297" id="picID" border="0">
    Things to note: You don't need to preload the original thumbnail images since they're all going to be preloaded anyway and since you aren't swapping them out there's no reason to give them any special handling.

    The image swap function now saves the original image name and the image return function simply restores that saved image name.
    The image swap function only needs to get the src of the new image so instead of accepting a partial name as before it receives a handle to the preloaded image and simply uses the src of the preloaded image.
    The img tag doesn't need both a name and an id so I removed the name attribute since it's deprecated (obsolete) and having both only adds confusion.
    The image return function doesn't need a parameter since it can find the name of the original image which was saved by the image swap function.
    Both of the image functions were altered to return a value and the calls to those functions now also return values because failing to return a value for events can cause problems in various browsers.

  • #5
    New to the CF scene
    Join Date
    Dec 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up thanks

    hi roy, thanks again for the post. i think i may have found a better solution than the mouseovers though. take a look at this code:

    <script>
    function bigPic(image)
    {
    document.getElementById('big').src= image;
    }
    </script>

    which uses the image object's onClick event instead. i actually like the click better, it makes the page seem more stable. the script is short and sweet and there is only one drawback- the thumbs now take as long as the large images to load because they are the same image, just dimensioned really small.

    thanks again. i might try your technique as well later on in this project. i would like to be able to have a block of text accompany each image, (but not an image of text). i'll save such ambitions for another day.

    take care,

    -zuben



  •  

    Posting Permissions

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