The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Help With Remote Rollover Images, Rollovers are easy... but what if you have more than one image you wan
Kentx
post Feb 5 2008, 03:32 PM
Post #1





Group: Members
Posts: 6
Joined: 12-September 07
Member No.: 3,791
I have a website I am designing part of and on one page, I have several buttons (that will have links at one point) that are typical rollover images, however I want a third option to occur when I mouseover on the button. I was wondering if its possible to have an image appear in the right hand table area when the mouse over occurs. The current code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script 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>
</head>

<body onload="MM_preloadImages
('http://www.cinema-cafe.com/images/birthday_packages2.jpg',
'http://www.cinema-cafe.com/images/military_packages2.jpg',
'http://www.cinema-cafe.com/images/schools_daycares2.jpg',
'http://www.cinema-cafe.com/images/youth_sports2.jpg',
'http://www.cinema-cafe.com/images/big_game2.jpg',
'http://www.cinema-cafe.com/images/office_party2.jpg',
'http://www.cinema-cafe.com/images/movie_premiere2.jpg',
'http://www.cinema-cafe.com/images/movies_meeting2.jpg',
'http://www.cinema-cafe.com/images/private_rentals2.jpg',
'http://www.cinema-cafe.com/images/lock_ins2.jpg')">

<table width="601" height="240" border="0" cellpadding="1" cellspacing="1">
<tr>
<td width="150"><div align="center"><a href="http://" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Birthday Parties','','http://www.cinema-cafe.com/images/birthday_packages2.jpg',1)">
<img src="http://www.cinema-cafe.com/images/birthday_packages1.jpg" name="Birthday Parties" width="150" height="38" border="0" id="Birthday Parties" /></a></div></td>
<td width="444" rowspan="10">
<p align="center"> </td>
</tr>
<tr>
<td><div align="center"><a href="http://" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Military','','http://www.cinema-cafe.com/images/military_packages2.jpg',1)">
<img src="http://www.cinema-cafe.com/images/military_packages1.jpg" name="Military" width="150" height="38" border="0" id="Military" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Schools','','http://www.cinema-cafe.com/images/schools_daycares2.jpg',1)">
<img src="http://www.cinema-cafe.com/images/schools_daycares1.jpg" name="Schools" width="150" height="38" border="0" id="Schools" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Youth Sports','','http://www.cinema-cafe.com/images/youth_sports2.jpg',1)">
<img src="http://www.cinema-cafe.com/images/youth_sports1.jpg" name="Youth Sports" width="150" height="38" border="0" id="Youth Sports" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Big Game','','http://www.cinema-cafe.com/images/big_game2.jpg',1)">
<img src="http://www.cinema-cafe.com/images/big_game1.jpg" name="Big Game" width="150" height="38" border="0" id="Big Game" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Office Party','','http://www.cinema-cafe.com/images/office_party2.jpg',1)">
<img src="http://www.cinema-cafe.com/images/office_party1.jpg" name="Office Party" width="150" height="38" border="0" id="Office Party" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Premiere','','http://www.cinema-cafe.com/images/movie_premiere2.jpg',1)">
<img src="http://www.cinema-cafe.com/images/movie_premiere1.jpg" name="Premiere" width="150" height="38" border="0" id="Premiere" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Meetings','','http://www.cinema-cafe.com/images/movies_meeting2.jpg',1)">
<img src="http://www.cinema-cafe.com/images/movies_meeting1.jpg" name="Meetings" width="150" height="38" border="0" id="Meetings" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Rentals','','http://www.cinema-cafe.com/images/private_rentals2.jpg',1)">
<img src="http://www.cinema-cafe.com/images/private_rentals1.jpg" name="Rentals" width="150" height="38" border="0" id="Rentals" /></a></div></td>
</tr>
<tr>
<td height="21"><div align="center"><a href="http://" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lock Ins','','http://www.cinema-cafe.com/images/lock_ins2.jpg',1)">
<img src="http://www.cinema-cafe.com/images/lock_ins1.jpg" name="Lock Ins" width="150" height="38" border="0" id="Lock Ins" /></a></div></td>
</tr>
</table>
</body>
</html>

There are images, equal to the number of buttons I have, aprox 250x250p and I want them to appear in that right hand table area when the mouse over occurs on the left side, but I still want the original mouse over to work. Any ideas??
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 6 2008, 07:59 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Can you provide the URL (address) of a document that demonstrates the problem?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kentx
post Feb 7 2008, 03:48 PM
Post #3





Group: Members
Posts: 6
Joined: 12-September 07
Member No.: 3,791
QUOTE(Darin McGrew @ Feb 6 2008, 07:59 PM) *

Can you provide the URL (address) of a document that demonstrates the problem?


It doesn't exist yet. I am trying to make a roll-over where you roll-over an image on the left side of a table (in one cell for example) and an image appears on the right side of the table (in the right cell).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 7 2008, 04:32 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Take a look here: http://meyerweb.com/eric/css/edge/popups/demo2.html.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kentx
post Feb 8 2008, 12:28 PM
Post #5





Group: Members
Posts: 6
Joined: 12-September 07
Member No.: 3,791
QUOTE(Frederiek @ Feb 7 2008, 04:32 PM) *

Take a look here: http://meyerweb.com/eric/css/edge/popups/demo2.html.


THATS IT! Now I just gotta figure out how to bring it all together. Thanks for the help
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kentx
post Feb 8 2008, 12:34 PM
Post #6





Group: Members
Posts: 6
Joined: 12-September 07
Member No.: 3,791
QUOTE(Frederiek @ Feb 7 2008, 04:32 PM) *

Take a look here: http://meyerweb.com/eric/css/edge/popups/demo2.html.


Wait, thats it but its all placed in one collumn. I need something that has everything in ONE table with two cells. On the left cell are roll-over images (basically two images the same size that say one thing and seem to pop up when moused-over - a basic roll-over image). However, when you roll-over one image, when the second image is in effect (the roll-over), I want an image to appear in the RIGHT cell that shows something else, and ONLY shows up when moused-over. The demo link you gave me does not give instructions on where to point the code, if it can be done at all. IT does not give advice on how to make a roll-over effect occur somewhere else on the page when one effect happens in another area.

Long story short, I want two roll-over effects to happen at the same time in two different areas when your mouse is over only one.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 9 2008, 05:19 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Eric Meyer doesn't use a table but positions the images from within the <a> tag.

I don't have the time to search for you, but you might find something that suits you at http://www.d.umn.edu/is/support/Training/O...design/css.html.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 12:38 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC