PDA

Click to See Complete Forum and Search --> : Rollover graphic in different location than original

moondance
05-17-2003, 09:49 AM
I have a front page with a menu down the middle. This menu has rollover graphics, made using dreamweaver.

What I want is when the user puts their mouse over the rollover in the center, another graphic will appear to the left or right of the central menu.

I have seen before some code where 2 rollover images can be displayed using one mouseover event, but i can't remember where i found it. Also the third image that appears to the left or right must not be in the same space on the page as the central rollover.

Anyone know how to do this?

Cheers
:) :)
khalidali63
05-17-2003, 09:56 AM
Take a look at this link..it will point you in right direction..

http://68.145.35.86/skills/javascripts/DisplayTwoImagesClickOver.html
Mr J
05-17-2003, 09:59 AM
Please try the following



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="JavaScript">
var Images = new Array("pic1.jpg","pic2.jpg","pic3.jpg") // list images to preload
var preloadImages=new Array() // preloads images
for (i=0;i<=Images.length-1;i++) {
preloadImages[i]=new Image()
preloadImages[i].src=Images[i]
}

LastID = ""

function ON(id){
(LastID != id?document.getElementById(id).src = "pic2.jpg":"")
document.getElementById(id+"a").src= "pic10.jpg"
}

function OFF(id){
(LastID != id?document.getElementById(id).src = "pic1.jpg":"")
document.getElementById(id+"a").src= "pic12.jpg"
}

function ACTIVE(id){
document.getElementById(id).src = "pic3.jpg"
if (LastID != ""){
(LastID != id?document.getElementById(LastID).src = "pic1.jpg":"")
}
LastID = id
}
// -->
</script>
</HEAD>
<BODY>

<P><a href="#null" onMouseOver="ON('image1');" onMouseOut="OFF('image1')" onClick="ACTIVE('image1')"><img src="pic1.jpg" border="0" name="image1"></a> <img src="pic1.jpg" border="0" name="image1a">

<P><a href="#null" onMouseOver="ON('image2');" onMouseOut="OFF('image2')" onClick="ACTIVE('image2')"><img src="pic1.jpg" border="0" name="image2"></a> <img src="pic1.jpg" border="0" name="image2a">

<P><a href="#null" onMouseOver="ON('image3');" onMouseOut="OFF('image3')" onClick="ACTIVE('image3')"><img src="pic1.jpg" border="0" name="image3"></a> <img src="pic1.jpg" border="0" name="image3a">

<P><a href="#null" onMouseOver="ON('image4');" onMouseOut="OFF('image4')" onClick="ACTIVE('image4')"><img src="pic1.jpg" border="0" name="image4"></a> <img src="pic1.jpg" border="0" name="image4a">

<P><a href="#null" onMouseOver="ON('image5');" onMouseOut="OFF('image5')" onClick="ACTIVE('image5')"><img src="pic1.jpg" border="0" name="image5"></a> <img src="pic1.jpg" border="0" name="image5a">

<P><a href="#null" onMouseOver="ON('image6');" onMouseOut="OFF('image6')" onClick="ACTIVE('image6')"><img src="pic1.jpg" border="0" name="image6"></a> <img src="pic1.jpg" border="0" name="image6a">

</BODY></HTML>
brendandonhue
05-17-2003, 10:05 AM
Instead of onmouseover changing an image, have it trigger a function that will change the images.

Example
You want it to change file1.jpg to file2.jpg AND file3.jpg to file4.jpg.
<img src="file3.jpg" name="file3">
<img src="file1.jpg" name="file1" onclick="javascript:rollover()">

<script language="javascript">
function rollover()
{
document.file1.src = "file2.jpg";
document.file3.src = "file4.jpg"
}
</script>
moondance
05-17-2003, 12:37 PM
khalidali63 ...that is exactly what i want to happen. Problem is i've already used the onmouseover and onmouseout for the central rollover. I don't know much javascript but i've been trying to combine them and they're not working.

Heres the code i have so far:

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="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 bgcolor="#000000" text="#000000" background="bbb.jpg">
<table width="1023" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="320" height="3"></td>
<td width="2"></td>
<td width="1"></td>
<td width="308"></td>
<td width="1"></td>
<td width="1"></td>
<td width="2"></td>
<td width="388"></td>
</tr>
<tr>
<td height="177"></td>
<td></td>
<td colspan="3" valign="top"><img src="am.jpg" width="310" height="177"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="27"></td>
<td></td>
<td></td>
<td colspan="4" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','mouseover7.jpg',1)"><img name="Image1" border="0" src="mouseoff7.jpg" width="312" height="27"></a></td>
<td></td>
</tr>
<tr>
<td height="31"></td>
<td></td>
<td></td>
<td colspan="2" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','mouseover6.jpg',1)"><img name="Image2" border="0" src="mouseoff6.jpg" width="309" height="31"></a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="36"></td>
<td></td>
<td colspan="3" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','mouseover5.jpg',1)"><img name="Image3" border="0" src="mouseoff5.jpg" width="310" height="36"></a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="42"></td>
<td></td>
<td colspan="2" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','mouseover4.jpg',1)"><img name="Image8" border="0" src="mouseoff4.jpg" width="309" height="42"></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="48"></td>
<td colspan="5" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','mouseover3.jpg',1)"><img name="Image5" border="0" src="mouseoff3.jpg" width="313" height="48"></a></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="58"></td>
<td></td>
<td colspan="4" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','mouseover2.jpg',1)"><img name="Image6" border="0" src="mouseoff2.jpg" width="311" height="58"></a></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="68"></td>
<td></td>
<td></td>
<td colspan="2" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','mouseover1.jpg',1)"><img name="Image7" border="0" src="mouseoff1.jpg" width="309" height="68"></a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="515"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>

The top scripts are the rollover scripts generated by dreamweavers built in rollover generator.

All the rest really shows is 7 graphics, positioned above the previous, in the center of the page. When the user puts their mouse over, say, the fifth graphic down, it turns into a slightly different image. This works fine, but i can't work out how to make another image appear, which can become visible either side of the central column of rollovers, as i've already used the mouseover event.

I tried substituting the rollovers ...
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','mouseover2.jpg',1)"><img name="Image6" border="0" src="mouseoff2.jpg"</a>
... instead of where you had typed the text, but it wouldn't work.

Any advice is appreciated, this is doing my nut


:(
khalidali63
05-17-2003, 01:00 PM
Can you post a link to the page where you have all the code...?
Mr J
05-17-2003, 02:29 PM
try this out.

This is only a draft as your table layout is a bit of a nightmare to follow :)

I have added 2 lines to the script and added images to the right.

See how it goes



<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="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;

document.getElementById(x.name+"a").src= "" //ADDED

}

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

document.getElementById(x.name+"a").src= "pic10.jpg" // ADDED

}
//-->
</script>
</head>

<body bgcolor="#000000" text="#000000" background="bbb.jpg">
<table width="1023" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="320" height="3"></td>
<td width="2"></td>
<td width="1"></td>
<td width="308"></td>
<td width="1"></td>
<td width="1"></td>
<td width="2"></td>
<td width="388"></td>
</tr>
<tr>
<td height="177"></td>
<td></td>
<td colspan="3" valign="top"><img src="am.jpg" width="310" height="177"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="27"></td>
<td></td>
<td></td>
<td colspan="4" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','mouseover7.jpg',1)"><img name="Image1" border="0" src="mouseoff7.jpg" width="312" height="27"></a></td>
<td><img src="pic1.jpg" border="0" name="Image1a"></td>
</tr>
<tr>
<td height="31"></td>
<td></td>
<td></td>
<td colspan="2" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','mouseover6.jpg',1)"><img name="Image2" border="0" src="mouseoff6.jpg" width="309" height="31"></a></td>
<td><img src="pic1.jpg" border="0" name="Image2a"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="36"></td>
<td></td>
<td colspan="3" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','mouseover5.jpg',1)"><img name="Image3" border="0" src="mouseoff5.jpg" width="310" height="36"></a></td>
<td><img src="pic1.jpg" border="0" name="Image3a"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="42"></td>
<td></td>
<td colspan="2" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','mouseover4.jpg',1)"><img name="Image8" border="0" src="mouseoff4.jpg" width="309" height="42"></a></td>
<td><img src="pic1.jpg" border="0" name="Image8a"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="48"></td>
<td colspan="5" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','mouseover3.jpg',1)"><img name="Image5" border="0" src="mouseoff3.jpg" width="313" height="48"></a></td>
<td><img src="pic1.jpg" border="0" name="Image5a"></td>
<td></td>
</tr>
<tr>
<td height="58"></td>
<td></td>
<td colspan="4" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','mouseover2.jpg',1)"><img name="Image6" border="0" src="mouseoff2.jpg" width="311" height="58"></a></td>
<td><img src="pic1.jpg" border="0" name="Image6a"></td>
<td></td>
</tr>
<tr>
<td height="68"></td>
<td></td>
<td></td>
<td colspan="2" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','mouseover1.jpg',1)"><img name="Image7" border="0" src="mouseoff1.jpg" width="309" height="68"></a></td>
<td><img src="pic1.jpg" border="0" name="Image7a"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="515"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
khalidali63
05-17-2003, 03:26 PM
Add a div tag in the page and position it where you want this second image to appear.

<div id="image_2" style="left:200pt;top:150pt;"></div>

Now that you have the possiblelocationfor the second image set, put this method in the javascript section any where is good.

function swapSecondImg(url){
var divEl = document.getElementById("image_2");
//now add second image
var img = document.createElement("img");
img.setAttribute("src",url);
divEl.appendChild(img);
}

in the above method pass the image url as parameter.presuming you have a folder named images that has al of the images and the image you want to appear is "hommer.gif"
add the above method in the onmouse over event call in your code. for eg.

onMouseOver="MM_swapImage('Image1','','mouseover7.jpg',1);swapSecondImg('images/hommer.giof');">

this should take care of it.
moondance
05-18-2003, 10:51 AM
thats one step away from perfect khalidali, Your method works great.

At the moment the script you gave me keeps the second pic (to the side of the stairs) visible when they take their mouseoff the stair, and i was wondering if there was something that could be added to the onmouseout event in the same <a> tag that would make it disappear or empty the <div> tag so that it appears to disappear?


thanks for your help
moony
khalidali63
05-18-2003, 11:17 AM
yes...onmouseout just hide the div in which we put the second image
that will be done in this way..

If remember correctly div id was
div_1 ( or whatever the div id you may have)


Add the following line in the on mouseout event methods of yours.

document.getElementById("div_1").style.visiblity="hidden"

and make sure that you make the dive visible in the onmouseover method calls

document.getElementById("div_1").style.visiblity="visible"
moondance
05-18-2003, 11:52 AM
I'm not sure if i'm puttting this in the right place:

note: Image_15 is the name of the <DIV> tag

<a href="#" onMouseOut= "MM_swapImgRestore()"; document.getElementById("Image_15").style.visiblity="hidden" onMouseOver="MM_swapImage('Image7','','all%20folders/ntlpage/stairlite1.jpg',1);swapSecondImg('ENJOY.jpg'); document.getElementById("Image_15").style.visiblity="visible"><img name="Image7" border="0" src="all%20folders/ntlpage/stairdark1.jpg"></a>

where abouts should i be putting it? dreamweavers highlighted that line of code saying theres something wrong with it because it contains a duplicate attribute.

:confused: