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

    problem with image-changing script onhover

    I have a page with one main image on the left. Default is a black t-shirt.
    If you hover the mouse on the tshirt image, it will switch the image to a zoomed version

    On the right, there's a couple of option boxes to change the color. If you click one of the boxes, it will change the tshirt image to a different color.

    My problem is that once the color is changed, it will switch back to black color as soon as the mouse hover the tshirt.

    I would need to somehow detect what is the current checked option box before changing the image when the mouse hover the tshirt, but i have no idea how i could do that

    Any help would be very appreciated !

    Here's my script:
    http://www.ni-dieu-ni-maitre.com/test_tshirt.php
    Steps to reproduce the bug:
    - Check the box named "Marron". The tshirt should change to brown color.
    - Hover the mouse on the tshirt. It is suposed to stay brown but it will turn back to black color


    Code:
    $articleid =  "17752477";
    $imagesize = "280";
    $imagetitle = "t-shirt";
    
    echo "
    <script type=\"text/javascript\">
    function roll_over(img_name, img_src)
       {
       document[img_name].src = img_src;
       }
    </script>
    
    
    
    <table><tr><td>
    
    <div class=\"articleImages\">
    <a href=\"\" onmouseover=\"roll_over('tshirtimage', 'http://image.spreadshirt.com/image-server/image/composition/$articleid/view/1/producttypecolor/2/type/png/width/$imagesize/height/$imagesize/$imagetitle.png')\"
    onmouseout=\"roll_over('tshirtimage', 'http://image.spreadshirt.com/image-server/image/product/$articleid/view/1/type/png/width/$imagesize/height/$imagesize')\">
    <img src=\"http://image.spreadshirt.com/image-server/image/product/$articleid/view/1/type/png/width/$imagesize/height/$imagesize/$imagetitle.png\" border=\"0\" alt=\"$imagetitle\" title=\"$imagetitle\" class=\"pimg\" id=\"articleImage$articleid\" name=\"tshirtimage\" /></a>
    </div>
    </td><td>
    
        <input type=\"radio\" name=\"color\" id=\"productColor$productid\" value=\"2\"
    	onclick=\"roll_over('tshirtimage', 'http://image.spreadshirt.com/image-server/v1/products/$articleid/views/1,width=$imagesize,height=$imagesize,appearanceId=2.png/$imagetitle.png')\">Noir<br />
        <input type=\"radio\" name=\"color\" id=\"productColor7094817\" value=\"120\"
        onclick=\"roll_over('tshirtimage', 'http://image.spreadshirt.com/image-server/v1/products/$articleid/views/1,width=$imagesize,height=$imagesize,appearanceId=120.png/$imagetitle.png')\">Marron<br />
    ";
    The color code is found in the "value" setings of the radio inputs (i.e. 120 for brown) and then it is included in the url of the image

    <input type=\"radio\" name=\"color\" id=\"productColor$productid\" value=\"120\"
    onclick=\"roll_over('tshirtimage', 'http://image.spreadshirt.com/image-server/v1/products/$articleid/views/1,width=$imagesize,height=$imagesize,appearanceId=120.png/$imagetitle.png')\">Marron<br />

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    when you do this:
    function roll_over(img_name, img_src)
    {
    document[img_name].src = img_src;
    }

    You should also changed the <a href=\"\" onmouseover= image. It's still calling the black one.

    That's a guess I haven't looked too hard at this.
    Last edited by sunfighter; 09-07-2012 at 11:49 PM.


  •  

    Posting Permissions

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