Disjointed rollovers (I think)

Merrily creating rollovers where a larger image appears in a box to the right, but what I have now been asked to do is make the image larger where the original photo is. I know with normal rollovers that the images both have to be the same size, and when I try and do a disjointed rollover in this situation the background blank gif seems to want to stay at the front of the image I want to roll over. How do I "magnify by rollover" ? Please tell me the name of what I am trying to do here, so I can also do a search and tutorials on it.
Thanks!!

Hi,
do yo remember my answer from: http://forums.adobe.com/message/2591746#2591746. To illustrate the situation better, I attached two photos I've designed with "MS photo editor".
Header 1
Header 2
... and here is a comment from a friend of mine. I quote: "... Example is that you have 6 25 x 25 px thumbnails in a column on the left side of a page. On the right you start with one picture 250 x 250 px. As you mouse over each 25 x 25 thumb, the 250 x 250 larger picture is replaced with a 250 x 250 pic of the thumb you are mousing over. The "must be same size" refers to the enlarged pictures. You can't have different sizes for the larger images."
HCH
Hans-G.

Similar Messages

Can disjointed rollovers be responsive?

Hi All:
My client wants a tool develped for his website that will allow customers to develp their own widget. The website is currently built to be responsive (i.e. elastic to adjust to whatever viewport size a customer might visit the site with whether a desktop or a mobile device). My first question to this group is can disjointed rollovers created with Fireworks be responsive? Thanks.
Bob Green
www.bobgreen.com
W7 Home Premium, PC, FW CS5.

Thank you for the help. I think I may be confused by the addition/need for linked text in the target image.
I know I should code things in Dreamweaver, but I do not know how to add the text to each target image. You see, I have a navigation bar with simple icons. Above this bar, I have one slice that is to contain sub-navigation links.
For example, I have a slideshow icon. When the user rolls over this icon, I want the slice above to display with listed text that is linked to the appropriate slideshow page.
Is there a way to do this? I know I have seen it is some sites, can't find them now though.
Any advice?

DW CS3/GoLive Disjointed rollovers

I have a table with several columns of text--a list of names of artists. I want users to be able to move their mouse over the names and small rollovers appear on another part of the webpage--disjointed rollovers.
http://www.printworkschicago.com/artists/artists.htm
I created my site in GoLive years ago, and I'm updating this particular page in DW CS3 for the first time. Now I understand GoLive didn't write proper JavaScript code, and the disjointed rollovers there now aren't the way DW CS3 wants them to be coded. (GoLive called them "remote rollovers")
My prob is this: when I try to make a simple change to the rollover--such as, add a name to the list of artists, and I use the Behaviours panel, use the swap image command, etc., all the other JavaScript effects on the rest of the page go kablooey.
Someone told me that I'm going to have to recreate my page over from scratch to rid the code of bad JavaScript codes. Is this true? Should I just go back to GoLive for the one page--for now--until I can recreate the page from scratch?
Thanks in advance.

salmdesign wrote:
I have a table with several columns of text--a list of names of artists. I want users to be able to move their mouse over the names and small rollovers appear on another part of the webpage--disjointed rollovers.
http://www.printworkschicago.com/artists/artists.htm
I created my site in GoLive years ago, and I'm updating this particular page in DW CS3 for the first time. Now I understand GoLive didn't write proper JavaScript code, and the disjointed rollovers there now aren't the way DW CS3 wants them to be coded. (GoLive called them "remote rollovers")
My prob is this: when I try to make a simple change to the rollover--such as, add a name to the list of artists, and I use the Behaviours panel, use the swap image command, etc., all the other JavaScript effects on the rest of the page go kablooey.
Someone told me that I'm going to have to recreate my page over from scratch to rid the code of bad JavaScript codes. Is this true? Should I just go back to GoLive for the one page--for now--until I can recreate the page from scratch?
Thanks in advance.
The answer really depends on the code on the page. Things don't just go 'kablooey' - it happens for a reason. Looking at the code will tell you what that reason is.
There is no a priori reason why adding a DW behavior to a page containing GL markup would cause a kabloeey event. Can you show us the page in its broken state?

Use menu rollover with disjointed Rollovers

I am using a menu with disjointed rollovers but I want to know how I can have rollover images on the menu as well without using the restore image function. I want to have a rollover swap image on the menu item and when it is clicked on the main image changes and stays changed until another menu item is clicked. I can do this but the menu rollover image stays "on" even when the mouse is not over it.

i finally figured it out. i opened the html file in dreamweaver and in the behaviors panel, change the tag to "MouseClick" swap image.

Caption in disjointed rollovers

Using Dreamweaver CS3 (WinXP), is there a simple way to add captions to disjointed rollovers?
My aim is to click on a thumbnail, and when the image is projected on the poster, I want a caption appearing underneath.
Can you please help me with this
Thanks

Without a link to see what you have so far, it's hard to make recommendations. Not too sure how you're creating your disjointed rollovers (scripts or CSS). Below are some links that might help.
Pure CSS Disjointed Rollover - captions in span tags
http://alt-web.com/DEMOS/CSS-Disjointed-Menu-Rollover.shtml
4Level Lightbox Extension for DW - captions below images
http://www.fourlevel.com/dreamweaver/extensions/lightbox/index.htm
Disjointed Rollovers in CS3 using Image Swap Behavior
http://www.communitymx.com/content/article.cfm?cid=E11E8
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

CSS disjointed rollovers with animation?

im redesigning my site and for some reason my rollovers arent working. the top two thumbs are active.. nike and coke:
http://www.toddheymandirector.com/SPOTS/index_2010.html
would it make sense to try this in CSS? and can CSS do disjointed rollovers with animated gifs?

They work for me, but you are not doing yourself a favor by letting the QT file auto-play. It will block UI interavctivity in many cases. As for you otehr question - an image is an image. CSS doesn't care whether the format in itself is animated or static.
Mylenium

Disjointed Rollovers in FireFox

I was practicing disjointed rollovers and driving myself
crazy. They just wouldn't work in the browser preview (I use FF as
my browser) Finally I tried to preview in IE 6 and it worked fine
as it did in Opera 8 and Netscape 8. Is there something stange
about FF for this behavior?
Code Below

Fred
Do you have JavaScript turned off in FF?
Dave
"Fred1000" <[email protected]> wrote in
message
news:e45q32$63j$[email protected]..
> I was practicing disjointed rollovers and driving myself
crazy. They just
> wouldn't work in the browser preview (I use FF as my
browser) Finally I
tried
> to preview in IE 6 and it worked fine as it did in Opera
8 and Netscape 8.
Is
> there something stange about FF for this behavior?
>

Disjointed Rollovers with .SWF files

Is it possible for me to create a disjointed rollover so that
when I mouse over one image it will make another image switch to a
.SWF file? Or do I have to convert the .swf file into an animated
.GIF file?
How can I make an image switch to something else when I mouse
over a totally different image?

> Is it possible for me to create a disjointed rollover so
that when I mouse
> over
> one image it will make another image switch to a .SWF
file?
Not in any easy way that I can think of.
> How can I make an image switch to something else when I
mouse over a
> totally
> different image?
Behaviors: swap image
-Darrel

Disjointed Rollovers with different results

Hi,
In Dreamweaver CS4 I'm trying to do a disjointed rollover that swaps one image on mouseover and restores it on mouseout (a simple navigation bar rollover) and swaps a second image onclick and doesn't restore the original (an image in the main content area). Right now both images restore on mouseout:
http://inkllusionist.com/test
I realize I may be going about this the wrong way... any advice? Should I try to do this with something other than the javascript behaviors?
...Later...
Well, after more searching I found the answer in a very nice video on youtube.
http://www.youtube.com/watch?v=hN_MhdmtCsM&feature=colike
It explains that you set the simple rollover using the behavior "Set Nav Bar Image" and you do the main image swap using the behavior Swap Image and set that to <A> onClick and uncheck Restore images on Mouseout. It's so simple when ypu know how. lol.

> Is it possible for me to create a disjointed rollover so
that when I mouse
> over
> one image it will make another image switch to a .SWF
file?
Not in any easy way that I can think of.
> How can I make an image switch to something else when I
mouse over a
> totally
> different image?
Behaviors: swap image
-Darrel

Disjointed rollovers & lightbox help

Hello,
Im a newbie taking some classes & trying to get into the code but it gets frustrating at times.
I have 2 sets of rollover buttons on one page.
The first set is a bunch of categories (ads, brochures, Illustrations, etc).
The second set are thumbnails of those categories. When you roll over a thumbnail, the category button turns on, the problem is that the button will not turn off. ( I think it has something to do with the swap image restore behavior)
problem #2 (lightbox)
All of the the thumbnails will open up an image in lightbox when you click on them, I wanted to have the category buttons also start the series of lightbox images that are in that category. I have assigned the first image to the category button, that same image is also assigned to the first themnail button in that category. so when you go through the next buttons, you actually see the first image twice. I had theis fixed & then I must have accidentally deleted the code that I had working.
Ultimatley I would like to be able to have all of the thumnails also light up when you roll over the category button.
Here is a section of the code from the category buttons: I think Ive tried different placement of swap image restore on all of these, but none seem to be working.
<a href="images/portfolio_images/ad_wno1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif',1)"><img src="images/btn_nav/btn_ads_off.gif" alt="Advertising" name="ads" width="100" height="20" border="0" id="ads" /></a>
<a href="images/portfolio_images/broc_wno0910.jpg" rel="lightbox[broc]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('brochures','','images/btn_nav/btn_brochures_on.gif',1)"><img src="images/btn_nav/btn_brochures_off.gif" alt="Brochures" name="brochures" width="100" height="20" border="0" id="brochures" onmouseout="MM_swapImgRestore()" /></a>
<a href="images/portfolio_images/ill_gnatty.jpg" rel="lightbox[ill]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('illustration','','images/btn_nav/btn_illustration_on.gif',1)"><img src="images/btn_nav/btn_illustration_off.gif" alt="Illustration" name="illustration" width="100" height="20" border="0" id="illustration" /></a>
and here is a section of code from the thumbnails
<a href="images/portfolio_images/ad_wno1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wno_ad1','','images/thumbs/thb_ad_wno1.jpg',1)"><img src="images/thumbs/thb_ad_wno1_bl.jpg" alt="WNO Ad1" name="wno_ad1" width="100" height="100" border="0" id="wno_ad1" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
<a href="images/portfolio_images/ad_hf1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ad_ht1','','images/thumbs/thb_ad_hf1.jpg',1)"><img src="images/thumbs/thb_ad_hf1_bl.jpg" alt="Headfirst Ad" name="ad_ht1" width="100" height="100" border="0" id="ad_ht1" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
<a href="images/portfolio_images/ad_mink1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mink1','','images/thumbs/thb_ad_mink1.jpg',1)"><img src="images/thumbs/thb_ad_mink1_bl.jpg" alt="Mink1 Ad" name="mink1" width="100" height="100" border="0" id="mink1" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
if you want to see the beta site go to:
www.malleygraphics.com/webtest
user:guest
pw:getinmg
its the portfolio section
thanks .. I hope I explained my problem well enough to get some feedback.

Hello Again Murray ...
Thanks for the tips, that made perfect sense, I was able to update all of my buttons to work the way I wanted them too.... and I even made the thumbs swap when rolling over the category buttons ... Thank You!
Im still having an issue with the way that lightbox is working.
I want to be able to start the series of lightbox images if you click on the category button, or the thumbnail
I cant seem to figure out how I can make it so that it wont show the image twice, I tried removing the first jpg (in the code of the category Button) but that didnt work.
Category button code:
<a href="images/portfolio_images/ad_wno1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif','ad_wno1','','images/thumbs/thb_ad_wno1.jpg','ad_ht1','','images/thumbs/thb_ad_hf1.jpg','mink1','','images/thumbs/thb_ad_mink1.jpg',1)"><img src="images/btn_nav/btn_ads_off.gif" alt="Advertising" name="ads" width="100" height="20" border="0" id="ads" /></a>
Thumb code:
<a href="images/portfolio_images/ad_wno1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif','ad_wno1','','images/thumbs/thb_ad_wno1.jpg',1)"><img src="images/thumbs/thb_ad_wno1_bl.jpg" alt="WNO Ad1" name="ad_wno1" width="100" height="100" border="0" id="ad_wno1" /></a>
<a href="images/portfolio_images/ad_hf1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif','ad_ht1','','images/thumbs/thb_ad_hf1.jpg',1)"><img src="images/thumbs/thb_ad_hf1_bl.jpg" alt="Headfirst Ad" name="ad_ht1" width="100" height="100" border="0" id="ad_ht1" /></a>
<a href="images/portfolio_images/ad_mink1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif','mink1','','images/thumbs/thb_ad_mink1.jpg',1)"><img src="images/thumbs/thb_ad_mink1_bl.jpg" alt="Mink1 Ad" name="mink1" width="100" height="100" border="0" id="mink1" /></a>
any ideas?
here is the link again if that helps
http://www.malleygraphics.com/webtest/portfolio.html
user: guest
pw: getinmg
I can post this as a separate question if you like to get the points (im not sure what that's all about) ... you did answer my swap image question.

Multiple target images for disjoint rollovers

I have one large image on the left that serves as the target
(area?) and 4 smaller images on the right that should serve as four
separate triggers. When moused over, each trigger should cause a
separate image to appear in the trigger area.
I've been successful using Fireworks to make that happen for
one trigger but can' only get on trigger/target to happen.
Can someone help me with this.

> Can someone help me with this.
Don't do this in FW. The HTML that FW writes is really only
suitable for
proptyping. For production work, do such things in DW.
There is a good disjoint tutorial here -
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
==================
"c15202" <[email protected]> wrote in
message
news:g6v1pc$n4j$[email protected]..
>I have one large image on the left that serves as the
target (area?) and 4
> smaller images on the right that should serve as four
separate triggers.
> When
> moused over, each trigger should cause a separate image
to appear in the
> trigger area.
>
> I've been successful using Fireworks to make that happen
for one trigger
> but
> can' only get on trigger/target to happen.
>
> Can someone help me with this.
>

Disjointed rollovers?

Is there a way to make different text appear on the dvd menu in the same spot depending on which button you rollover like on a website:
http://reelherofilms.com/spots/
thanks

Layered menus
Layered Menus Link
You would add text to different layers (to the right side as in the link you had) and those layers would be shown when the button is rolled over. Note there are limits to layered menus and compatibility

Disjointed Rollovers with show / hide layers

Creating a series of thumnails on a page which, when clicked
on, will bring up full size image in one spot and relevant text in
another. I'm using Show / Hide Layers to do this. I've got it all
working fine except stumbling on one thing. Probably obvious.
The question I have is how to make the currently showing
layers go away when the user clicks on another thumbnail. If I was
using onMouseover and onMouseout then that would be simple. But I
can't figure out how to automatically make the layers currently
showing go back to being hidden when another thumbnail is clicked.
What I get instead is the new layers appearing on top of the old
ones and making a mess.
Probably an obvious solution, but my brain is not getting it
at the moment. Suggestions?
Thanks...
-Jesse

Don't use the show/hide at all. Use SetText of Layer to write
the required
content into a single layer.
Or - if you don't quite get that, just use PVII's AutoLayer
extension which
will show one and hide all the rest automatically.
http://www.projectseven.com/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"JesseLY" <[email protected]> wrote in
message
news:f61nbm$9sn$[email protected]..
> Creating a series of thumnails on a page which, when
clicked on, will
> bring up
> full size image in one spot and relevant text in
another. I'm using Show /
> Hide
> Layers to do this. I've got it all working fine except
stumbling on one
> thing.
> Probably obvious.
>
> The question I have is how to make the currently showing
layers go away
> when
> the user clicks on another thumbnail. If I was using
onMouseover and
> onMouseout
> then that would be simple. But I can't figure out how to
automatically
> make the
> layers currently showing go back to being hidden when
another thumbnail is
> clicked. What I get instead is the new layers appearing
on top of the old
> ones
> and making a mess.
>
> Probably an obvious solution, but my brain is not
getting it at the
> moment.
> Suggestions?
>
> Thanks...
>
> -Jesse
>
>
>

Disjointed rollovers using images w/transparency

Hi all!
I am trying to build a configurator which will allow me to change different elements (colors) of an object (like a car). In order to do this cleanly and properly, I'd need to use images with transparency, like a PNG/GIF file.
1. Is it possible to use tranparent files for this purpose?
2. Will I be able to overlap images? For example, if I want the wheels a different color than the body, the images will need to overlap even though they're rectangle shaped essentially (which is why I'd need to use transparency).
3. Is it possible to do this using all CSS?
4. Are there any tutorials out there available?
Thanks in advance!!

I've only seen this done with Flash.
Example, click "see colors" for a demo
http://www.chevrolet.com/corvette-grand-sport-convertible/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CSS Disjointed Text Rollovers help?

Hi All
I am new to the site and have a question to ask,
I have been playing around with the demo created by Nancy O, for css disjointed text rollover. What i would like to find out is, once i have created the rollover and i hover over it, the text in the window is all active. is there a way to "de-activate that text? so once i have created it all, have the "read more" on my page, click on it and the rollover opens. i have say for example three paragraphs, but my cursor shows that the whole window is active. i want to change that so that there might only be a little image to say close and that the cursor goes back to normal within that window.
It sounds simple if i think about it but cannot get it to work.
This is the demo i have been paying around with. http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml#
any help would be greatly appreciated.
please let me know if i need to give any more info.
Thank
Craig S

Instead of CSS disjointed rollovers, sounds like you need show/hide layers
http://alt-web.com/DEMOS/Show-Hide-Layers.html
Or perhaps an accordion panel like this extension from Project Seven
http://www.projectseven.com/products/tools/accordion/index.htm
Nancy O.

Disjointed rollovers (I think)

Similar Messages

Maybe you are looking for