Hello and welcome to our community! Is this your first visit?
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
    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:
    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

    $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;
    <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>
        <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. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Thanked 996 Times in 993 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