Mouse Rollover

**1ziggi1** · 11-08-2008, 06:17 PM

1) Script Title:
Dissolving Image Rollover

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...ssolveroll.htm

3) Describe problem:
Can someone show me how to make this script work using the images in a row instead of a column? When I move the pictures into a row the replacement image causes the whole screen to jump.
Below is what I have now.

Code:

<html>
<head>
<title>Ziggi's World</title>
<meta name="description" content="VCR & Computer Repair and used VCR Sales">
<meta name="keywords" content="repair, video, used, VCR, computer, beta, betamax, vhs, S-VHS, Sony, Mitsubishi, Toshiba">

<!--*************************************************************************************  Start Java  **********************************************************************************************-->

<script type="text/javascript">

/*****************************************
* Dissolving Image Rollover- By Roy Whittle (http://www.javascript-fx.com/)
* Featured on/available at http://www.dynamicdrive.com/
* This notice must stay intact for use
*****************************************/

//Generate transition CSS (transition=0 to 23)
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }</STYLE>');

//Uncomment the next line for fading rollovers instead of dissolving:
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.4) }</STYLE>');

var onImages=new Array();
function Rollover(imgName, imgSrc)
{
	onImages[imgName] = new Image();
	onImages[imgName].src = imgSrc;
}

function turnOn(imgName){ 
	if(document.images[imgName].filters != null)
		document.images[imgName].filters[0].apply();
	document.images[imgName].offSrc = document.images[imgName].src;
	document.images[imgName].src    = onImages[imgName].src;
	if(document.images[imgName].filters != null)
		document.images[imgName].filters[0].play();
}

function turnOff(imgName){ 
	if(document.images[imgName].filters != null)
		document.images[imgName].filters[0].stop();
	document.images[imgName].src = document.images[imgName].offSrc;
}

//<**************************************************************************************  Start Pictures  *********************************************************************************************-->

Rollover("1", "http://www.ziggi.net/ad500w/fr_on.jpg");
Rollover("2", "http://www.ziggi.net/ad500w/fr_off.jpg");
Rollover("3", "http://www.ziggi.net/ad500w/all.jpg");
Rollover("4", "http://www.ziggi.net/ad500w/top.jpg");
Rollover("5", "http://www.ziggi.net/ad500w/rear.jpg");
Rollover("6", "http://www.ziggi.net/ad500w/remote.jpg");
Rollover("7", "http://www.ziggi.net/images/cool.gif");

</script>

<!--***************************************************************************************  End Java  ***********************************************************************************************-->

<body>

<b><i><font color="#0000FF"><font size=+2><center>

<!--*******************************************************************************************  Title  **************************************************************************************************-->

APEX AD-500W MULTI REGION WITH REMOTE

</font></font></i></center><HR>

<!--*****************************************************************************************   Description   ******************************************************************************************-->

<b><p><center><font color="#0000FF"><FONT SIZE=+0>Description</font></font></A></p></center></p><p><font color="#000000"><font size=+0><P ALIGN="JUSTIFY">

<!--**************************************************************************************   Begin Description   ************************************************************************************-->

This Apex AD-500W DVD Player comes as a Region and Macro FREE upgrade which requires nothing to be changed so you can play NTSC & PAL DVD's, as well as record DVD's to Tape. It comes with the Original Remote Control. It is a Region Free player and can play any DVD from any region in the world and it has all of the usual features such as Zoom, Angle, Scan in Forward or Reverse and Slow Motion. It can play on either an NTSC or PAL Television System. It has an AC3 & DTS Digital Coaxial Output, RCA Audio/Video Outputs and S-Video Output.

<!--************************************************************************************  Start Pictures  *********************************************************************************************-->

<b><p><center><font color="#0000FF"><FONT SIZE=+0>Place your mouse over the picture to resize it.</font></font></A></p></center></p><p><font color="#000000"><font size=+0><P ALIGN="JUSTIFY">
<P><center>

<a href = "http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=1ziggi1&completed=0&sort=3&since=-1"
onMouseOver="turnOn('1');"
onMouseOut="turnOff('1');"><img name="1" class="imgTrans"
src="http://www.ziggi.net/ad500w/1fr_on.jpg" border="0"></a><br><p>

<a href = "http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=1ziggi1&completed=0&sort=3&since=-1"
onMouseOver="turnOn('2');"
onMouseOut="turnOff('2');"><img name="2" class="imgTrans"
src="http://www.ziggi.net/ad500w/1fr_off.jpg" border="0"></a><br><p>

<a href = "http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=1ziggi1&completed=0&sort=3&since=-1"
onMouseOver="turnOn('3');"
onMouseOut="turnOff('3');"><img name="3" class="imgTrans"
src="http://www.ziggi.net/ad500w/1all.jpg" border="0"></a><br><p>

<a href = "http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=1ziggi1&completed=0&sort=3&since=-1"
onMouseOver="turnOn('4');"
onMouseOut="turnOff('4');"><img name="4" class="imgTrans"
src="http://www.ziggi.net/ad500w/1top.jpg" border="0"></a><br><p>

<a href = "http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=1ziggi1&completed=0&sort=3&since=-1"
onMouseOver="turnOn('5');"
onMouseOut="turnOff('5');"><img name="5" class="imgTrans"
src="http://www.ziggi.net/ad500w/1rear.jpg" border="0"></a><br><p>

<a href = "http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=1ziggi1&completed=0&sort=3&since=-1"
onMouseOver="turnOn('6');"
onMouseOut="turnOff('6');"><img name="6" class="imgTrans"
src="http://www.ziggi.net/ad500w/1remote.jpg" border="0"></a><br><p>

<a href = "http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=1ziggi1&completed=0&sort=3&since=-1"
onMouseOver="turnOn('7');"
onMouseOut="turnOff('7');"><img name="7" class="imgTrans"
src="http://www.ziggi.net/images/cool.gif" border="0"></a><br><p>

</p></center>


<!--*************************************************************************************  Shipping & Handling  ************************************************************************************-->

<P><HR><center><font color="##0000FF"><FONT SIZE=+0>Shipping & Handling</font></font></A></center></p><P ALIGN="JUSTIFY">I will ship to the US only. Buyer pays a flat <font color="#FF0000"><font size=+0>

$20

</font></font> for shipping, handling and insurance to the lower 48 states. Shipping to the USA is done through DHL Ground (Airborne Express). I will not be liable for any damage caused by shipping. All my items shipped by DHL carry insurance at least to the value of your winning bid. Reimbursement is made only when/if the carrier covers the damage(s). Faster shipping options available at buyer's added expense. Orders are usually shipped within 48 hours of receiving payment. No local pickups. I do not offer combined shipping rates of multiple items shipped to the same address. I ship each unit in it's own box so that if one gets lost or damaged the other one is not.

<!--**************************************************************************************   Payment Options   *************************************************************************************-->

<P><HR><center><font color="#0000FF"><FONT SIZE=+0>Payment Options</font></font></A></center></p><P ALIGN="JUSTIFY">

<B><font color="#FF0000"><font size=+0>PLEASE DO NOT try to pay before I have sent an invoice to you. ALSO If you have a spam filter on your email account PLEASE check your junk mail for an invoice.</font></font> An Invoice will be sent to your registered eBay email account within 12 hours. I accept PayPal for use with a credit card or a US Postal Money Order. You must have a confirmed address for PayPal and I will ship only to that address. Payment arrangements must be made within 48 hours of the close of the auction. <font color="#FF0000"><font size=+0>Payments must be received within 7 days after the end of the auction.</font></font> Failure to make email confirmation or payment within the allotted time will cause the unit to either be relisted or offered to the next highest bidder.<P><center><a href="http://www.usps.com/" target="_blank"><img SRC="http://www.ziggi.net/images/usps.jpg" ALT="U.S. Post Office Money Orders"</a><a href="https://www.paypal.com/auction/pal=VQDQ2UBNHMKZE" target="_blank"><img src="http://www.ziggi.net/images/paypal.gif" border="2" alt="Pay me securely with any major credit card through PayPal"

</a></center></P>

</script>
</a></font></b></P></b></TD></TR></TABLE></body></head></html>

**ddadmin** · 11-09-2008, 05:42 AM

Are you asking why the image enlarges when you mouse over the thumbnails? If so, what you can do is add a width/height attribute to the thumbnails themselves, hence limiting the dimensions even when they get swapped:

Code:

<a href = "http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=1ziggi1&completed=0&sort=3&since=-1"
onMouseOver="turnOn('1');"
onMouseOut="turnOff('1');"><img name="1" class="imgTrans"
src="http://www.ziggi.net/ad500w/1fr_on.jpg" border="0" style="width: 115px; height: 77px"></a>

**1ziggi1** · 11-09-2008, 02:15 PM

Originally Posted by ddadmin

Are you asking why the image enlarges when you mouse over the thumbnails? If so, what you can do is add a width/height attribute to the thumbnails themselves, hence limiting the dimensions even when they get swapped:

Code:

<a href = "http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=1ziggi1&completed=0&sort=3&since=-1"
onMouseOver="turnOn('1');"
onMouseOut="turnOff('1');"><img name="1" class="imgTrans"
src="http://www.ziggi.net/ad500w/1fr_on.jpg" border="0" style="width: 115px; height: 77px"></a>

No I want them to enlarge. I am asking how to make this script work using the images in a row instead of a column? When I move the pictures into a row the replacement image causes the whole screen to jump.

**ddadmin** · 11-10-2008, 03:55 AM

You'll have to clarify what you mean by a "row". When I last viewed your page (I no longer see the URL), the rollover images already appeared in a row in that each image occupied one line on the page. Do you mean "row" as in side by side to one another?

**1ziggi1** · 11-10-2008, 02:35 PM

I guess I should have said I need the pictures to go across the page and not up and down the page. Rows go left to right and columns go up and down. Sorry but I am used to using Excel. If there is a better script out there for making thumbnails grow larger with a mouseover that I can use that is fine with me but I can not use any server side scripts.

**ddadmin** · 11-10-2008, 11:44 PM

Well, since you're loading the enlarged image in place of the original, smaller thumbnail, it naturally will cause the rest of the page to expand temporarily to accommodate the larger image. I think an image script that loads the enlarged image as an absolutely positioned element might work better in this case, though it's activated onclick: image thumbnail viewer.

**1ziggi1** · 11-11-2008, 01:56 PM

I really prefer a mouseover so I will keep looking. Thanks for your help.

**1ziggi1** · 11-12-2008, 04:26 PM

Anyone else have any ideas?

Thread: Mouse Rollover

Thread Tools

Search Thread

Mouse Rollover

Bookmarks

Bookmarks

Posting Permissions