Swap images while rolling over popup menu

Hello,
I've been playing with fireworks CS5 for some days now and made a first attempt on a website.
So far, i've made a navigation bar with two states in order to be able to add a simple roll over behavior, e.g. darkening text on rollover. I also have been able to make a dropdown menu (popup) via slices.
Then I decided to swap images when on nav bar headings. So far, so good.
When I did a preview in my browser, it appeared that as soon as I was leaving the nav bar, the image swapped back to the old setting. Perfect.
But when I did a mouse over on one of the dropdown menu's of the navigation bar, the image swapped back as well.. I've been trying, but didnt manage to find out how to fix this.
So, is there anyone here that knows if it is possible, and if so, how to keep images swapped to a second stage as long as the mouse is on the dropdown menu, but swaps back to the original state when leaving the dropdown and/or the navigation bar.
Thanks in advance,

Hi Bryan,
It may be possible to cheat and put this onto the button:
the option that you want is called TITLE.
if you set one of the other parameters (e.g. the label)
to be:
LABEL_TEXT" TITLE="TITLE_TEXT
basically when it adds the text onto the form it will wrap it in "
If it doesn't strip out the " from your text you should get your extra parameter.
it may slip past the portal checking.
I can't test it as I only have WebDB, but I have done something similar with javascript in WebDB.
good luck
Michael

Similar Messages

Swapping image on Roll-Over not swapping

I have a button that has an alternate image that I need the original image to sawp to upon roll-over.
I click on the initial image and on the Roll-Over state, selected the image for it to change to.
But when I preview or publish, the image does not swap. Am I doing something wrong or is this a bug?

i have followed the steps for putting the still image as the fill in normal mode and then the gif in teh rollover state. the gif locks instantly. this can be seen on the preview site
http://hibs.businesscatalyst.com
anyone know why this is happening?
if i just put in teh normal gif there isnt any trouble with it working

Swap another image when rolling over another one

i would like to roll over a small thumbnail and swap out a
larger image on the page. i've been trying all morning and i just
can;t seem to get it. what are the steps? i want to roll over
"thumb.jpg" and swap "text_large.jpg" with "product_large.jpg".
any help would be wonderful.

In DW we call this a disjointed (or disjoint) rollover -
here's a tut for
you........
http://www.dwfaq.com/tutorials/basics/disjointed.asp
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"divebombinc" <[email protected]> wrote in
message
news:ga620o$804$[email protected]..
>i would like to roll over a small thumbnail and swap out
a larger image on
>the
> page. i've been trying all morning and i just can;t seem
to get it. what
> are
> the steps? i want to roll over "thumb.jpg" and swap
"text_large.jpg" with
> "product_large.jpg".
> any help would be wonderful.
>

Encore CS4 crashes when export to image bluray disc (using popup menu)

Hi...
When a export the bluray project to image bluray disc, its works fine.
But, when i use popup menu, the exports crashs!!
Please, help me.
regards,
Andre

Jeff, thx for reply.
Yes, i create the popup menu in PS using template popup HD as model.
Import in encore project , link the buttons (buttons "red" not appear) and no errors.
Export and ... bummm! crashes!
I remove the popup menu and export normally.
Any software adobe apps is open while i export.
Andre

What happens when image count rolls over?

MY Canon Xsi is about to hit 10,000, and will roll over in the counting. What will happen in Aperture if I am using a referenced master setup? What about if I just change things to a all incorporated database?
Or, would it be better to start importing with customer names to eliminate duplicates?
I do have 25,000 shots from an old Pentax, so I already have some duplicates with 3 matches.
Thanks.

I love the XSi. Great little camera!
The counter will restart and the camera will begin writing to a new directory on the memory card. I believe it'll start writing in CANON101 instead of CANON100, or something like that
A standard naming convention might be a good idea, but it's really up to you.

I'm trying to find code that has a seek bar roll over effect as HULU and YouTube.

Hi
The seekbar roll over will not just show the NetStream.time but also has the frames screen shot. I've searched several sites but no clear answer yet.
I'm using actionscript 3 in FLash CC and can also use Flash Builder.
Thanks

Please find the below code -
1) Use your actual variable instead of dummy.
2) Position of thumbnails should be move as per mouseMove on seekBar. Get the mouse X posion and set the xpos of your thumbnail which contain either Video object or image display holder.
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import org.osmf.events.TimeEvent;
import flash.utils.Timer;
import flash.net.NetStream;
public class SeekThumb extends MovieClip {
private var seekBtn:MovieClip;
private var getVideoFrameAtSecond:Number = -1;
private var durationOfVideo:Number = 100// Asume that we have 100 seconds video
private var timer:Timer;
private var counter:Number = 0;
private var delay:Number = 1; // It can be updated as per smoothness.
private var netStream:NetStream;
private var lastSeekPos:Number;
public function SeekThumb() {
// constructor code
this.addChild(createSeekButton());
timer = new Timer(200);
timer.addEventListener(TimerEvent.TIMER, updateQos);
counter = delay;
private function createSeekButton():MovieClip{
seekBtn = new SeekButton();
seekBtn.buttonMode = true;
seekBtn.addEventListener(MouseEvent.MOUSE_MOVE, seekMouseMove, false, 0, true);
seekBtn.addEventListener(MouseEvent.ROLL_OVER, seekOver, false, 0, true);
seekBtn.addEventListener(MouseEvent.ROLL_OUT, seekOut, false, 0, true);
seekBtn.x = 50;
seekBtn.y = 100;
return seekBtn;
private function seekOver(event:MouseEvent):void{
timer.start();
private function seekOut(event:MouseEvent):void{
timer.stop();
private function updateQos(event:TimerEvent):void{
//trace("counter = "+counter)
if(counter>0){
counter--;
}else{
// Enable below funtion as per your need.
//updateVideoFrame(getVideoFrameAtSecond);
//addImageOfVideoFramesAt(getVideoFrameAtSecond);// If you want to show your bitmap image then pass the bitmap image params here or customize your methods here
trace(getVideoFrameAtSecond);
private function addImageOfVideoFramesAt(seekTime:Number):void{
var getBitmapMovie:MovieClip = myStoredThumbArray[seekTime]// Set the image url here from array which you have already stored/ traced from main source of image which you provided.
previewHolder.addChild(getBitmapMovie);
private function updateVideoFrame(setId:Number):void {
try {
if (netStream!=null && lastSeekPos!=setId) {
lastSeekPos = setId;
netStream.play(netStreamURL, setId);
netStream.pause();
//netStream.soundTransform = setVoluem to 0
} catch (error:Error) {
trace("UpdateVideo Frame Error: "+error);
private function seekMouseMove(event:MouseEvent):void{
var currentMc:MovieClip = MovieClip(event.currentTarget);
getVideoFrameAtSecond = Math.round(currentMc.mouseX*durationOfVideo/seekBtn.width);
counter = delay;
Re: How to show video frames as still preview image when roll over on seek bar just like Hulu?

Having problems with swap image (roll over effect)

I am trying to do a roll over state (swap image) for a linked item on my mock up. I've done this for other pages in the same file, but for some reason on another page, when I build the second state, insert the slice, and create the swap image on the first state, it previews in the browser with just a white screen and the section that I sliced. How come it is showing a white page in lieu of my entire mock up with the roll over effect?

I am trying to do a roll over state (swap image) for a linked item on my mock up. I've done this for other pages in the same file, but for some reason on another page, when I build the second state, insert the slice, and create the swap image on the first state, it previews in the browser with just a white screen and the section that I sliced. How come it is showing a white page in lieu of my entire mock up with the roll over effect?

1) Drop Down Menu 2) Roll Over Images & 3)

Does anyone know away to make these things possible on iWeb (or if it is not even possible)
1)
I'd like to have a drop down menu so that my sites are not so cluttered.
Here is an example:
http://www.drsteinhealing.com/doctor/chiropractor/2L/Encino/homepage.htm
2)
I have seen rollover images in flash, but I hear that it is possible without flash and I think it would be great to have some pictures as such for the menu. I would think this would be possible because right now there is a rollover color change to words that are links if you want it to change colors... so:
a) is flash possible on iWeb
b) even if it is not: is there a way to have rollover images and
c) can there be roll over images that are also links?
Here is an example:
http://planetrobyn.com/ (the pictures go from black and white to color and then they are also the menu)
I'm learning so it would be great to see if these things are possible. Thank you.

See these menus.The menus are HTML and CSS only.
http://www.wyodor.net/Demo/iWebeend.html
http://www.wyodor.net/_Demo/tmf/Duckmenu.html
The first menu has the menu hardcode in the published webpage.
Check the source to see how it's done.
The second menu has a textbox at the top of the page. A JavaScript in the HTML Snippet finds that textbox and place the menu in it.
This is pasted in the HTML Snippet :
<script src="../../../duckmenu/duckmenu.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">

</script>
This JavaScript places the menu in the textbox :
http://www.wyodor.net/_Demo/duckmenu/duckmenu.js
The menu at drsteinhealing is HTML/CSS only too. So if you like it, grab the code + stylesheet and use it.

Can Dropdown menu item stay on the "roll over" state while the user's mouse is hoving over the sub

Can Dropdown menu item stay on the "roll over" state while the user's mouse is hoving over the parent's sub-menus?
Thanks

Thanks for the response. My main goal here is to get the drop
down menu word "Overview" to remain red once it reaches the frame
"WhoWeAre" or "OurMission" on the main timeline. If I turn the
button inside the movie clip into an MC to do this, the drop down
menu no longer works. Any thoughts on how to get this drop down
menu to do this?

Roll over images in a slide show

I am trying to make a slide show of before and after images for a client.
Rather than just have them all one after the other, I want all the after images to display as normal, and the before to display on hover for each slide.
I can make this work in a basic slide show when rather than adding an image to the Hero Image box, I use the fill and states.
However this only allows me to do one, as I can't add any more empty Hero Image boxes (or I don't know how to do that, is it possible?)
When I add an image via the slide show menu it appears on top of any fills, and I can't seem to give images added this way a roll over state.
Can anyone tell me how to either add extra blank Hero Image boxes, or how to apply the effect I want to the images in the Hero Image boxes.
Thanks in advance, if there is any further info I can provide about my problem, please let me know!
M

Hi,
You cannot add multiple hero image boxes within the same Slideshow. Now , you can use different slideshows for your different images but that wont give you the slideshow effect but you will be able to see all your after images at once and then if you rollover them you would be able to see the before images.
Now, In order to create the effect that you want, what I would suggest you is to use a 'Composition widget'. In the composition widget, you can make the triggers as small thumbnails for your images and in the Target you can set the fill as your after image and in rollover state you can use the before image. After this you can use the Autoplay feature available in the composition widget and you will get the desired result.
Hope this helps
Regards,
Rohit Nair

Display popup window on roll over on the cell in ADG

Hi All,
I want to create a application where a popup window will be opened when user mouse roll over on a cell and closed when roll out from the cell. actually i want to use a popup window same as toolTip feature of ADG. I have implement it by many ways:
1. by combination mouse move, ITEM_ROLL_OVER, ITEM_ROLL_OUT of ADG.
2. By Rool over and roll out of custom item renderer But each time i am facing a run time error while rolling mouse in cell. error is in updateLastActiveForm() of systemManager class.
Get the project file from here http://old.nabble.com/file/p29836926/popupinColumn.zip
Error:
Error
        at mx.managers::SystemManager/updateLastActiveForm()[C:\autobuild\3.2.0\frameworks\projects\ framework\src\mx\managers\SystemManager.as:5087]
        at mx.managers::SystemManager/activateForm()[C:\autobuild\3.2.0\frameworks\projects\framewor k\src\mx\managers\SystemManager.as:2352]
        at mx.managers::SystemManager/activate()[C:\autobuild\3.2.0\frameworks\projects\framework\sr c\mx\managers\SystemManager.as:2307]
        at mx.managers::FocusManager/creationCompleteHandler()[C:\autobuild\3.2.0\frameworks\project s\framework\src\mx\managers\FocusManager.as:1592]
        at flash.events::EventDispatcher/dispatchEventFunction()
        at flash.events::EventDispatcher/dispatchEvent()
        at mx.core::UIComponent/dispatchEvent()[C:\autobuild\3.2.0\frameworks\projects\framework\src \mx\core\UIComponent.as:9298]
        at mx.core::UIComponent/set initialized()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as :1169]
        at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\3.2.0\frameworks\projects \framework\src\mx\managers\LayoutManager.as:718]
        at Function/http://adobe.com/AS3/2006/builtin::apply()
        at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\3.2.0\frameworks\projects\framew ork\src\mx\core\UIComponent.as:8628]
        at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\3.2.0\frameworks\projects\framewo rk\src\mx\core\UIComponent.as:8568] Please let me know if any one have a solution. Thanks
Sachin dev tripathi(DevSachin)

1. adding a RawText item to your page.
2. binding a attribute of VO to the RawText. (ex: VO Name:TempVO; Attribute name:Script)
3. writing coding in your processFormRequest
am.invoke("showMessage");
4. writing a method in your AM
public void showMessage()
Row row = getTempVO().first();
row.setAttribute("Script", "<script>alert('test');</script>");
}

Roll-over images

Does RoboHelp support roll-over images?
I've tried every way to insert a roll-over image into my
project, including editing the html page in dreamweaver but as soon
as I open it up in RoboHelp and generate it the images either does
not change or it is not visible.
Please advise...
Thanks,
Susy Carrillo

You might take a look at
Walter
Zorn's free tooltip utility, a really neat onMouseover
application that makes your tooltips look like popups, including
the use of links within them.
You can use it for text links or in combination with image
maps. So far, I'm using only the former, but I'll be using the
latter for some new, complex C# screens in our next version
release.
There are a few things that can trip you up, such as: all the
HTML inside the Javascript area (the
escape('Some text') portion) cannot have carriage returns;
and certain characters must be escaped with a backslash (such as
replacing double quotes with backslashed single quotes). However,
it's all explained quite well on his site. You can control
backgrounds, transparencies, images, placement, etc.
As Peter says, do all your testing in a scrub project before
going live in the real one.
Good luck,
Leon

RoboHelp 8 HTML WebHelp How to display a larger image of a thumbnail by clicking on or rolling over the thumbnail?

How would you display a larger image of a thumbnail by clicking or rolling over the thumbnail?

Hi there
For a mouseover you would have to add some custom developed JavaScript. You could probably find some pre-made on the web if you poked around.
Generally speaking, any way you slice it you will be using two images. One for the thumbnail and one for the full sized image. You could employ the popup functionalty to pop up the larger image.
I used to simply create DHTML drop-downs and insert the large images in the drop-down area.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

How do I fade in a roll over image

Hi,
I have a roll over text/png to link on my home page that I would like to fade in.
I saw something on the net and tried it and it didn't work.
Any thoughts? I realize these won't CSS work on all browsers. Should I go to Java?
My home page: www.adjacentdimensionsmedia.com
HTML:
<div class="clearovalfortree">
<a href="portfolio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/treewithtextversion3.png',1)" class="opacity" >
<img src="clearovalfortree.png" alt="text for tree2" width="800" height="600" id="Image10"></a></div>
CSS:
img.opacity {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 1s linear;
img.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 1s linear;
Paul

All you need to do is place the images on top of each other and change the opacity of the top image on hover as in
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
#test {
    width: 800px;
position: relative;
margin: auto;
#test img {
    width: 800px;
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
#test img.top:hover {
opacity: 0;
</style>
</head>
<body>
<div id="test">
    <img class="bottom" src="http://www.adjacentdimensionsmedia.com/images/treewithtextversion3.png" alt="">
    <img class="top" src="http://www.adjacentdimensionsmedia.com/big-tree-final1.jpg" alt="">
</div>
</body>
</html>

I want to create a Roll Over on part of an image.

Good day.
I would like to create a HTML page like this: Cherry Hill Mall | Directory for a Mall.
My plan is to create a image and then trace the specific store like a hotspot and then link a roll over to it. But I'm not sure if its possible. Is there perhaps a better way of doing this.
Kind regards
Joleen

I agree with Murray's suggestion about maphighlight. You'll also need some stylish tooltips for the detail boxes.
Tooltip | jQuery UI
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
Nancy O.

Swap images while rolling over popup menu

Similar Messages

Maybe you are looking for