/    Sign up×
Community /Pin to ProfileBookmark

Rollover question

This is probably a pretty simple answer, for those of you who know what you’re doing… but it’s been giving me a headache for 2 days already, so please help!
Basically, I”m a graphic designer that has been given the assignment of revamping my company’s website. I’m using Dreamweaver to put this thing together, and I can understand the code somewhat (like I can understand spanish, but not speak it)… but I can’t figure out the problem. Here it is:
On a gallery page we have, I have a table with several preview images. When you roll over them, the image you’re on should change color, and back when you roll off. Along with that, there’s a larger box below that changes to a view of the full image. Now, the previews worked fine when i viewed it in IE. I added the larger window, and it changes with the images and back like it’s supposed to, but the preview boxes don’t change back to their “normal” selves.
Here’s a line for one button:
<a href=”javascript:;” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(‘truck’,”,’resources/truckpreview_on.jpg’,1);MM_swapImage(‘biglogo’,”,’resources/truck.jpg’,1)”><img src=”resources/truckpreview.jpg” width=”72″ height=”72″ name=”truck” border=”0″>

Note: Dreamweaver built this.

I’m scared. Somebody please help.

Thanks,
bre

to post a comment
JavaScript

10 Comments(s)

Copy linkTweet thisAlerts:
@jeep_manDec 09.2004 — Bre, I can help you.

You say this works well in IE but not Mozilla/Netscape?

It would be more helpful to see the functions that dreamweaver is calling in the line you posted.
Copy linkTweet thisAlerts:
@jeep_manDec 09.2004 — Oh! you say they just don't go back! sorry about that. I misunderstood. I still can help you.
Copy linkTweet thisAlerts:
@breauthorDec 09.2004 — I don't have another browser to try this out in.

I also think you're misunderstanding. For each button up top, there are 2 behaviors. One is that the preview img should dim when you're on it, and brighten when you move. This table I put in first. When I previewed it, it was perfect. Then I added the 2nd behavior, which is the full img popping up below and changing to another img when you mouse off. So, now when I preview, img below works perfectly, but the preview img only dims- it doesn't brighten again when you mouse off.

I'm confused since it worked fine before, but now that I added this 2nd behavior, something's gone awry.

Horribly awry.

Thank you!

I'm not sure what exactly functions are, so I have nothing else to show you.
Copy linkTweet thisAlerts:
@jeep_manDec 09.2004 — I understand. Unfortuatly, without the rest of the javascript, I can't help. Is this already on the web? If so, where can I view it, and if not, do you mind attaching the html file on your next post?
Copy linkTweet thisAlerts:
@breauthorDec 09.2004 — Oh my goodness... the whole thing? It's such a big ugly mess that I'm embarrassed. It's not online, so here it is.

Please don't fault me for the errors of my ways.

<html>

<head>

<title>Bates Container - Gallery</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">

<!--

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_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_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="#FFFFFF" text="#000000" onLoad="MM_preloadImages('resources/home_on.jpg','resources/mission_on.jpg','resources/history_on.jpg','resources/map_on.jpg','resources/gallery_on.jpg','resources/customers_on.jpg','resources/employees_on.jpg','resources/jobs_on.jpg','resources/contact_on.jpg','resources/mossbergpreview_on.jpg','resources/COLUMBIA-SINGLESpreview_on.jpg','resources/3-color-taterpreview_on.jpg','resources/jungle-dcpreview_on.jpg','resources/MICHILADApreview_on.jpg','resources/stubbspreview_on.jpg','resources/txstarnutpreview_on.jpg','resources/truckpreview_on.jpg','resources/ALAMO.jpg','resources/COLUMBIA-SINGLEs.jpg','resources/3-color-tater.jpg','resources/jungle-dc.jpg','resources/MICHILADA.jpg','resources/stubbs.jpg','resources/txstarnut.jpg','resources/truck.jpg','resources/mossberg.jpg')" link="#FFFFFF" alink="#FFFFFF" vlink="#CCCCCC">

<table width="800" border="0" height="600" cellpadding="0" cellspacing="0" name="main" align="center">

<tr>

<td height="90" width="800"><img src="resources/logo.jpg" width="129" height="82" align="left" border="0" name="Logo" vspace="0" hspace="0"></td>

</tr>

<tr>

<td height="21">

<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">

<tr>

<td width="87"><a href="/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home_off','','resources/home_on.jpg',1)" target="_self"><img src="resources/home_off.jpg" width="87" height="19" name="home_off" border="0"></a></td>

<td width="87"><a href="/mission.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mission_off','','resources/mission_on.jpg',1)"><img src="resources/mission_off.jpg" width="87" height="19" name="mission_off" border="0"></a></td>

<td width="87"><a href="/history.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('history_off','','resources/history_on.jpg',1)"><img src="resources/history_off.jpg" width="87" height="19" name="history_off" border="0"></a></td>

<td width="87"><a href="/map.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('map_off','','resources/map_on.jpg',1)"><img src="resources/map_off.jpg" width="87" height="19" name="map_off" border="0"></a></td>

<td width="87"><a href="/gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('gallery_off','','resources/gallery_on.jpg',1)"><img src="resources/gallery_off.jpg" width="87" height="19" name="gallery_off" border="0"></a></td>

<td width="87"><a href="/customers.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('customers_off','','resources/customers_on.jpg',1)"><img src="resources/customers_off.jpg" width="87" height="19" name="customers_off" border="0"></a></td>

<td width="87"><a href="/employees.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('employees_off','','resources/employees_on.jpg',1)"><img src="resources/employees_off.jpg" width="87" height="19" name="employees_off" border="0"></a></td>

<td width="87"><a href="/jobs.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('jobs_off','','resources/jobs_on.jpg',1)"><img src="resources/jobs_off.jpg" name="jobs_off" border="0" width="87" height="19"></a></td>

<td width="87"><a href="/contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact_off','','resources/contact_on.jpg',1)"><img src="resources/contact_off.jpg" name="contact_off" border="0" width="87" height="19"></a></td>

</tr>

</table>

</td>

</tr>

<tr>

<td height="254" bgcolor="#639EB1"> <br>

<table width="52%" border="7" cellspacing="4" cellpadding="0" height="68" align="center" bordercolor="#0F6979">

<tr>

<td><a href="javascript:;" onMouseOver="MM_swapImage('mossberg','','resources/mossbergpreview_on.jpg',1);MM_swapImage('biglogo','','resources/mossberg.jpg',1)"; onMouseOut="MM_swapImgRestore()"><img src="resources/mossbergpreview.jpg" width="72" height="72" name="mossberg" border="0"></a></td>

<td><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('alamo','','resources/ALAMOpreview_on.jpg');MM_swapImage('biglogo','','resources/ALAMO.jpg',1)"><img src="resources/ALAMOpreview.jpg" width="72" height="72" name="alamo" border="0"></a></td>

<td><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('columbia','','resources/COLUMBIA-SINGLESpreview_on.jpg',1);MM_swapImage('biglogo','','resources/COLUMBIA-SINGLEs.jpg',1)"><img src="resources/COLUMBIA-SINGLESpreview.jpg" width="72" height="72" name="columbia" border="0"></a></td>

<td><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('potatoes','','resources/3-color-taterpreview_on.jpg',1);MM_swapImage('biglogo','','resources/3-color-tater.jpg',1)"><img src="resources/3-color-taterpreview.jpg" width="72" height="72" name="potatoes" border="0"></a></td>

<td><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('jungle','','resources/jungle-dcpreview_on.jpg',1);MM_swapImage('biglogo','','resources/jungle-dc.jpg',1)"><img src="resources/jungle-dcpreview.jpg" width="72" height="72" name="jungle" border="0"></a></td>

<td><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('michiladas','','resources/MICHILADApreview_on.jpg',1);MM_swapImage('biglogo','','resources/MICHILADA.jpg',1)"><img src="resources/MICHILADApreview.jpg" width="71" height="73" name="michiladas" border="0"></a></td>

<td><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('stubbs','','resources/stubbspreview_on.jpg',1);MM_swapImage('biglogo','','resources/stubbs.jpg',1)"><img src="resources/stubbspreview.jpg" width="72" height="72" name="stubbs" border="0"></a></td>

<td><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nuts','','resources/txstarnutpreview_on.jpg',1);MM_swapImage('biglogo','','resources/txstarnut.jpg',1)"><img src="resources/txstarnutpreview.jpg" width="72" height="72" name="nuts" border="0"></a></td>

<td><a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('truck','','resources/truckpreview_on.jpg',1);MM_swapImage('biglogo','','resources/truck.jpg',1)"><img src="resources/truckpreview.jpg" width="72" height="72" name="truck" border="0"></a></td>

</tr>

</table>

<br>

<table width="20%" border="7" cellspacing="4" cellpadding="4" align="center" bordercolor="#0F6979" height="274">

<tr>

<td bgcolor="#FFFFFF" width="539">

<div align="center"><img src="resources/BatesFancyLogo.jpg" width="252" height="249" align="middle" name="biglogo"></div>

</td>

</tr>

</table>

<p>&nbsp;</p>

</td>

</tr>

<tr bgcolor="#0F6979">

<td height="9"><img src="resources/corrugated.gif" width="800" height="9" align="top" vspace="0" hspace="0" name="corrugated"></td>

</tr>

<tr bgcolor="#0F6979">

<td height="33">

<div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF"><b><font size="1"><a href="/index.html">Home</a>

&#149; <a href="/mission.html">Mission</a> &#149; <a href="/history.html">History</a>

&#149; <a href="/map.html">Map</a> &#149; <a href="/gallery.html">Gallery</a>

&#149; <a href="/customers.html">Customers</a> &#149; <a href="/employees.html">Employees</a>

&#149; <a href="/jobs.html">Jobs</a> &#149; <a href="/contact.html">Contact</a></font></b></font></div>

</td>

</tr>

</table>

</body>

</html>
Copy linkTweet thisAlerts:
@jeep_manDec 09.2004 — This will work, I'll look at this and let you know the answer by the end of the day.
Copy linkTweet thisAlerts:
@breauthorDec 09.2004 — thanks.

another question:

when i preview in the browser, all my imgs with text (buttons, tagline, logo, etc) are distorted. The fonts I'm using aren't narrow serifs or anything (Caslon and Avant Garde), so I don't know why they're doing that. I've tried to save them all several ways (as jpgs, gifs, both from photoshop and illustrator). I'm creating them all from Illustrator originally.

Is this a problem just in the preview stage that will be resolved when I actually make the site live? I've made these anti-aliasing, high quality, everything I can think of...

Thanks again!

bre
Copy linkTweet thisAlerts:
@jeep_manDec 09.2004 — If the images are distorted when you look at the page in IE, then they will be distorted when it goes live.

You'll want to create your images for the exact size you want them to be in the page. Then, don't let dreamweaver resize the images. If the image is the size you want, there is no need for the height and width properties in the <img> tag.

That's probably why they are distorted.
Copy linkTweet thisAlerts:
@breauthorDec 09.2004 — Ah! My hero!

Thanks, smart man!
Copy linkTweet thisAlerts:
@breauthorDec 10.2004 — bump.

anyone? I still have no clue on how to fix this one.

ps-sorry about the long code lines w/no breaks... annoying, yes. I apologize.

bre
×

Success!

Help @bre spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...