Change onMouseover Event Question

theflyingminstr · 07-17-2009, 06:42 PM

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

ckeyrouz · 07-17-2009, 06:55 PM

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

theflyingminstr · 07-17-2009, 07:13 PM

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

ckeyrouz · 07-17-2009, 08:03 PM

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 );
}

theflyingminstr · 07-17-2009, 08:30 PM

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

ckeyrouz · 07-17-2009, 08:35 PM

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 );
}

theflyingminstr · 07-17-2009, 08:48 PM

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