Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Using two swap image behaviors, can't get desired results

Posted on 2005-04-11
12
Medium Priority
?
786 Views
Last Modified: 2013-12-13
I'll try to describe what I have: Several icons (slices) used as quasi-navigation bar. I say "quasi" because the icons aren't for moving to another page, they just control events on the same page. There -is-a regular navigation bar used on the page however.

There is a small arrow indicator below each icon. When rolling over the icons, the arrow indicator follows - just a simple rollover. Here is the complication: Another swap image is attached to each icon so that when clicked, another (disjointed) image in the page swaps out. After the icon is clicked and the mouse rolls off, I want the disjointed image AND the arrow indicator to remain in place.

There are separate frames for each arrow and disjointed image.

I have a swap image (and restore) attached to the icons to do the rollover. I also have a swap image (onClick) to make the disjointed image swap out.

This works OK, except that after clicking the icon and the mouse rolls off, the disjointed image reverts back to frame1. I don't have a "restore image" attached to the swap image(onClick) event.
0
Comment
Question by:Benson_nc
  • 8
  • 4
12 Comments
 
LVL 10

Expert Comment

by:Havin_it
ID: 13768433
Hi,

This should be no biggy, but it will involve diving into the generated code.
Go through the page and identify by name the slices holding the icons. A quick way to do this in the browser is to right-click each icon and select Image Properties.
Then open up the page in your code/text editor of choice, and locate the links surrounding those slices.
From each one, remove the 'onMouseOut=' trigger attribute; that should take care of the arrows.

If that doesn't work, post the code, specifying which elements are the icons, the arrows and the disjoint image. If you can post the PNG file or HTML output somewhere online, even better. [Tip: you can put the PNG file on an image-hosting service such as PhotoBucket.us or similar, after all it's a valid image extension.]
0
 

Author Comment

by:Benson_nc
ID: 13772371
Thanks.

I've posted the PNG file here:

http://freepages.misc.rootsweb.com/~argyll/

I only have the behaviors attached to the first four icons.

On rollover, I want the arrow to move. OnClick, I want the sample image to change. Onmouseout, I'd like the arrow indicator _and_ the sample image to stay put.

If I remove the onMouseout, the rollover won't work properly.
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 13780754
Cheers. Will take a look after work - BTW, which version was it created on?
0
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

 

Author Comment

by:Benson_nc
ID: 13781110
MX 2004, and thanks for having a look.
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 13781418
No problem - I should say I run 'old' MX, so let's hope everything equates okay. I believe the behaviours you've mentioned are all in my version, but there could be issues if the code-generation is different.
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 13785922
Well, it opened and exported okay - apart from missing some of the fonts you used - and I can see the problem as you described. The MM_SwapImgRestore() function is doing both jobs: swapping-back the arrow, but unfortunately also doing the same for the onClick swap. You can't easily change that part without hacking the function, so I suggest losing the pre-supplied function for the onClick bit, and using your own. How about this:

function disJointSwapIn(img) {
  document.getElementById('id_of_disjoint_image').src = img;
  }

Paste that in before the closing </script> tag, then change the onClick action for each icon to

onClick="disJointSwapIn('image_to_swap_in.jpg');"

[NOTE: I'm away from the code right now so can't give the specific filenames and element IDs, but hopefully you can locate the bits I'm referring to in the above from the name's I gave them. If not I'll post them later]

That should give you a swap that won't be targeted by MM_SwapImgRestore() when it fires.  If you've exported the page as it is now (ie with the current onClick handlers on the icons), then all the images to be swapped-in for the disjoint part will be included in the preloading function, so they'll still appear quickly when you click the icons.

Hope that all makes sense - I don't know how comfortable you are with editing HTML and JavaScript, but I've tried to make it simple to follow. Any probs, just let me know.
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 13785992
Oh, waitwaitwaitnow. I've forgotten to deal with making the arrows static, haven't I?

Going back to your earlier post, can you explain what goes wrong with the rollover if you remove the onMouseOut handler altogether? I'll investigate that one myself when I get home, I can only theorise without the code in front of me.
0
 

Author Comment

by:Benson_nc
ID: 13786383
If the "restore image on mouseout" is removed the rollover doesn't work properly. The arrow will "stick" on an icon without clicking if the mouse is taken upward or downward. If the mouse is limited to simply side-to-side motion over the icons, it works fine. But that's an unrealistic limitation.
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 13789313
Benson, I've been looking over both the FW source and the output this morning, and I'm still pretty stumped. Looks like the MM_SwapImageRestore() function is totally indiscriminate, so it will override all other behaviors even if you specify no swap-back for them.

So in short, this method _will_ require hardcore JavaScript hacking to make it work. You might want to consider asking about that in the dedicated JavaScript TA.

Before we get to that though, one other possibility occurs: instead of piling up all these swap-image behaviors, maybe you can use a navbar behavior (slightly adapted) to get the results you seek. I'm not overly familiar with the use of these, but will have a tinker myself - after I've been to the dentist.
0
 

Author Comment

by:Benson_nc
ID: 13790259
Thanks, that's what I was afraid of. One thing I don't understand is why both images don't revert on mouseout. Just the big disjointed image goes back, not the arrow.
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 13790435
Well, to answer that one (sorta, though it doesn't entirely make sense to me either) the difference between the behaviours for the arrow and the disjoint is that for the disjoint, you have un-ticked 'Restore Image OnMouseOut', whereas this is still ticked for the arrow.

One thing I'd suggest is altering the slicing arrangement so the arrows are in the same slice as the icons. I don't as yet have a full solution to go with this, but it will give you more granular control of the arrows at least. I'll take another look...
0
 
LVL 10

Accepted Solution

by:
Havin_it earned 1000 total points
ID: 13791142
Benson... get ready to be happy.

I was rootling through your library (just being nosey ;) and saw that you'd already turned some of the icons into buttons, albeit only one of them had a Down state. So I decided to try them out. Here's what I did:

1 - Removed the slices over the icons, and the one over the arrows.
2 - Edited the buttons you'd made so each one had an Up-state with no arrow, and Over- and Down-states with arrows.
3 - Converted the bitmaps that didn't have buttons into button symbols, and made them the same.
4 - Replaced the icon bitmaps with their respective buttons.
5 - Added the onClick behaviour to swap the disjoint image for each button (and un-tick the 'Restore on MouseOut' option).

Et voila! I'm afraid the arrow for the currently-down icon will always be visible as well as the currently mouseOver-ed one - otherwise each button would have to have behaviours linked to every other icon, which is likely to lead us back into the same confusing territory as before. But you can always make the Down-state arrow for each button a different colour to indicate the difference.

Now that my mouth's nearly stopped being numb, I'm off out. But do post back if you have further problems.
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

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

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…
Suggested Courses

571 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