NamePros
Welcome, Guest! Ready to make a name for yourself in the domain business? We welcome both the hobbyist and professional domainer to join the discussion as part of the NamePros community.

Click here to create your profile to start earning reputation for posting, and trader ratings for buying & selling in our free e-marketplace. Build your trader rating with each successful sale. Our system has tracked over 100,000 sales and counting!
FAQ & TOS Register Search Today's Posts Mark Forums Read

Go Back   NamePros.com > Website Development Discussion Forums > Programming
Reload this Page Help Needed With Javascript From Adobe Imageready (Rollovers)

Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics.

Advanced Search


Closed Thread
 
LinkBack Thread Tools
Old 06-14-2005, 02:09 PM THREAD STARTER               #1 (permalink)
Senior Member
 
thetzfreak's Avatar
Join Date: Nov 2004
Posts: 1,129
thetzfreak is just really nicethetzfreak is just really nicethetzfreak is just really nicethetzfreak is just really nice
 

Help Needed With Javascript From Adobe Imageready (Rollovers)

Hi.

I'm making a site for photography. I made an imageready file with three thumbnails, and for each a rollover effect that when mouse rolled over one of the three thumbnail pictures, a larger version of the pictures appears by their side (remote rollover). Then, I saved the document as Optimized (Save Optimized As) and saved the html file. I then opened the html file in frontpage, tested it, and everything worked. What I want to do is to put this small "album" into a larger website, a template I already have.

So, I put all the html (including the script) from the plain album html and placed it in the proper (hopefully) place in my template. Everything needed for the head is in the head, and everything in the body is in the body. I see all of my pictures clearly, but the rollover doesn't work! It looks normal at first glance, but when I put my cursor over an image, it doesn't change anything. The cursor just changes to the link cursor (the one with the hand). What am I doing wrong? I tried rearranging and taking different parts of the html many times, but the problem still occurs.

I don't know if you guys need the code for the imageready html file, but here it is anyways. And, I understand that you guys don't have the pictures, but I think that they are not the problem.

(This is the code that works perfectly, but when placed in template doesn't)
Code:
<html>
<head>
<title>Art Rollovers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Art Rollovers.psd) -->
<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) {
		Art_Rollovers_Layer_1_over = newImage("images/Art-Rollovers_Layer-1-over.gif");
		Art_Rollovers_Layer_1_over012 = newImage("images/Art-Rollovers_Layer-1-ov-12.gif");
		Art_Rollovers_Layer_1_over013 = newImage("images/Art-Rollovers_Layer-1-ov-13.gif");
		preloadFlag = true;
	}
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Art Rollovers.psd) -->
<table id="Table_01" width="863" height="384" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="8">
			<img src="images/Art-Rollovers_01.gif" width="862" height="18" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/Art-Rollovers_02.gif" width="232" height="1" alt=""></td>
		<td rowspan="2">
			<a href="#"
				onmouseover="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-over.gif'); return true;"
				onmouseout="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-10.gif'); return true;"
				onmousedown="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-over.gif'); return true;"
				onmouseup="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-over.gif'); return true;">
				<img src="images/Art-Rollovers_Layer-1.gif" width="76" height="108" border="0" alt=""></a></td>
		<td colspan="3">
			<img src="images/Art-Rollovers_04.gif" width="554" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="5">
			<img src="images/Art-Rollovers_05.gif" width="18" height="365" alt=""></td>
		<td colspan="2">
			<a href="#"
				onmouseover="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-13.gif'); return true;"
				onmouseout="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-10.gif'); return true;"
				onmousedown="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-13.gif'); return true;"
				onmouseup="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-13.gif'); return true;">
				<img src="images/Art-Rollovers_Layer-1-07.gif" width="148" height="107" border="0" alt=""></a></td>
		<td rowspan="5">
			<img src="images/Art-Rollovers_07.gif" width="66" height="365" alt=""></td>
		<td rowspan="5">
			<img src="images/Art-Rollovers_08.gif" width="64" height="365" alt=""></td>
		<td rowspan="4">
			<img name="Art_Rollovers_Layer_1010" src="images/Art-Rollovers_Layer-1-10.gif" width="473" height="344" alt=""></td>
		<td rowspan="5">
			<img src="images/Art-Rollovers_10.gif" width="17" height="365" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="107" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/Art-Rollovers_11.gif" width="148" height="48" alt=""></td>
		<td rowspan="4">
			<img src="images/Art-Rollovers_12.gif" width="76" height="258" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="48" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-12.gif'); return true;"
				onmouseout="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-10.gif'); return true;"
				onmousedown="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-12.gif'); return true;"
				onmouseup="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-12.gif'); return true;">
				<img src="images/Art-Rollovers_Layer-1-17.gif" width="146" height="118" border="0" alt=""></a></td>
		<td rowspan="3">
			<img src="images/Art-Rollovers_14.gif" width="2" height="210" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="118" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/Art-Rollovers_15.gif" width="146" height="92" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="71" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/Art-Rollovers_16.gif" width="473" height="21" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Thanks a lot for your help. Let me know if you need anything else needed to solve the problem. You may also contact me through AIM.
thetzfreak is offline  
Old 06-14-2005, 02:31 PM   #2 (permalink)
New Member
Join Date: Jun 2005
Posts: 16
AnOmAlY is an unknown quantity at this point
 
try putting javascript in file.js and have the

<table>
<script = javascript.js>
[]pictures
[]pictures
[]pictures
</script>
</table>



[]
[]
AnOmAlY is offline  
Old 06-14-2005, 02:52 PM THREAD STARTER               #3 (permalink)
Senior Member
 
thetzfreak's Avatar
Join Date: Nov 2004
Posts: 1,129
thetzfreak is just really nicethetzfreak is just really nicethetzfreak is just really nicethetzfreak is just really nice
 
Thanks for your help, AnOmAlY, but I've figured out the problem! What I was doing wrong was the body of the html. I replaced the main part of the body line with the body I had in my template. I replaced this

Code:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
with the same part in my template. It turns out this line had a big effect on the outcome. I was either leaving out this line or just putting it somewhere else. Boy do I feel dumb.
????: NamePros.com http://www.namepros.com/programming/98576-help-needed-javascript-adobe-imageready-rollovers.html

Thanks anyways!
thetzfreak is offline  
Old 06-15-2005, 09:00 AM   #4 (permalink)
Account Closed
Join Date: May 2005
Location: Huddersfield, England
Posts: 179
J_Ronaldo_19 is on a distinguished road
 
yes, i see know and it wouldn't work on your template yes, i probably would of missed that too
J_Ronaldo_19 is offline  
Closed Thread

« PHP 3/2-letter/Number snippet | Auto resize flash with html in php »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


Similar Threads
Thread Thread Starter Forum Replies Last Post
help with imageready rollovers kuizzle Graphic Design / Flash 10 07-02-2004 07:41 PM
Adobe Photoshop 5.5 Auction redhippo The Break Room 12 06-08-2004 08:44 PM

Liquid Web Smart Servers  
All times are GMT -7. The time now is 11:05 AM.

Contact Us - NamePros.com - Privacy Statement - Top
Managed Web Hosting by Liquid Web
Domain name forum recommended by Domaining.com Powered by: vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.6.0 Ad Management plugin by RedTyger