Help - Search - Members - Calendar
Full Version: Prob w/ mm_swapimgrestore
Weborum Webmaster Forum > Web Page Design > Javascript
boltorg
Mar 31 2005, 05:06 PM
Having a little trouble here getting this to work... I'm trying to get an image swap to occur when a person clicks a link on the side... such as counter-tops... when I rolloff of the image, of course,

You can see my dillema, here, when you click on Counter-Tops the corresponding image to the right shows up, but when on mouse out it disappears... but I want to keep the other on mouse out to work with the image link swapping...

Here's the addy..

http://avl.etsu.edu/digm2850/spring2004/St...tWork/laddsccc/


Here's the code..

<html>
<head>
<title>Ladd's Cabinets & Custom Counter-Tops</title>

<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
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 && d.getElementById) x=d.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];}
}
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];}}
}

//-->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body ######="MM_preloadImages('/images/nav_counter.jpg','images/Layoutbuttonchange_13.jpg','images/Layoutbuttonchange_17.jpg','images/Layoutbuttonchange_19.jpg','images/Layoutbuttonchange_21.jpg','images/Layoutbuttonchange_23.jpg','images/Layoutbuttonchange_25.jpg','images/nav_home.jpg')"
bgcolor="#C8CBD4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Layout4.psd) -->
<p>&nbsp;</p>
<table id="Table_01" width="701" height="501" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="images/Layout4_01.jpg" width="700" height="6" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="index.html"><img src="images/Layout4_02.jpg" alt="Ladd's Cabinets &amp; Custom Counter-tops" width="414" height="107" border="0"></a></td>
<td colspan="3">
<img src="images/Layout4_03.jpg" width="277" height="107" alt=""></td>
<td rowspan="18">
<img src="images/Layout4_04.jpg" width="9" height="494" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="107" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Layout4_05.jpg" width="153" height="55" alt=""></td>
<td background="images/Layout4_06.jpg">&nbsp; </td>
<td colspan="3" background="images/Layout4_07.jpg">&nbsp; </td>
<td background="images/Layout4_08.jpg">&nbsp; </td>
<td rowspan="15">
<img src="images/Layout4_09.jpg" width="20" height="332" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3"><img src="images/nav_home.jpg" name=navigation width="145" height="57"></td>
<td colspan="2" rowspan="3" background="images/Layout4_11.jpg">&nbsp; </td>
<td rowspan="14" background="images/Layout4_12.jpg">&nbsp; </td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<th><a onMouseOver="MM_swapImage('nav_home','','images/Layoutbuttonchange_13.jpg',1)"
href="home.htm" target="main"><img name=nav_home src="images/Layout4_13.jpg" alt="Home" width="153" height="22" border="0"></a></th>
<td>
<img src="images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Layout4_14.jpg" width="153" height="22" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td rowspan="11" background="images/Layout4_15.jpg">&nbsp; </td>
<td colspan="3" rowspan="11" background="images/Layout4_16.jpg"><p align="center"><iframe name="main" src="home.htm" scrolling="yes" allowtransparency frameborder="0" width="446" height="247"></iframe></p>
</td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td><a onMouseOver="MM_swapImage('nav_counter','','images/Layoutbuttonchange_17.jpg',1)"
onMouseOut="MM_swapImgRestore('navigation','','images/nav_home.jpg',1);" onMouseDown="MM_swapImage('navigation','','images/nav_counter.jpg',1)"
href="counter.htm" target="main"><img src="images/Layout4_17.jpg" width="153" height="22" alt="Counter-tops" border="0" name=nav_counter></a></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Layout4_18.jpg" width="153" height="20" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td><a onMouseOver="MM_swapImage('nav_cabinets','','images/Layoutbuttonchange_19.jpg',1)"
onMouseOut=MM_swapImgRestore()
href="cabinets.htm" target="main">
<img src="images/Layout4_19.jpg" width="153" height="22" alt="Cabinets" border="0" name=nav_cabinets></a></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Layout4_20.jpg" width="153" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td><a onMouseOver="MM_swapImage('nav_portfolio','','images/Layoutbuttonchange_21.jpg',1)"
onMouseOut=MM_swapImgRestore()
href="portfolio.html">
<img src="images/Layout4_21.jpg" width="153" height="22" alt="Portfolio" border="0" name=nav_portfolio></a></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Layout4_22.jpg" width="153" height="22" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td><a onMouseOver="MM_swapImage('nav_about','','images/Layoutbuttonchange_23.jpg',1)"
onMouseOut=MM_swapImgRestore()
href="about.html">
<img src="images/Layout4_23.jpg" width="153" height="22" alt="About" border="0" name=nav_about></a></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Layout4_24.jpg" width="153" height="20" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td><a onMouseOver="MM_swapImage('nav_contact','','images/Layoutbuttonchange_25.jpg',1)"
onMouseOut=MM_swapImgRestore()
href="contact.html">
<img src="images/Layout4_25.jpg" width="153" height="22" alt="Contact" border="0" name=nav_contact></a></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/Layout4_26.jpg" width="153" height="95" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td background="images/Layout4_27.jpg">&nbsp; </td>
<td colspan="3" background="images/Layout4_28.jpg">&nbsp; </td>
<td colspan="2" rowspan="2" background="images/Layout4_29.jpg">&nbsp; </td>
<td>
<img src="images/spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Layout4_30.jpg" width="35" height="20" alt=""></td>
<td colspan="3">
<img src="images/Layout4_31.jpg" width="446" height="20" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="153" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="35" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="110" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="116" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="220" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
leo
Mar 31 2005, 06:41 PM
hey there boltorq smile.gif

this would best suited to the javascript forum, where i'll move it to. Unfortunately i'm not a javascript person so can't offer you advice but i'm sure someone will smile.gif
Willy Duitt
Mar 31 2005, 08:11 PM
I'm quite adept with javascript but I refuse to mess with that Mickey Mouse MM_ Dreamweaver generated code... weirdsmiley.gif

If you can explain exactly what it is you are trying to do I will try to write you a script if I already do not have an example in my archives... However, I can not understand your post... You mention onclick but I do not see an onclick event anywhere within the codes you posted... Additionally, an anchor is NOT an anchor without an HERF (it will not even show a pointer when moused over) so I do not even know what is happening there...

As I stated, please fully explain yourself and I will see what I can do...

.....Willy
boltorg
Mar 31 2005, 08:22 PM
basically i want the link image to change on mouse over... when clicked (MouseDown) I want the corresponding link, such as counter-tops, to display to the right...

The problem I'm having is that when you click on the link the image will display to the right (counter-tops Image) but on mouseout, the image will restore...

I want the link image to restore but not the one to the right
Willy Duitt
Mar 31 2005, 08:47 PM
QUOTE(boltorg @ Mar 31 2005, 03:22 PM)
basically i want the link image to change on mouse over... when clicked (MouseDown) I want the corresponding link, such as counter-tops, to display to the right...

The problem I'm having is that when you click on the link the image will display to the right (counter-tops Image) but on mouseout, the image will restore...

I want the link image to restore but not the one to the right
[right][snapback]25589[/snapback][/right]


You're telling it in your onmouseout to swap that navigation image back to the home image right here highlighted in red:

QUOTE
<td><a onMouseOver="MM_swapImage('nav_counter','','images/Layoutbuttonchange_17.jpg',1)"
      onMouseOut="MM_swapImgRestore('navigation','','images/nav_home.jpg',1);" onMouseDown="MM_swapImage('navigation','','images/nav_counter.jpg',1)"
      href="counter.htm" target="main"><img src="images/Layout4_17.jpg" width="153" height="22" alt="Counter-tops" border="0" name=nav_counter></a></td>
  <td>


In this instance, the button name is nav_counter and that is what your onmouseout swapImgRestore function should be targetting as you have done with the onmouseover...

QUOTE
onMouseOver="MM_swapImage('nav_counter','','images/Layoutbuttonchange_17.jpg',1)"


That will fix the problem you asked about but is still not going to address the problem that once you click and load the counter page into the iframe, BOTH the home and counter buttons will be showing the lighted button image... To fix that, you will need to also call another function onmousedown to swap whichever button currently is displaying the lighted image... This is not so easy to fix with the codes you are currently using... It's not difficult, but will need to take an entirely different approach than that what you are using...

.....Willy
boltorg
Mar 31 2005, 09:28 PM
thanks...

I just trashed the onmouseover images... too much work for something stupid...

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.