Unstoppable Domains โ€” Expired Auctions

Adobe Imageready Javascript Rollover How-To! Need Help!

NamecheapNamecheap
Watch

thetzfreak

Established Member
Impact
19
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:
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Unstoppable Domains โ€” AI StorefrontUnstoppable Domains โ€” AI Storefront
Bump
 
0
•••
If it helps, here:

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

EDIT:

Also, the normal roll-over script:

Head:
<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)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


Body:
<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:
0
•••
CatchedCatched
Escrow.com
Spaceship
Rexus Domain
CryptoExchange.com
Domain Recover
CatchDoms
DomDB
NameFit
  • The sidebar remains visible by scrolling at a speed relative to the pageโ€™s height.
Back