[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 158
  • Last Modified:

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
0
profess
Asked:
profess
1 Solution
 
weedCommented:
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
 
dearsinaCommented:
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
 
socrateezCommented:
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
[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

 
professAuthor Commented:
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
 
professAuthor Commented:
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
 
webwomanCommented:
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
 
professAuthor Commented:
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
 
webwomanCommented:
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
 
professAuthor Commented:
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
 
Lobo042399Commented:
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
 
NetminderCommented:
PAQed, with points refunded (60)

Netminder
Site Admin
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now