SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mouseover Mouseclick Mouseout

    I'm trying to combine mouseactions on my site and am having trouble.

    My situation is...

    http://www.werbefoto-robold.de/werbung.html

    I have a row of icons that are just blocks of color. When you mouseover, they change to a little icon image, and mouseout return to the block of color. When you mouseclick, a larger image appears above.
    What I want to achieve is that after you mouseclick the little icon image will stay EVEN after you mouseclick on another image icon.

    The code I have so far is this...
    but what happens is after I have mouseclicked on one and then mouseclick on the next, the original one goes back to its original state. I'd like it to continue to keep its new state.

    var img=new Array();
    var di = document.images;
    var currOn = null;
    function Rollover(imgName, imgOut, imgOver, imgClick, imgClickOut)
    {
    if(imgClick == null) imgClick = imgOver;
    if(imgClickOut == null) imgClickOut = imgClick;

    var roll = new Object;

    roll.out = imgOut;
    roll.over = new Image();
    roll.over.src = imgOver;
    roll.click = new Image();
    roll.click.src = imgClick;
    roll.click_out = new Image();
    roll.click_out.src = imgClickOut;

    img[imgName] = roll;
    }
    function mOver(imgName)
    {
    di[imgName].src = (imgName != currOn) ? img[imgName].over.src : img[imgName].click.src;
    }
    function mOut(imgName)
    {
    di[imgName].src = (imgName != currOn) ? img[imgName].out : img[imgName].click_out.src;
    }
    function mClick(imgName)
    {
    if(currOn != null) di[currOn].src = img[currOn].out;
    currOn = imgName;
    di[currOn].src = img[currOn].click.src;
    }
    function mSelect(imgName)
    {
    mClick(imgName);
    mOut(imgName);
    }
    /*** End the rollover code ***/
    //-->
    </script>

    <script>
    <!--
    Rollover("brunner", "pix2/home.gif", "pix2/brunner_over.jpg", "pix2/brunner_clk.jpg");
    Rollover("pool", "pix2/home.gif", "pix2/pool_over.jpg", "pix2/pool_clk.jpg");
    Rollover("script","images/script_off.gif", "images/script_on.gif", "images/script_clk.gif");
    Rollover("links", "images/links_off.gif", "images/links_on.gif", "images/links_clk.gif");
    Rollover("special","images/special_off.gif", "images/special_on.gif","images/special_clk.gif");
    //-->
    </script>

    Is this making sense?
    Any suggestions or solutions?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Delete the following line:

    if(currOn != null) di[currOn].src = img[currOn].out;
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That does help. Thanks.

    However, now when I return to an already vistited icon, mouseout takes it back to its original state again.

    What can I do to fix that?

  4. #4
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That does help. Thanks.

    However, now when I return to an already vistited icon, mouseout takes it back to its original state again.

    What can I do to fix that?


Bookmarks

Posting Permissions

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