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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change onMouseover Event Question

    Hi I'm using the script below in conjunction with this pop-over script (http://www.dynamicdrive.com/dynamicindex1/popit.htm).

    I wanted to know if it's possible to change the onMouseover array number every time a different image is chosen.

    <img alt="" onMouseover="showmenu(event,linkset[0], '115px')" onMouseout="delayhidemenu()" name="imgColor" src="images/flower-yellow.jpg" />

    Ex: onMouseover="showmenu(event,linkset[0], '115px')" --> onMouseover="showmenu(event,linkset[1], '115px')" --> onMouseover="showmenu(event,linkset[2], '115px')" --> etc..

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    
    <style type="text/css">
    
    .left-container{float:left;}
    .right-container{float:right;}
    .color-box{border: 1px solid ; width: 50px; height: 50px; margin-bottom:20px;}
    #blue{background-color: rgb(51, 51, 255);}
    #red{background-color: rgb(255, 51, 51);}
    #purple{background-color: rgb(204, 51, 255);}
    #yellow{background-color: rgb(255, 204, 51);}
    
    </style>
    
    <script language=javascript type='text/javascript'>
    
    var aryImages = new Array();
    
    aryImages[1] = "http://www.flipoutdesign.com/images/flower-blue.jpg";
    aryImages[2] = "http://www.flipoutdesign.com/images/flower-red.jpg";
    aryImages[3] = "http://www.flipoutdesign.com/images/flower-purple.jpg";
    aryImages[4] = "http://www.flipoutdesign.com/images/flower-yellow.jpg";
    
    for (i=0; i < aryImages.length; i++) {
    	var preload = new Image();
    	preload.src = aryImages[i];
    }
    
    function swap(imgIndex, imgTarget) {
    	document[imgTarget].src = aryImages[imgIndex];
    }
    
    
    </script>
    
    </head>
    
    <body>
    
    <div class="right-container">
    	<img alt="" onMouseover="showmenu(event,linkset[0], '115px')" onMouseout="delayhidemenu()" name="imgColor" src="images/flower-yellow.jpg" />
    </div>
    
    <div class="left-container">
    	<div class="color-box" id="blue" onclick="swap(1, 'imgColor')"></div>
    	<div class="color-box" id="red" onclick="swap(2, 'imgColor')"></div>
    	<div class="color-box" id="purple" onclick="swap(3, 'imgColor')"></div>
    	<div class="color-box" id="yellow" onclick="swap(4, 'imgColor')"></div>
    </div>
    
    
    
    </body>
    
    </html>
    Thanks
    Last edited by theflyingminstr; 07-17-2009 at 07:49 PM.

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    You can set a globat variable for the index of the linkSet array and name it for example linkSetIdx and change your html code from this:

    Code:
    <img alt="" onMouseover="showmenu(event,linkset[0], '115px')" onMouseout="delayhidemenu()" name="imgColor" src="images/flower-yellow.jpg" />
    to this:

    Code:
    <img alt="" onMouseover="showMenuFn(event, '115px')" onMouseout="delayhidemenu()" name="imgColor" src="images/flower-yellow.jpg" />
    in your script write this method:
    Code:
      function showMenuFn(zEvent,zSize )
      {
         showmenu(zEvent,linkset[linkSetIdx], zSize );
       }
    
    // do not forget to declare the global variable linkSetIdx  and to change its //value whenever you have to do and use it inside the function

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi ckeyrouz, thanks so much. Sorry, I'm still a bit newbish to the ways of Javascript. How exactly do I call the function to change the event to the new array number?

    EDIT: Don't laugh but I'm trying this, is this what you meant?

    var showmenu2;
    function showMenuFn(zEvent,zSize )
    {
    showmenu(zEvent,linkset[0], zSize );
    showmenu2(zEvent,linkset[1], zSize );
    }

    Call: < a href="#" onclick="showMenuFn(showmenu2)">Link to change</a>

    Thanks
    Last edited by theflyingminstr; 07-17-2009 at 08:37 PM.

  • #4
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    The calling should be like this:

    Code:
    < a href="#" onclick="showMenuFn(showmenu2,'115px')">Link to change</a>
    and your script like this:
    Code:
    function showMenuFn(zEvent,zSize )
    {
    showmenu(zEvent,linkset[0], zSize );
    showmenu(zEvent,linkset[1], zSize );
    }

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks. I'm assuming you meant:

    Code:
    <a href="#" onclick="showMenuFn(showmenu2,'115px')">Link to change</a>
    Code:
    function showMenuFn(zEvent,zSize )
    {
    showmenu(zEvent,linkset[0], zSize );
    showmenu2(zEvent,linkset[1], zSize );
    }
    I tried that and it's not changing the linkset..

    Maybe I'll post a link to the entire code so you can check it out if you have time.

    Thanks

  • #6
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    excuse me you should do this:

    Code:
    <a href="#" onclick="showMenuFn(event,'115px')">Link to change</a>
    and you should keep the method showMenuFn the way I wrote it I mean like this:
    Code:
    function showMenuFn(zEvent,zSize )
    {
    showmenu(zEvent,linkset[0], zSize );
    showmenu(zEvent,linkset[1], zSize );
    }

  • #7
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried that but now it just defaults to the one it's supposed to change to..

    Here are the links: http://tab-bot.com/change_linkset.html & http://tab-bot.com/pop_out.js

    Click a color and then hover over the flower.

    Thanks


  •  

    Posting Permissions

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