Swap images and hover features

Here is a page to help explain my question better - http://www.leadbitterglass.com/etched_glass_designs/dragdroptest.htm
Hi all, I am trying to create a page where visitors can click one small image (containing a corner of the border) to make a larger image appear somewhere else on the page (the full border design). Once the image has been clicked, I want to be able to allow the user to then hover over other images (flowers and vase image) and these images will then appear 'over' the original clicked image result, showing the border and vase together. I can create the images as transparent gifs so that isn't the hard part. The image below is what I want the final result to look like for the user once the corner border image is clicked and then the vase image is hovered over.
Does anyone know how to create this with dreamweaver? many thanks
PS I am using Dreamweaver cs5.5

Explore "disjointed rollover" or "set text of container" techniques.
You can use a "disjointed rollover" assigning an onclick behavior to the small corner image to trigger the display of the large border-only image and assigning a mouseover behavior to the small vase image to trigger display of the image you posted above.

Similar Messages

Swap Images and URLs at the Same Time

I would like to not only to swap images when one rolls over a thum image, but at the same time I would like to have a link swapped in the new image. I am using behaviors to swap multiple images on a page. So to be clear I have several thums that one can roll over. When a thum is rolled over with the mouse a large image is swaped in a different location on the page. I would like to be able to attach a unique link to a URL to each of these new large images when they are swapped.

The link below will take you to a life page. In this example, the changing
text below the large changing image is in fact an image that is swaped out
as one moves the mouse over a thum on the right side of this page. This
changing text image will have an "Add to Cart" button. The button could be
part of the text or perhaps yet another image that changes as one moves
over the thums on the right. Here is where I need the help. As one clicks
on this text image that is changing (or changing button) I would like to
have a link associated with this image that will add the customors choice
of pillows to their cart. Need help with how to associate a unique link to
unique URLs with this changing text image.
Life page: http://katetroyer.com/Pillows.html

I am having problems with viewing flash plugins on websites. it seems that the firefox 5 is inlarging the flash piece thus skuing the image and inabling features of the flash object itself.

most important issues i am having are the following are as follows:
1) on www.alliedelec.com the main image in the flash rotating banner is skued from being enlarged.
2)http://www.alliedelec.com/eaton-control-automation/ on the bottom of the page there is a flash video player which is missing the controlbar at the bottom and cutting off the video previews on the side due to the flash oject being enlarged.
i have checked this in older versions of firefox and other browsers and ff5 is the only browser which is having an issue and one in need fixed asap.
Please Help!!!!

No problems here on Linux with the Flash objects on both pages.<br />
I see the control bar.
Make sure that you aren't zooming anything on that page.

Dreamweaver Firefox swap image problem

I have a navigation bar that uses swap images and hidden
layers. It worked from spring 2007 until recently. Now in Firefox
nothing happens when the mouse goes over the image. I have been
told the same problem has recently begun with Safari. It still
works fine in Internet Explorer. What has changed and how can I fix
this problem?
My website is: www.fumcpalestine.com
My problem has be resolved. It was caused by z index of
heading overlaying the z index of navigation bar in case others
have the same problem.

There is an error in your doctype declaration that is likely making IE soil itself.
Change...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
to...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
And see if that helps.

How to add a 'Download' feature in image and video gallery?

Hello,
I have created an image gallery on one screen and placed few videos on another screen.
Now, I want to add a download feature in photos & footages both.
Does anyone know how so I do that?
Prompt response will be highly appreciated.
Thanks in advance.
Jay

Hi,
Could you please provide additional information on what you mean by Download feature ? Where do you want to download these images and video from ?
Olivier

Pic Ratio and Swap Image Behaviour

Alrite guys, iv been picking up my web design skills by
developing my own site, and as part of that iv design a gallery
with thumbnails circling a central picture. now iv used the swap
image behaviour to change the thumnail to the central large pic,
unfortunatly the pictures are stretching to the limit of the slice,
is their anyway to fix the ratio of all the pics am using so they
come up in their original size rather than being stretched beyond
the original?
Cheers
Dark

You can do this many ways ways -
1. Don't use swap image - use Show/Hide layer instead. Have
the alternate
image in a hidden layer that is shown when the trigger is
'tickled'. Using
this method you can have images that are any dimension.
2. Use swap image, but remove the dimensions from the
original image's tag,
i.e., change this -
<img name="original" width="150" height="220" ...
to this -
<img name="original" ...
Now when you swap in your offsize image, there is no
predefined size to
change it to. Be aware that this method may well result in an
unpleasant
and undesirable 'rearrangement' of your page layout as it
adjusts to your
new image's dimensions.
3. Pad the smaller image with canvas background color on all
sides so that
all the images *are the same size*.
4. Use a SetTextofLayer behavior to change the image
reference in a layer
positioned so that it will show the desired larger image in
the proper
place.
5. Use the PVII ShowPic extension -
http://www.projectseven.com/
Take your pick....
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
==================
"Dark7722" <[email protected]> wrote in
message
news:fusck6$of2$[email protected]..
> the issue iv got is not the large images being reduced
(am quite happy to
> crop
> them to fit) but the much smaller images being stretched
from a horizontal
> rectangle to a much large vertical rectangle, their a
different shape from
> the
> central image to begin with
>

Have a MacBook Pro running Lion and an IMac running Snow Leopard. Want to Back up both images and restore on opposite machine. Essentially swapping images between hard drives. Is this possible and any "gotcha's" to look for? Thanks

Have a MacBook Pro running Lion (10.7.9) and an IMac running Snow Leopard (10.6.8). Want to Back up both images and restore on opposite machines. Essentially swapping images between hard drives. Is this possible and any "gotcha's" to look for? Thanks

If the MBP came with Lion, it most likely won't boot with SL. Easiest thing to do is create a bootable backup/clone of each to an ext HD, partitioned to hold each on a separate volume, ensure that the original machines can boot with their respective clones, and finally, try booting the other machine with the other clone. Images are useless since you can't boot with them to test them out.

Anyone know how to add audio without image and still use autoplay feature?

Does anyone know how I can add audio to a webpage without having to add an image and still be able to use the autoplay feature? Adding as hyperlink doesn't accomplish what I'm after. Thanks in advance for the education!

You can use the "hidden" song file method...
http://roddymckay.com/Satellite/CatchTheTide.html
You don't have to hide it completely if you don't want to - just reduce it to a small dot.

[svn:fx-trunk] 16334: Preliminary Spark Image and BitmapImage enhancement feature work.

Revision: 16334
Revision: 16334
Author:   [email protected]
Date:     2010-05-26 19:31:28 -0700 (Wed, 26 May 2010)
Log Message:
Preliminary Spark Image and BitmapImage enhancement feature work. Also included with this checkin is the ability for BitmapImage and s:Image instances to share an image cache. Queueing is next up to be checked in.
QE notes: Proceed with testing, though PARB related renames are pending. Not considered code complete.
Doc notes: Should begin reviewing new classes in preparation for doc'ing.
Bugs: None
Reviewer: Ryan
Tests run: Checkin, cyclone server Mustella tests.
Is noteworthy for integration: No
Modified Paths:
    flex/sdk/trunk/frameworks/mx-manifest.xml
    flex/sdk/trunk/frameworks/projects/framework/manifest.xml
    flex/sdk/trunk/frameworks/projects/framework/src/FrameworkClasses.as
    flex/sdk/trunk/frameworks/projects/spark/defaults.css
    flex/sdk/trunk/frameworks/projects/spark/src/SparkClasses.as
    flex/sdk/trunk/frameworks/projects/spark/src/spark/primitives/BitmapImage.as
    flex/sdk/trunk/frameworks/spark-manifest.xml
Added Paths:
    flex/sdk/trunk/frameworks/projects/framework/src/mx/graphics/BitmapScaleMode.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/graphics/BitmapSmoothingQuality.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/utils/LinkedList.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/utils/LinkedListNode.as
    flex/sdk/trunk/frameworks/projects/spark/src/spark/components/Image.as
    flex/sdk/trunk/frameworks/projects/spark/src/spark/components/Image.png
    flex/sdk/trunk/frameworks/projects/spark/src/spark/core/contentLoader/
    flex/sdk/trunk/frameworks/projects/spark/src/spark/core/contentLoader/ContentCache.as
    flex/sdk/trunk/frameworks/projects/spark/src/spark/core/contentLoader/ContentRequest.as
    flex/sdk/trunk/frameworks/projects/spark/src/spark/core/contentLoader/IContentLoader.as
    flex/sdk/trunk/frameworks/projects/spark/src/spark/core/contentLoader/LoaderInvalidationE vent.as
    flex/sdk/trunk/frameworks/projects/spark/src/spark/skins/spark/ImageLoadingSkin.mxml
    flex/sdk/trunk/frameworks/projects/spark/src/spark/skins/spark/ImageSkin.mxml

Rollover and swap image

Hi, I've created a rollover image that also replaces another
image elsewhere when rolled over. The original rollover does not
return to it's original state on roll out.
Any ideas?
Thanks Chris
<td width="100" height="20"><a
href="philosophy/philosophy.htm" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('philosophy','','images/navigation/philosophy_over.jpg',1);MM_s wapImage('black_band','','images/navigation/philosophy.jpg',1)"><img
src="images/navigation/philosophy_up.jpg" alt="Philosophy"
name="philosophy" width="100" height="20" border="0"
id="philosophy" /></a></td>

Do not use the automatic restore.
Apply a standard mouseover rollover to image1 to swap in
image1b and to swap
image2 to image2b. Do not enable the restore option. Make the
event
onmouseover.
Apply a second image swap behavior to swap image1 back to
image1, and image2
back to image2. Do not enable the restore option. Make the
event
onmouseout.
I note from your code that you have applied TWO onmouseover
events for the
original swap. Don't do that. Apply the behavior once, but
make that one
application swap both images, i.e., do not swap one image,
click OK, and
apply it again. Swap the first image, then find and select
the second
image, and swap it as well before clicking OK.
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
==================
"Tun Tun bags of fun" <[email protected]>
wrote in message
news:fm7jg5$f4c$[email protected]..
> Hi, I've created a rollover image that also replaces
another image
> elsewhere
> when rolled over. The original rollover does not return
to it's original
> state
> on roll out.
>
> Any ideas?
>
> Thanks Chris
>
> <td width="100" height="20"><a
href="philosophy/philosophy.htm"
> onmouseout="MM_swapImgRestore()"
>
onmouseover="MM_swapImage('philosophy','','images/navigation/philosophy_over.jpg
>
',1);MM_swapImage('black_band','','images/navigation/philosophy.jpg',1)"><img
> src="images/navigation/philosophy_up.jpg"
alt="Philosophy"
> name="philosophy"
> width="100" height="20" border="0" id="philosophy"
/></a></td>
>

Transparent Image and swap image

When I Fix the Trasparent png issue that i have been having
my swap image doesnt work in IE with the png could someone please
help?

link to your page?
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: DMX 2004: The Complete Reference, DMX 2004:
A Beginner''s
Guide, Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"Monarky2000" <[email protected]> wrote in
message
news:ep8631$has$[email protected]..
> When I Fix the Trasparent png issue that i have been
having my swap image
> doesnt work in IE with the png could someone please
help?

Swap Image Thumbnail Borders In IE

I'm creating a web site and am using swap image on a Photo Gallery page. In Internet Explorer the thumbnails in the swap image function show blue borders. In Mozilla Firefox the borders display as light green and changing to rust when I hover over the thumbnail which is what I want.
Is there a work around to solve this problem in IE?
The web site being created is http://www.aspenmountaincabin.com/photos.html
Thank you.

Add the below css styles to your css stylesheet:
#mainContent a img {
border: 2px solid #cccc99;
#mainContent a:hover img {
border: 2px solid #996633;

Image Over Hover not working in IE but fine in Firefox

I have a new page that I just uploaded today. You can find it here.
http://www.rugged-cctv.com/ruggedhd.shtml
If you scroll down to the section labeled Features that ALL of our Advanced DVRs share! with a bright blue background, you will see a picture of one of our products. In IE and Firefox that image shows up just fine, but when you hover over it a larger version of the image (and labeled) appears in Firefox but in IE I get a redX and the alt text.
My code for the right side of that blue section is here.
   <div id="features-two">
           <div align="left">Can perform 6 functions at once <br />
             <span class="smaller">(live display, recording, playback, network access, backup, and configuration)</span><br />
            <br />
            Smart Search, <span class="bold">Multi Time</span> / <span class="style14">Multi Day Search </span><br />
            <br />
            <span class="bold">15 User levels</span> at the DVR & <span class="bold">32 users</span> can access the DVR at once remotely<br />
            <br />
            <a class="popup" href="#"><img src="images/hd-components.gif" alt="Rugged HD Components" width="265" height="192" border="0"/> <span><img src="images/hdcomponents-labeled.jpg" alt="Rugged HD Components"/></span></a></div>
         </div>
Now the section above that with the gray background also has a hover image that is working in both IE and firefox is here. I've been staring at it way too long and just can't find my mistake. Help would be greatly appreciated.
<div id="features-two">
           <div align="left">            HDD
            Mirroring Capable on Internal Drives<br />
            <br />
            Direct <span class="style2">POS</span> and <span class="style2">ATM</span> Text Insertion<br />
            <br />
            <span class="bolding">Try to find another system with these specs!!!</span> <br />
            <br />
            <a class="popup" href="#"><img src="images/MonitoringOptions.gif" alt="Rugged HD Monitoring Options" width="265" height="192" border="0"/> <span><img src="images/hdsizechart.jpg" alt="Rugged HD Monitoring Options"/></span></a></div>
         </div>

Ken Binney wrote:
OS -
YOU IS DA MAN !
The Forum is DA MAN !
I'm just a sad information junkie. Now where's that sunshine and a cold beer

2009.04-1 archboot "Schlumpi" hybrid image and torrent file released

Hi Arch community,
Arch Linux (archboot creation tool) 2009.04-1, "Schlumpi" has been released.
To avoid confusion, this is not an official arch linux iso release!
Check Readme.txt file for more information on archboot.
ftp://ftp.archlinux.org/iso/archboot/Readme.txt
Hybrid image file and torrent is provided, which include
i686 and x86_64 core repository. Please check md5sum before using it.
Hybrid image file is a standard CD-burnable image and also a raw disk image.
- Can be burned to CD(RW) media using most CD-burning utilities.
- Can be raw-written to a drive using 'dd' or similar utilities.
This method is intended for use with USB thumb drives.
Please get it from your favorite arch linux mirror:
ftp://ftp.archlinux.org/iso/archboot/2009.04/
<yourmirror>/iso/archboot/2009.04/
Changelog:
GENERAL:
- kernel 2.6.29.1 usage
- pacman 3.2.2 usage
- RAM recommendations:
* arch or arch64 boot image
256 MB RAM i686/x86_64 (all packages selected, with swap partition)
* lowmem or lowmem64 boot image
96 MB RAM i686/x86_64 (all packages selected, with swap partition)
FIXES:
- fixed network settings in rc.conf on ftp install and dhcp
- fixed use mirror from ftp install
- fixed broken memtest binary
- fixed broken dmraid
New Setup Features:
- Added consistent menu dialog switching
- Added software raid, lvm2 and luks encrytpion creation support to setup
- Added new autoconfiguration of mkinitcpio.conf
- Added ntfs creation support in CD installation
(uses ntfs-3g, which is not supported in ftp installation mode!)
- Added root password dialog instead of plain shell dialog
- Added ext4 support
Environment changes:
- added virtio kernel modules for virtualization
- added crda for correct wireless support
- added ntfs-3g support
KNOWN ISSUES:
- iwlwifi-3945-ucode and ipw2100-fw is not complete.
Reason: One firmware file is missing.
Workaround:
- mount image and install firmware from image file.
eg. cdrom:
mount /dev/cdrom /src
pacman -U /src/core-$(uname -m)/pkg/iwlwifi-3945-ucode-15.28.2.8-1-$(uname-m).pkg.tar.gz
pacman -U /src/core-$(uname -m)/pkg/ipw2100-fw-3.1-2-$(uname-m).pkg.tar.gz
- grub cannot detect correct bios boot order.
It may happen that hd(x,x) entries are not correct,
thus first reboot may not work.
Reason: grub cannot detect bios boot order.
Fix: Either change bios boot order or change menu.lst to correct entries
after successful boot.
This cannot be fixed it's a restriction in grub!
Further documentation can be found on-disk and on the wiki.
Have fun!
greetings
tpowa
Last edited by tpowa (2009-04-25 13:28:59)

Could you include dhclient in the next iteration of the boot image?
I'm testing the boot image in virtualbox and dhcpcd can't get a proper configuration using dhcp, everything is correct except the dns servers.
I believe this may be due to a change (or bug) in vbox but what is curious is that dhclient can get everything right. I've seen threads where other people report having problems with dhcpcd and dhclient working properly (with physical machines I believe). dhclient would be there only as a fallback and would need to be invoked from the command line so it doesn't force any change in the setup scheme.

Swapping images/text question?

Hi, I am moving this question to this forum from general as I got a response suggesting that dynamic html could be the solution to my problem. Any guidance on how to set up the behaviour would be much appreciated.
The problem I have is that I have created a navigation menu using plain text that changes colour on hover and two images in different divs swap images. It all works fine using a standard behaviour but now the client has asked if I can also make the opposite work ie. when the user rolls over the image, then the text changes colour. Is this possible without creating the text elements as images and swapping them using a standard behaviour?
I am not very familiar with the capabilities of javascript so some guidance would be great.
The present draft site is here, so you can see the problem.
Many thanks
Richard

Hi Richard,
I suggest you to use javascript. I will try to give you a basic examle for this problem with a short explanation. Let's say you have the following html code
Here comes the default text of the elementThe image has the id of firstimage and the div#first will be the object where the text will swapped at onmouseover event.
The code above will catch the rollower event of the #firstimaged object and will make the ChangeTextofDivIdfirst javascript function run. With the used innerHTML property you may specify any html code instead of the 'the swapping text' .
Regards
Zoli

Swap images and hover features

Similar Messages

Maybe you are looking for