PDA

View Full Version : JavaScript Remote Rollover

webcoda
05-01-2003, 09:40 PM
Hi,

You know how you can have a simple rollover on two images - 'A' changes to 'B' on mouseover. Well I was wondering if you could have: 'A' changes a remote image('C') to 'D' on mouseover.

Is that possible?? And how would I do it?

I've found a script which will allow me to have 'A' to 'B' which also changes 'C' to 'D' at the same time - but thats not what I want.

I hope you can understand what I'm trying to explain :)


Thanks in advance,
Glen




PS an example would be Tutorialforums.com (http://tutorialforums.com) with their little menu buttons at the top - I had a look at the script but its a text(not image) version of what I want.
jonirvine
05-02-2003, 09:05 PM
Hi,

Sure... that's easy to do. It's just a matter of changing the name the javascript references.

Here's an example (uses dreamweaver created javascript)


<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// -->
</script>
</head>
<body>

<p align="center">
<a href="test.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('changethis','','http://www.designition.co.uk/ebay/ironlord150.jpg',1)">
<img src="http://www.designition.co.uk/ebay/lemmings150.jpg" name="logo" border="0"></a>


<p align=center><img src="http://www.designition.co.uk/ebay/zarch150.jpg" name="changethis">

</body>
</html>


Note the bits I've made as red text... that's the reference to the image name in the javascript, and the image name within the name attribute of the one you wish to change.
webcoda
05-03-2003, 06:43 AM
Hey thanks a bunch for that code - it works like a charm! :)
jonirvine
05-03-2003, 10:19 AM
No worries.... like I said, it's Dreamweaver code anyway.
webcoda
05-03-2003, 05:32 PM
Hey, just one more thing - With the remote image that is switched on and off, well I want that image to fade in and out. For the other images I'm using:
style="filter:alpha(opacity=10)" onMouseOver="nereidFade(this,100,50,20)" onMouseOut="nereidFade(this,10,50,5)"

But thats activated on mouseover and since the mousepointer never goes over the remote image - how would I go about activating it? I had a look in the behaviours thing in DW but I couldn't really find anything that looked like it would work.

Any help would be much appreciated! :)

Glen
jonirvine
05-03-2003, 06:30 PM
is the page online? or can you put it online so i can see?
webcoda
05-03-2003, 06:48 PM
Have PMed you