profess
asked on
Moving slices during animation ie creating a drop down (like a pop-up box in fireworks
Hi,
I am trying to create a pop up box in imageready, another words when a slice with a rollover is selected it moves the image around and creates a link were the image moves too.
For example,
When you select a button a drop down box appears with some links on it.
I would do it in Fireworks but you seem to be only able to use the silly boxes it comes with.
For an example of what I am trying to do you can go to www.professionalreferrals.ca/Images/sidebar.html
Thanks
I am trying to create a pop up box in imageready, another words when a slice with a rollover is selected it moves the image around and creates a link were the image moves too.
For example,
When you select a button a drop down box appears with some links on it.
I would do it in Fireworks but you seem to be only able to use the silly boxes it comes with.
For an example of what I am trying to do you can go to www.professionalreferrals.ca/Images/sidebar.html
Thanks
As far as i know youre not going to be able to do it in Photoshop or any program that does rollovers. Usually advanced menus like that are done with fairly complicated javascript or a java applet. A rollover isnt going to move the buttons below, etc.
Why don't you make it in Fireworks if it does what you want, then change the actual graphics in Photoshop if you don't like them!
sina
london
sina
london
If you look at the source, you can see what the image names are, then either change the names to what your file names are or replace the files with different content.
Then you'll have the functionality you want with the images you want.
Fireworks created that using Javascript. Here's the script from your page.
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg)..etc., etc....
sidebar_sidebar2_ai_over = newImage("images/sidebar_s idebar2.ai -over.gif" );
sidebar_sidebar2_ai_out = newImage("images/sidebar_s idebar2.ai -out.gif") ;...
the "images/sidebar_sidebar2.a i-over.gif " is one of those images shown on your page. Just replace that with "images/my_filename" or open that file and replace the content.
Hope this makes sense, isn't over explanatory, and helps you out!
Then you'll have the functionality you want with the images you want.
Fireworks created that using Javascript. Here's the script from your page.
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg)..etc., etc....
sidebar_sidebar2_ai_over = newImage("images/sidebar_s
sidebar_sidebar2_ai_out = newImage("images/sidebar_s
the "images/sidebar_sidebar2.a
Hope this makes sense, isn't over explanatory, and helps you out!
ASKER
Thanks Socrateez,
If you take a look here
www.professionalreferrals.ca/sidebar.html
you will see more clearly what I am try to do
The images are fine its just getting an image map on them when they drop down I am having a hard time with..
Photoshop code
<HTML>
<HEAD>
<TITLE>Untitled-2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Untitled-2) -->
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImagesArray(array) {
if (document.images ) {
for (var i=0; i<array.length; i+=2) {
document[array[i]].src = array[i+1];
}
}
}
function changeImages() {
changeImagesArray(changeIm ages.argum ents);
}
function toggleImages() {
for (var i=0; i<toggleImages.arguments.l ength; i+=2) {
if (selected == toggleImages.arguments[i]) changeImagesArray(toggleIm ages.argum ents[i+1]) ;
}
}
var selected = '';
// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (Untitled-2) -->
<TABLE WIDTH=237 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=3>
<IMG SRC="images/sidebar_01.gif " WIDTH=237 HEIGHT=152 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG NAME="sidebar_02" SRC="images/sidebar_02.gif " WIDTH=78 HEIGHT=209 ALT=""></TD>
<TD>
<A HREF="#"
ONMOUSEOVER="toggleImages( '', new Array('sidebar_02', 'images/sidebar_02-sidebar _03_over.g if', 'sidebar_03', 'images/sidebar_03-over.gi f', 'sidebar_04', 'images/sidebar_04-sidebar _03_over.g if', 'sidebar_05', 'images/sidebar_05-sidebar _03_over.g if')); return true;"
ONMOUSEOUT="toggleImages(' sidebar_03 ', new Array('sidebar_05', 'images/sidebar_05-sidebar _03_sel.gi f'), '', new Array('sidebar_02', 'images/sidebar_02.gif', 'sidebar_03', 'images/sidebar_03.gif', 'sidebar_04', 'images/sidebar_04.gif', 'sidebar_05', 'images/sidebar_05.gif')); return true;"
ONMOUSEUP="selected='sideb ar_03'; changeImages('sidebar_05', 'images/sidebar_05-sidebar _03_sel.gi f'); return true;">
<IMG NAME="sidebar_03" SRC="images/sidebar_03.gif " WIDTH=128 HEIGHT=32 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<IMG NAME="sidebar_04" SRC="images/sidebar_04.gif " WIDTH=31 HEIGHT=209 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG NAME="sidebar_05" SRC="images/sidebar_05.gif " WIDTH=128 HEIGHT=177 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
If you take a look here
www.professionalreferrals.ca/sidebar.html
you will see more clearly what I am try to do
The images are fine its just getting an image map on them when they drop down I am having a hard time with..
Photoshop code
<HTML>
<HEAD>
<TITLE>Untitled-2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Untitled-2) -->
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImagesArray(array) {
if (document.images ) {
for (var i=0; i<array.length; i+=2) {
document[array[i]].src = array[i+1];
}
}
}
function changeImages() {
changeImagesArray(changeIm
}
function toggleImages() {
for (var i=0; i<toggleImages.arguments.l
if (selected == toggleImages.arguments[i])
}
}
var selected = '';
// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (Untitled-2) -->
<TABLE WIDTH=237 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=3>
<IMG SRC="images/sidebar_01.gif
</TR>
<TR>
<TD ROWSPAN=2>
<IMG NAME="sidebar_02" SRC="images/sidebar_02.gif
<TD>
<A HREF="#"
ONMOUSEOVER="toggleImages(
ONMOUSEOUT="toggleImages('
ONMOUSEUP="selected='sideb
<IMG NAME="sidebar_03" SRC="images/sidebar_03.gif
<TD ROWSPAN=2>
<IMG NAME="sidebar_04" SRC="images/sidebar_04.gif
</TR>
<TR>
<TD>
<IMG NAME="sidebar_05" SRC="images/sidebar_05.gif
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
ASKER
Thanks Socrateez,
If you take a look here
www.professionalreferrals.ca/sidebar.html
you will see more clearly what I am try to do
The images are fine its just getting an image map on them when they drop down I am having a hard time with..
Photoshop code
<HTML>
<HEAD>
<TITLE>Untitled-2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Untitled-2) -->
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImagesArray(array) {
if (document.images ) {
for (var i=0; i<array.length; i+=2) {
document[array[i]].src = array[i+1];
}
}
}
function changeImages() {
changeImagesArray(changeIm ages.argum ents);
}
function toggleImages() {
for (var i=0; i<toggleImages.arguments.l ength; i+=2) {
if (selected == toggleImages.arguments[i]) changeImagesArray(toggleIm ages.argum ents[i+1]) ;
}
}
var selected = '';
// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (Untitled-2) -->
<TABLE WIDTH=237 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=3>
<IMG SRC="images/sidebar_01.gif " WIDTH=237 HEIGHT=152 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG NAME="sidebar_02" SRC="images/sidebar_02.gif " WIDTH=78 HEIGHT=209 ALT=""></TD>
<TD>
<A HREF="#"
ONMOUSEOVER="toggleImages( '', new Array('sidebar_02', 'images/sidebar_02-sidebar _03_over.g if', 'sidebar_03', 'images/sidebar_03-over.gi f', 'sidebar_04', 'images/sidebar_04-sidebar _03_over.g if', 'sidebar_05', 'images/sidebar_05-sidebar _03_over.g if')); return true;"
ONMOUSEOUT="toggleImages(' sidebar_03 ', new Array('sidebar_05', 'images/sidebar_05-sidebar _03_sel.gi f'), '', new Array('sidebar_02', 'images/sidebar_02.gif', 'sidebar_03', 'images/sidebar_03.gif', 'sidebar_04', 'images/sidebar_04.gif', 'sidebar_05', 'images/sidebar_05.gif')); return true;"
ONMOUSEUP="selected='sideb ar_03'; changeImages('sidebar_05', 'images/sidebar_05-sidebar _03_sel.gi f'); return true;">
<IMG NAME="sidebar_03" SRC="images/sidebar_03.gif " WIDTH=128 HEIGHT=32 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<IMG NAME="sidebar_04" SRC="images/sidebar_04.gif " WIDTH=31 HEIGHT=209 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG NAME="sidebar_05" SRC="images/sidebar_05.gif " WIDTH=128 HEIGHT=177 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
If you take a look here
www.professionalreferrals.ca/sidebar.html
you will see more clearly what I am try to do
The images are fine its just getting an image map on them when they drop down I am having a hard time with..
Photoshop code
<HTML>
<HEAD>
<TITLE>Untitled-2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Untitled-2) -->
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImagesArray(array) {
if (document.images ) {
for (var i=0; i<array.length; i+=2) {
document[array[i]].src = array[i+1];
}
}
}
function changeImages() {
changeImagesArray(changeIm
}
function toggleImages() {
for (var i=0; i<toggleImages.arguments.l
if (selected == toggleImages.arguments[i])
}
}
var selected = '';
// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (Untitled-2) -->
<TABLE WIDTH=237 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=3>
<IMG SRC="images/sidebar_01.gif
</TR>
<TR>
<TD ROWSPAN=2>
<IMG NAME="sidebar_02" SRC="images/sidebar_02.gif
<TD>
<A HREF="#"
ONMOUSEOVER="toggleImages(
ONMOUSEOUT="toggleImages('
ONMOUSEUP="selected='sideb
<IMG NAME="sidebar_03" SRC="images/sidebar_03.gif
<TD ROWSPAN=2>
<IMG NAME="sidebar_04" SRC="images/sidebar_04.gif
</TR>
<TR>
<TD>
<IMG NAME="sidebar_05" SRC="images/sidebar_05.gif
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
If you want them to have an imagemap, make one. REplace the graphic with the imagemap call, and include the map info at the end of the table.
I've done this before. It's much easier if you forget the js Fireworks generates and do your own. You do it differently -- it's hidden/visible divs, keyed off the mouseovers, not an image swap. And when you do that, you can use a transparent background on the graphic, and have it come up right at the mouse location, and not go away until you close it.
It works like an irregularly shaped floating palette. If you want to get really fancy, you could even have it draggable, so that it could be moved around and would only go away if you closed it.
I've done this before. It's much easier if you forget the js Fireworks generates and do your own. You do it differently -- it's hidden/visible divs, keyed off the mouseovers, not an image swap. And when you do that, you can use a transparent background on the graphic, and have it come up right at the mouse location, and not go away until you close it.
It works like an irregularly shaped floating palette. If you want to get really fancy, you could even have it draggable, so that it could be moved around and would only go away if you closed it.
ASKER
How do I add an image map call so the image map only displays on mouseover
ONMOUSEUP="selected='sideb ar_03'; changeImages('sidebar_05', 'images/sidebar_05-sidebar _03_sel.gi f'); return true;">
<IMG NAME="sidebar_03" SRC="images/sidebar_03.gif " WIDTH=128 HEIGHT=32 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=2>
<IMG NAME="sidebar_04" SRC="images/sidebar_04.gif " WIDTH=31 HEIGHT=209 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/sidebar_05.gif " ALT="" NAME="sidebar_05" WIDTH=128 HEIGHT=177 border="0" usemap="#sidebar_05Map"></ TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
<map name="sidebar_05Map">
<area shape="rect" coords="7,110,119,138" href="#">
<area shape="rect" coords="7,144,119,161" href="#">
</map>
</BODY>
</HTML>
ONMOUSEUP="selected='sideb
<IMG NAME="sidebar_03" SRC="images/sidebar_03.gif
<TD ROWSPAN=2>
<IMG NAME="sidebar_04" SRC="images/sidebar_04.gif
</TR>
<TR>
<TD>
<IMG SRC="images/sidebar_05.gif
</TR>
</TABLE>
<!-- End ImageReady Slices -->
<map name="sidebar_05Map">
<area shape="rect" coords="7,110,119,138" href="#">
<area shape="rect" coords="7,144,119,161" href="#">
</map>
</BODY>
</HTML>
You have to custom code it -- you CANNOT use the canned ImageReady/Fireworks stuff.
It's NOT an image swap -- it's a div show/hide. Totally different code.
It's NOT an image swap -- it's a div show/hide. Totally different code.
ASKER
I have started coding this for now than I will change it to what you are suggesting....but perhaps you could tell my why this doesn't work ...it gives no errors it just won't change the images around.
<html>
<head>
<TITLE>Untitled-2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
<!--
aImgName = new Array('imgButton1', 'imgButton2', 'imgButton3');
aImgOverPath = new Array('/images/button1_ove r.gif', '/images/button2_over.gif' , '/images/button3_over.gif' );
aImgNormalPath = new Array('/images/button1_nor mal.gif', '/images/button2_normal.gi f', '/images/button3_normal.gi f');
function doImageChange(imgIndex,Sta te)
{
switch(State)
{
case 'Normal':
eval("aImgName["+imgIndex+ "].src = aImgNormalPath["+imgIndex+ "]");
return true;
break;
case 'Over':
eval("aImgName["+imgIndex+ "].src = aImgOverPath["+imgIndex+"] ");
return true;
break;
case 'Select':
eval("aImgName["+imgIndex+ "].src = aImgSelectPath["+imgIndex+ "]");
break;
}
}
//-->
</script>
</head>
<body>
<table width="312" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutDefaultTable-- >
<tr>
<td height="23" valign="top"><img name="imgButton1" img src="/Images/button1_norma l.gif" width="131" height="30"></td>
</tr>
<tr><td height="47" valign="top">
<A HREF="#" onMouseOver="doImageChange (2,'Over') ;" onMouseOut="doImageChange( 2,'Normal' );">
<IMG NAME="imgButton2" SRC="/Images/button2_norma l.gif" WIDTH=128 HEIGHT=32 BORDER=0 ALT=""></A></td>
<tr>
<td height="47" valign="top"><img name="imgButton3" img src="/Images/button3_norma l.gif" width="131" height="30"></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<TITLE>Untitled-2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
<!--
aImgName = new Array('imgButton1', 'imgButton2', 'imgButton3');
aImgOverPath = new Array('/images/button1_ove
aImgNormalPath = new Array('/images/button1_nor
function doImageChange(imgIndex,Sta
{
switch(State)
{
case 'Normal':
eval("aImgName["+imgIndex+
return true;
break;
case 'Over':
eval("aImgName["+imgIndex+
return true;
break;
case 'Select':
eval("aImgName["+imgIndex+
break;
}
}
//-->
</script>
</head>
<body>
<table width="312" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutDefaultTable--
<tr>
<td height="23" valign="top"><img name="imgButton1" img src="/Images/button1_norma
</tr>
<tr><td height="47" valign="top">
<A HREF="#" onMouseOver="doImageChange
<IMG NAME="imgButton2" SRC="/Images/button2_norma
<tr>
<td height="47" valign="top"><img name="imgButton3" img src="/Images/button3_norma
</tr>
</table>
</body>
</html>
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.
I will leave the following recommendation for this question in the Cleanup topic area:
PAQ - Refund Points
Any objections should be posted here in the next 4 days. After that time, the question will be closed.
Lobo
EE Cleanup Volunteer
I will leave the following recommendation for this question in the Cleanup topic area:
PAQ - Refund Points
Any objections should be posted here in the next 4 days. After that time, the question will be closed.
Lobo
EE Cleanup Volunteer
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.