?
Solved

Moving slices during animation ie creating a drop down (like a pop-up box in fireworks

Posted on 2003-03-11
11
Medium Priority
?
157 Views
Last Modified: 2010-04-03
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
0
Comment
Question by:profess
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
11 Comments
 
LVL 30

Expert Comment

by:weed
ID: 8116200
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.
0
 
LVL 4

Expert Comment

by:dearsina
ID: 8118497
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
0
 
LVL 1

Expert Comment

by:socrateez
ID: 8120354
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_sidebar2.ai-over.gif");
          sidebar_sidebar2_ai_out = newImage("images/sidebar_sidebar2.ai-out.gif");...

the "images/sidebar_sidebar2.ai-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!
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:profess
ID: 8120412
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(changeImages.arguments);
}

function toggleImages() {
     for (var i=0; i<toggleImages.arguments.length; i+=2) {
          if (selected == toggleImages.arguments[i])      changeImagesArray(toggleImages.arguments[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.gif', 'sidebar_03', 'images/sidebar_03-over.gif', 'sidebar_04', 'images/sidebar_04-sidebar_03_over.gif', 'sidebar_05', 'images/sidebar_05-sidebar_03_over.gif')); return true;"
                    ONMOUSEOUT="toggleImages('sidebar_03', new Array('sidebar_05', 'images/sidebar_05-sidebar_03_sel.gif'), '', 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='sidebar_03'; changeImages('sidebar_05', 'images/sidebar_05-sidebar_03_sel.gif'); 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>
0
 

Author Comment

by:profess
ID: 8120592
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(changeImages.arguments);
}

function toggleImages() {
     for (var i=0; i<toggleImages.arguments.length; i+=2) {
          if (selected == toggleImages.arguments[i])      changeImagesArray(toggleImages.arguments[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.gif', 'sidebar_03', 'images/sidebar_03-over.gif', 'sidebar_04', 'images/sidebar_04-sidebar_03_over.gif', 'sidebar_05', 'images/sidebar_05-sidebar_03_over.gif')); return true;"
                    ONMOUSEOUT="toggleImages('sidebar_03', new Array('sidebar_05', 'images/sidebar_05-sidebar_03_sel.gif'), '', 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='sidebar_03'; changeImages('sidebar_05', 'images/sidebar_05-sidebar_03_sel.gif'); 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>
0
 
LVL 19

Expert Comment

by:webwoman
ID: 8121365
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.
0
 

Author Comment

by:profess
ID: 8121486
How do I add an image map call so the image map only displays on mouseover


ONMOUSEUP="selected='sidebar_03'; changeImages('sidebar_05', 'images/sidebar_05-sidebar_03_sel.gif'); 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>
0
 
LVL 19

Expert Comment

by:webwoman
ID: 8124027
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.
0
 

Author Comment

by:profess
ID: 8124059
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_over.gif', '/images/button2_over.gif', '/images/button3_over.gif');

aImgNormalPath = new Array('/images/button1_normal.gif', '/images/button2_normal.gif', '/images/button3_normal.gif');

 function doImageChange(imgIndex,State)

{
            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_normal.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_normal.gif" WIDTH=128 HEIGHT=32 BORDER=0 ALT=""></A></td>
  <tr>
    <td height="47" valign="top"><img name="imgButton3" img src="/Images/button3_normal.gif" width="131" height="30"></td>
  </tr>
</table>
</body>
</html>
0
 
LVL 17

Expert Comment

by:Lobo042399
ID: 11712115
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
0
 
LVL 5

Accepted Solution

by:
Netminder earned 0 total points
ID: 11749194
PAQed, with points refunded (60)

Netminder
Site Admin
0

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
In this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question