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
SYS-CON Events announced today that Embotics, the cloud automation company, will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Embotics is the cloud automation company for IT organizations and service providers that need to improve provisioning or enable self-service capabilities. With a relentless focus on delivering a premier user experience and unmatched customer support, Embotics is the fas...
SYS-CON Events announced today that MathFreeOn will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. MathFreeOn is Software as a Service (SaaS) used in Engineering and Math education. Write scripts and solve math problems online. MathFreeOn provides online courses for beginners or amateurs who have difficulties in writing scripts. In accordance with various mathematical topics, there are more tha...
SYS-CON Events announced today that Niagara Networks will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Niagara Networks offers the highest port-density systems, and the most complete Next-Generation Network Visibility systems including Network Packet Brokers, Bypass Switches, and Network TAPs.
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
@ThingsExpo has been named the Top 5 Most Influential Internet of Things Brand by Onalytica in the ‘The Internet of Things Landscape 2015: Top 100 Individuals and Brands.' Onalytica analyzed Twitter conversations around the #IoT debate to uncover the most influential brands and individuals driving the conversation. Onalytica captured data from 56,224 users. The PageRank based methodology they use to extract influencers on a particular topic (tweets mentioning #InternetofThings or #IoT in this ...
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, will discuss how Dice leverages data insights and tools to help both tech professionals and recruiters better understand how skills relate to each other and which skills are in high demand using interactive visualizations and salary indicator tools to maximize earning potential. Manish Dixit is VP of Product and Engineering at Dice. As the leader of the Product, Engineering and Data Sciences team a...
Virgil consists of an open-source encryption library, which implements Cryptographic Message Syntax (CMS) and Elliptic Curve Integrated Encryption Scheme (ECIES) (including RSA schema), a Key Management API, and a cloud-based Key Management Service (Virgil Keys). The Virgil Keys Service consists of a public key service and a private key escrow service. 

OnProcess Technology has announced it will be a featured speaker at @ThingsExpo, taking place November 1 - 3, 2016, in Santa Clara, California. Dan Gettens, OnProcess’ Chief Analytics Officer, will discuss how Internet of Things (IoT) data can be leveraged to predict product failures, improve uptime and slash costly inventory stock. @ThingsExpo is an annual gathering of IoT and cloud developers, practitioners and thought-leaders who exchange ideas and insights on topics ranging from Big Data in...
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at Cloud Expo, Ed Featherston, a director and senior enterprise architect at Collaborative Consulting, will discuss the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
In an era of historic innovation fueled by unprecedented access to data and technology, the low cost and risk of entering new markets has leveled the playing field for business. Today, any ambitious innovator can easily introduce a new application or product that can reinvent business models and transform the client experience. In their Day 2 Keynote at 19th Cloud Expo, Mercer Rowe, IBM Vice President of Strategic Alliances, and Raejeanne Skillern, Intel Vice President of Data Center Group and ...
Successful digital transformation requires new organizational competencies and capabilities. Research tells us that the biggest impediment to successful transformation is human; consequently, the biggest enabler is a properly skilled and empowered workforce. In the digital age, new individual and collective competencies are required. In his session at 19th Cloud Expo, Bob Newhouse, CEO and founder of Agilitiv, will draw together recent research and lessons learned from emerging and established ...
There is growing need for data-driven applications and the need for digital platforms to build these apps. In his session at 19th Cloud Expo, Muddu Sudhakar, VP and GM of Security & IoT at Splunk, will cover different PaaS solutions and Big Data platforms that are available to build applications. In addition, AI and machine learning are creating new requirements that developers need in the building of next-gen apps. The next-generation digital platforms have some of the past platform needs a...
I'm a lonely sensor. I spend all day telling the world how I'm feeling, but none of the other sensors seem to care. I want to be connected. I want to build relationships with other sensors to be more useful for my human. I want my human to understand that when my friends next door are too hot for a while, I'll soon be flaming. And when all my friends go outside without me, I may be left behind. Don't just log my data; use the relationship graph. In his session at @ThingsExpo, Ryan Boyd, Engi...
Smart Cities are here to stay, but for their promise to be delivered, the data they produce must not be put in new siloes. In his session at @ThingsExpo, Mathias Herberts, Co-founder and CTO of Cityzen Data, will deep dive into best practices that will ensure a successful smart city journey.
More and more brands have jumped on the IoT bandwagon. We have an excess of wearables – activity trackers, smartwatches, smart glasses and sneakers, and more that track seemingly endless datapoints. However, most consumers have no idea what “IoT” means. Creating more wearables that track data shouldn't be the aim of brands; delivering meaningful, tangible relevance to their users should be. We're in a period in which the IoT pendulum is still swinging. Initially, it swung toward "smart for smar...
Two weeks ago (November 3-5), I attended the Cloud Expo Silicon Valley as a speaker, where I presented on the security and privacy due diligence requirements for cloud solutions. Cloud security is a topical issue for every CIO, CISO, and technology buyer. Decision-makers are always looking for insights on how to mitigate the security risks of implementing and using cloud solutions. Based on the presentation topics covered at the conference, as well as the general discussions heard between sessi...
19th Cloud Expo, taking place November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Meanwhile, 94% of enterpri...
The Internet of Things can drive efficiency for airlines and airports. In their session at @ThingsExpo, Shyam Varan Nath, Principal Architect with GE, and Sudip Majumder, senior director of development at Oracle, will discuss the technical details of the connected airline baggage and related social media solutions. These IoT applications will enhance travelers' journey experience and drive efficiency for the airlines and the airports. The session will include a working demo and a technical d...
The Internet of Things (IoT), in all its myriad manifestations, has great potential. Much of that potential comes from the evolving data management and analytic (DMA) technologies and processes that allow us to gain insight from all of the IoT data that can be generated and gathered. This potential may never be met as those data sets are tied to specific industry verticals and single markets, with no clear way to use IoT data and sensor analytics to fulfill the hype being given the IoT today.
@ThingsExpo has been named the Top 5 Most Influential M2M Brand by Onalytica in the ‘Machine to Machine: Top 100 Influencers and Brands.' Onalytica analyzed the online debate on M2M by looking at over 85,000 tweets to provide the most influential individuals and brands that drive the discussion. According to Onalytica the "analysis showed a very engaged community with a lot of interactive tweets. The M2M discussion seems to be more fragmented and driven by some of the major brands present in the...