PDA

View Full Version : Integrating 2 scripts



neocortex
06-05-2005, 10:58 AM
Hello! i'm kinda new to javascript, i tried to integrate 2 scripts but it doesnt seem to be working. I have that anylink-script and rollover script created by photoshop, i need to put together these 2 things:


<a href="#" onmouseover="changeImages('disain_04', 'images/disain_04-over.gif'); return true;" onmouseout="changeImages('disain_04', 'images/disain_04.gif'); return true;">

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">

I tried myself, but the onmouseout section didn't work anymore.. any1 would like to help me please and put them together? :)

Thanks! btw, the dynamicdrive site and this forum just rocks... i know this place for 3 years, but i registered today

neocortex
06-05-2005, 04:34 PM
So uhm... anyone??

jscheuer1
06-05-2005, 05:11 PM
Hard to test without more code to go on and, without knowing what you want to happen when this bad boy gets clicked, makes it hard to predict if this will accomplish all your aims but, this should work:


<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'anylinkmenu1');changeImages('disain_04', 'images/disain_04-over.gif'); return true;" onmouseout="changeImages('disain_04', 'images/disain_04.gif'); return true;">

neocortex
06-05-2005, 05:43 PM
This almost works, thx... but the onmouseout part doesnt work...

check the site, http://www.usnfclan.com/sunstudio/disain.html

the first button from the left, if u move ur mouse over, it loads the onmouseover, but if u move ur mouse out, it doesnt change, it is still the mouseover img. Maybe i should post the full code, well here it is (deleting some unnessesery things):


<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
disain_02_over = newImage("images/disain_02-over.gif");
disain_04_over = newImage("images/disain_04-over.gif");
disain_06_over = newImage("images/disain_06-over.gif");
disain_08_over = newImage("images/disain_08-over.gif");
disain_10_over = newImage("images/disain_10-over.gif");
disain_12_over = newImage("images/disain_12-over.gif");
disain_14_over = newImage("images/disain_14-over.gif");
disain_16_over = newImage("images/disain_16-over.gif");
estonia_01_over = newImage("images/estonia_01-over.gif");
russia_01_over = newImage("images/russia_01-over.gif");
preloadFlag = true;
}
}

// -->
</script>
<script type="text/javascript" src="anylink.js"></script>
<style>
<!--

.anylinkcss{
position:absolute;
visibility: hidden;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: #E9FECB;
width: 205px;
}

.anylinkcss a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

.anylinkcss a:hover{ /*hover background color*/
background-color: black;
color: white;
}
}

-->
</style>
</head>

<body bgcolor="#CAC193" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'anylinkmenu1');changeImages('disain_02', 'images/disain_02-over.gif'); return true;" onmouseout="changeImages('disain_02', 'images/disain_02.gif'); return true;">

<img name="disain_02" src="images/disain_02.gif" width="97" height="14" border="0" alt=""></a></td>
<td><img src="images/disain_joon.gif" width="1" height="14" alt=""></td>
<td>
<a href="#" onmouseover="changeImages('disain_04', 'images/disain_04-over.gif'); return true;" onmouseout="changeImages('disain_04', 'images/disain_04.gif'); return true;">
<img name="disain_04" src="images/disain_04.gif" width="85" height="14" border="0" alt=""></a></td>
<td><img src="images/disain_joon.gif" width="1" height="14" alt=""></td>

<p>

<!--1st anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Anchor Link</a>

<div id="anylinkmenu1" class="anylinkcss">

<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>

</div>

<!--2nd anchor link and menu -->

<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')">Anchor Link 2</a>

<div id="anylinkmenu2" class="anylinkcss" style="width: 150px; background-color: lightyellow">

<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://www.google.com">Google</a>
<a href="http://news.bbc.co.uk">BBC News</a>

</div>

the link nr. 2 is the "Avaleht"; i left the 4 to show u the original

neocortex
06-05-2005, 08:44 PM
k, my friend told me to remove the middle "return true;", but now it doesnt work either, the onmosueout thingy:


<a href="#" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'anylinkmenu1'); changeImages('disain_02', 'images/disain_02-over.gif'); return true;" onmouseout="changeImages('disain_02', 'images/disain_02.gif'); return true;">

jscheuer1
06-05-2005, 09:52 PM
The problem is that the anylink.js script reassigns new events to onmouseover and onmouseout on the fly depending upon other events. It is not enough to disrupt the rollover but, it does disrupt the rollout. I guess you could try using the image rollover events for the image tag ex:
<a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, 'anylinkmenu1')">

<img name="disain_02" onmouseover="changeImages('disain_02', 'images/disain_02-over.gif'); return true;" onmouseout="changeImages('disain_02', 'images/disain_02.gif'); return true;" src="images/disain_02.gif" width="97" height="14" border="0" alt=""></a>Worth a shot. If that doesn't get it we will need to write some custom script.

neocortex
06-06-2005, 05:29 PM
Omg, THX John :D i would kiss you, that fixed my problem, and thanks again :)