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 Adobe Imageready Javascript Rollover How-To! Need Help!

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-16-2005, 10:40 AM 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
 

Adobe Imageready Javascript Rollover How-To! Need Help!

Hi again. I'm making a photography site, which has some alblums in it from adobe imageready. Here it is:

http://ephi.blansh.com/21stCenturyPictures/

I'm really sorry about the large image sizes, this will be fixed soon. I know it takes a long time to load. When on the main page, click on the side where it says Art Reproduction (as this page loads the fastest). The black album part is from imageready. I just took the code and placed it in frontpage.

I want to know how to do something: You realize that when you rollover an image, a larger version appears right next the the thumbnails. But, when you take your mouse off of the thumbnail, the large image switches back to the original image! How do I make it so that when the mouse is taken off the image, the large image remains the same until rolled over another thumbnail? It keeps switching, and that is very annoying. Once again, sorry about long loading.

If you want the code to that rollover "album," here it is (has some html):
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_over010 = newImage("images/Art-Rollovers_Layer-1-ov-10.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="751" height="384" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="8">

			<img src="images/Art-Rollovers_01.gif" width="750" height="8" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="images/Art-Rollovers_02.gif" width="8" height="376" alt=""></td>
		<td colspan="2">
			<img src="images/Art-Rollovers_Layer-1.gif" width="122" height="89" alt=""></td>

		<td rowspan="6">
			<img src="images/Art-Rollovers_04.gif" width="25" height="376" alt=""></td>
		<td rowspan="3">
			<a href="#"
				onmouseover="changeImages('Art_Rollovers_Layer_1008', 'images/Art-Rollovers_Layer-1-over.gif'); return true;"
				onmouseout="changeImages('Art_Rollovers_Layer_1008', 'images/Art-Rollovers_Layer-1-08.gif'); return true;"
				onmousedown="changeImages('Art_Rollovers_Layer_1008', 'images/Art-Rollovers_Layer-1-over.gif'); return true;"
				onmouseup="changeImages('Art_Rollovers_Layer_1008', 'images/Art-Rollovers_Layer-1-over.gif'); return true;">
				<img src="images/Art-Rollovers_Layer-1-06.gif" width="80" height="113" border="0" alt=""></a></td>
		<td rowspan="6">
			<img src="images/Art-Rollovers_06.gif" width="26" height="376" alt=""></td>
		<td rowspan="5">
			<img name="Art_Rollovers_Layer_1008" src="images/Art-Rollovers_Layer-1-08.gif" width="478" height="347" alt=""></td>

		<td rowspan="6">
			<img src="images/Art-Rollovers_08.gif" width="11" height="376" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="89" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/Art-Rollovers_09.gif" width="122" height="14" alt=""></td>
		<td>

			<img src="images/spacer.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/Art-Rollovers_10.gif" width="1" height="273" alt=""></td>
		<td rowspan="2">
			<a href="#"
				onmouseover="changeImages('Art_Rollovers_Layer_1008', 'images/Art-Rollovers_Layer-1-ov-10.gif'); return true;"
				onmouseout="changeImages('Art_Rollovers_Layer_1008', 'images/Art-Rollovers_Layer-1-08.gif'); return true;"
				onmousedown="changeImages('Art_Rollovers_Layer_1008', 'images/Art-Rollovers_Layer-1-ov-10.gif'); return true;"
				onmouseup="changeImages('Art_Rollovers_Layer_1008', 'images/Art-Rollovers_Layer-1-ov-10.gif'); return true;">
				<img src="images/Art-Rollovers_Layer-1-14.gif" width="121" height="98" border="0" alt=""></a></td>
		<td>

			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/Art-Rollovers_12.gif" width="80" height="263" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="88" alt=""></td>
	</tr>
	<tr>

		<td rowspan="2">
			<img src="images/Art-Rollovers_13.gif" width="121" height="175" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="146" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/Art-Rollovers_14.gif" width="478" height="29" alt=""></td>
		<td>

			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Thanks
Last edited by thetzfreak; 06-16-2005 at 02:26 PM.
thetzfreak is offline  
Old 06-17-2005, 08:15 PM THREAD STARTER               #2 (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
 
Bump
thetzfreak is offline  
Old 06-17-2005, 08:27 PM   #3 (permalink)
NamePros Regular
 
Jon_'s Avatar
Join Date: May 2005
Posts: 372
Jon_ is an unknown quantity at this point
 
If it helps, here:

http://www.13dots.com/forum/index.php?showtopic=2362

EDIT:

Also, the normal roll-over script:

Head:
Quote:
<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.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];}
}
//-->
</script>
Body:
Quote:
<a href="http://" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','ROLLOVER IMAGE',0)"><img src="NORMAL IMAGE" name="Image1" width="780" height="201" border="0"></a>
Edit the dimesions of course also.
Last edited by Jon_; 06-17-2005 at 08:37 PM.
Jon_ is offline  
Closed Thread

« Affialte management/ Banner exchange | CSS help please »

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


Similar Threads
Thread Thread Starter Forum Replies Last Post
Help Needed With Javascript From Adobe Imageready (Rollovers) thetzfreak Programming 3 06-15-2005 09:00 AM
Help with rollover images... TouCHiNG_CLoTH Web Design Discussion 13 04-26-2005 10:32 AM
Need help in Javascript please, Image rollover for gallery diablostang Programming 1 04-13-2005 01:24 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 04:34 PM.

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