Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Harnessing Adobe's Web Bundle: Dreamweaver For Beginners

Creating Dynamic Layers in DW with Interactive Image Rollovers

Layers are a special kind of HTML elements that can be used as a container to hold other HTML elements and to show them dynamically using JavaScripts. We can stack more than one layer on top of each other. One or more layer can be made visible dynamically, by hiding others. But using Macromedia Dreamweaver you can do all this without even knowing JavaScript or coding.

In this tutorial we are going to use multiple layers stacked over one another, and make it viewable, when you mouseover an image. In this case study I have taken 2 rollover images: Image1, Image 2, and three layers: Layer1, Layer2 and Layer3.

When we mouse over on the Image1, the second layer will appear while Layer1 and Layer 3 will be hidden along with its content. Likewise for the Image 3, Layer1 and 2 will be hidden and only Layer3 will appear with its content. When we mouse out from the images, Layer 1 will come up again.

To achieve this follow the steps and enjoy!

1.  Creating rollover Images
First as I said let us create 2 Images. We can use Macromedia Fireworks to create the images. In our case I have designed 4 buttons; 2 for the up state and 2 for the down state.

After designing the buttons, open a new page in Dreamweaver and create a 2X1 table. Now Insert the images using, Insert>Interactive Images>Rollover Image. Browse and select the first one for the up state and the second one for the down state. ( I am assuming you have put the images in the proper folder.)

Now do the same for the next image, so that both the images are in the first column of the table as shown in this example.

2.  Placing Layers
Open Insert>Layer and place the Layer1. Move the layer into column2 of the table. Now you can write the content inside the Layer. Select the layer in the Properties Inspector and select Overflow as 'visible'. This makes this first layer the default layer and makes it visible while the page is being loaded.

Note down the position of the Layer (566px and 163px). Insert the second and third layers on the same position, so that they will sit over the first layer.

Now insert the text on those layers. (Note: Due to the overlapping of layers the text may not be clear. So, you can place the layers somewhere else, write down the text and then change the position of the layers to sit on the same position as the first layer.)

3.  Changing the Layer Properties
Select Window>Layers. You will get the Layer Inspector, with all the three layer details. Select Layer2 and Layer3 and if the eye is open click on it to close it for both of them. In the properties Inspector you can see the OverFlow is selected as hidden for Layer2 and Layer3. This enables Layer2 and 3 to be hidden while the page is loaded.

4.  Adding Behaviors
Now select the Image1 where we are going to add the dynamic Layer effects. Then Open Window > Behavior. You can see the Events and actions created by Dreamweaver for the Rollover Images which we did in step 1.

Click on the button and select "Show-hide Layers". You will get this box to 'Show or Hide" the Layers.

Now do the following:
a. Select Layer1 than click on 'Hide'
b. Select Layer2 and click on 'Show' then,
c. Select Layer3 and click on 'Hide'.

This action will make Layer1 and 3 disappear and show Layer2 whenever you mouseover Image1.

You can also see the new JavaScript events created by Dreamweaver in the Behaviors Inspector. Here the new onMouseOver and onMouseOut with Show-hide Layers as actions.

Note here that you can use other events also as you like. For example instead of onMouseOver you can use onClick. To do this you need to click on the tiny black, inverted arrow next to the event. Use this to select other events, ie OnClick, Down etc.,.

At the foot of the list there is a category which allows you to choose which browsers to support, make sure a check is next to 4 and higher browsers. (Only after choosing the browser 4 or higher you will be able to see all the Events in a list)

Follow step 4 by selecting Image2. Then,
a. Select Layer1 than click on 'Hide';
b. Select Layer2 and click on 'Hide' then,
c. Select Layer3 and click on 'Show'.

This action will make the Layer1 and Layer2 disappear and show Layer2 while you move your mouse over Image1.

5.  Bringing Default Layer Again
Now as a final step, you need to bring back Layer1 when you move your mouse out of the Image (or when you mouse away from the images to somewhere on that page). Select Image1 and click on the button and select "Show-hide Layers". You will get a box to 'Show or Hide" the Layers.

Now do the following...
a. Select Layer1 than click on 'Show'
b. Select Layer2 and click on 'Hide' then,
c. Select Layer3 and click on 'Hide'.

This action will make Layer2 and Layer3 disappear and show Layer1 while you move your mouse out of the Image1. Also do not forget to change the Events to onMouseOut.

Repeat step 5 with Image2 also. Now you should get the Behavior Inspector like this Image, showing all the Events for both Image1 & Image2.

More Stories By Benny Alexander

Benny Alexander is lead developer with Macronimous.com, an offshore web design company focusing on quality Web and PDA application development services at low costs and serving the needs of small to medium businesses.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@ThingsExpo Stories
IoT generates lots of temporal data. But how do you unlock its value? How do you coordinate the diverse moving parts that must come together when developing your IoT product? What are the key challenges addressed by Data as a Service? How does cloud computing underlie and connect the notions of Digital and DevOps What is the impact of the API economy? What is the business imperative for Cognitive Computing? Get all these questions and hundreds more like them answered at the 18th Cloud Expo...
SoftLayer operates a global cloud infrastructure platform built for Internet scale. With a global footprint of data centers and network points of presence, SoftLayer provides infrastructure as a service to leading-edge customers ranging from Web startups to global enterprises. SoftLayer's modular architecture, full-featured API, and sophisticated automation provide unparalleled performance and control. Its flexible unified platform seamlessly spans physical and virtual devices linked via a world...
SYS-CON Events announced today that EastBanc Technologies will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. EastBanc Technologies has been working at the frontier of technology since 1999. Today, the firm provides full-lifecycle software development delivering flexible technology solutions that seamlessly integrate with existing systems – whether on premise or cloud. EastBanc Technologies partners with p...
SYS-CON Events announced today that Commvault, a global leader in enterprise data protection and information management, has been named “Bronze Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Commvault is a leading provider of data protection and information management...
In his session at 18th Cloud Expo, Bruce Swann, Senior Product Marketing Manager at Adobe, will discuss how the Adobe Marketing Cloud can help marketers embrace opportunities for personalized, relevant and real-time customer engagement across offline (direct mail, point of sale, call center) and digital (email, website, SMS, mobile apps, social networks, connected objects). Bruce Swann has more than 15 years of experience working with digital marketing disciplines like web analytics, social med...
SYS-CON Events announced today that Tintri Inc., a leading producer of VM-aware storage (VAS) for virtualization and cloud environments, will exhibit at the 18th International CloudExpo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, New York, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today Object Management Group® has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that ContentMX, the marketing technology and services company with a singular mission to increase engagement and drive more conversations for enterprise, channel and SMB technology marketers, has been named “Sponsor & Exhibitor Lounge Sponsor” of SYS-CON's 18th Cloud Expo, which will take place on June 7-9, 2016, at the Javits Center in New York City, New York. “CloudExpo is a great opportunity to start a conversation with new prospects, but what happens after the...
Companies can harness IoT and predictive analytics to sustain business continuity; predict and manage site performance during emergencies; minimize expensive reactive maintenance; and forecast equipment and maintenance budgets and expenditures. Providing cost-effective, uninterrupted service is challenging, particularly for organizations with geographically dispersed operations.
The IoTs will challenge the status quo of how IT and development organizations operate. Or will it? Certainly the fog layer of IoT requires special insights about data ontology, security and transactional integrity. But the developmental challenges are the same: People, Process and Platform. In his session at @ThingsExpo, Craig Sproule, CEO of Metavine, will demonstrate how to move beyond today's coding paradigm and share the must-have mindsets for removing complexity from the development proc...
What a difference a year makes. Organizations aren’t just talking about IoT possibilities, it is now baked into their core business strategy. With IoT, billions of devices generating data from different companies on different networks around the globe need to interact. From efficiency to better customer insights to completely new business models, IoT will turn traditional business models upside down. In the new customer-centric age, the key to success is delivering critical services and apps wit...
Join us at Cloud Expo | @ThingsExpo 2016 – June 7-9 at the Javits Center in New York City and November 1-3 at the Santa Clara Convention Center in Santa Clara, CA – and deliver your unique message in a way that is striking and unforgettable by taking advantage of SYS-CON's unmatched high-impact, result-driven event / media packages.
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, will provide an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life ...
As cloud and storage projections continue to rise, the number of organizations moving to the cloud is escalating and it is clear cloud storage is here to stay. However, is it secure? Data is the lifeblood for government entities, countries, cloud service providers and enterprises alike and losing or exposing that data can have disastrous results. There are new concepts for data storage on the horizon that will deliver secure solutions for storing and moving sensitive data around the world. ...
SYS-CON Events announced today that BMC Software has been named "Siver Sponsor" of SYS-CON's 18th Cloud Expo, which will take place on June 7-9, 2015 at the Javits Center in New York, New York. BMC is a global leader in innovative software solutions that help businesses transform into digital enterprises for the ultimate competitive advantage. BMC Digital Enterprise Management is a set of innovative IT solutions designed to make digital business fast, seamless, and optimized from mainframe to mo...
SYS-CON Events announced today that MobiDev will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. MobiDev is a software company that develops and delivers turn-key mobile apps, websites, web services, and complex software systems for startups and enterprises. Since 2009 it has grown from a small group of passionate engineers and business managers to a full-scale mobile software company with over 200 develope...
WebRTC is bringing significant change to the communications landscape that will bridge the worlds of web and telephony, making the Internet the new standard for communications. Cloud9 took the road less traveled and used WebRTC to create a downloadable enterprise-grade communications platform that is changing the communication dynamic in the financial sector. In his session at @ThingsExpo, Leo Papadopoulos, CTO of Cloud9, will discuss the importance of WebRTC and how it enables companies to fo...
SYS-CON Events announced today that MangoApps will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. MangoApps provides modern company intranets and team collaboration software, allowing workers to stay connected and productive from anywhere in the world and from any device. For more information, please visit https://www.mangoapps.com/.
SYS-CON Events announced today TechTarget has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. TechTarget is the Web’s leading destination for serious technology buyers researching and making enterprise technology decisions. Its extensive global networ...
A strange thing is happening along the way to the Internet of Things, namely far too many devices to work with and manage. It has become clear that we'll need much higher efficiency user experiences that can allow us to more easily and scalably work with the thousands of devices that will soon be in each of our lives. Enter the conversational interface revolution, combining bots we can literally talk with, gesture to, and even direct with our thoughts, with embedded artificial intelligence, wh...