...

View Full Version : 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..


<!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:


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

to this:



<img alt="" onMouseover="showMenuFn(event, '115px')" onMouseout="delayhidemenu()" name="imgColor" src="images/flower-yellow.jpg" />
in your script write this method:


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:


< a href="#" onclick="showMenuFn(showmenu2,'115px')">Link to change</a>

and your script like this:


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:


<a href="#" onclick="showMenuFn(showmenu2,'115px')">Link to change</a>


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:


<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:

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum