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
The cloud promises new levels of agility and cost-savings for Big Data, data warehousing and analytics. But it’s challenging to understand all the options – from IaaS and PaaS to newer services like HaaS (Hadoop as a Service) and BDaaS (Big Data as a Service). In her session at @BigDataExpo at @ThingsExpo, Hannah Smalltree, a director at Cazena, will provide an educational overview of emerging “as-a-service” options for Big Data in the cloud. This is critical background for IT and data profes...
With the Apple Watch making its way onto wrists all over the world, it’s only a matter of time before it becomes a staple in the workplace. In fact, Forrester reported that 68 percent of technology and business decision-makers characterize wearables as a top priority for 2015. Recognizing their business value early on, FinancialForce.com was the first to bring ERP to wearables, helping streamline communication across front and back office functions. In his session at @ThingsExpo, Kevin Roberts...
Cognitive Computing is becoming the foundation for a new generation of solutions that have the potential to transform business. Unlike traditional approaches to building solutions, a cognitive computing approach allows the data to help determine the way applications are designed. This contrasts with conventional software development that begins with defining logic based on the current way a business operates. In her session at 18th Cloud Expo, Judith S. Hurwitz, President and CEO of Hurwitz & ...
One of the bewildering things about DevOps is integrating the massive toolchain including the dozens of new tools that seem to crop up every year. Part of DevOps is Continuous Delivery and having a complex toolchain can add additional integration and setup to your developer environment. In his session at @DevOpsSummit at 18th Cloud Expo, Miko Matsumura, Chief Marketing Officer of Gradle Inc., will discuss which tools to use in a developer stack, how to provision the toolchain to minimize onboa...
SYS-CON Events announced today that Interoute, owner-operator of one of Europe's largest networks and a global cloud services platform, has been named “Bronze 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. Interoute is the owner-operator of one of Europe's largest networks and a global cloud services platform which encompasses 12 data centers, 14 virtual data centers and 31 colocation centers, with connections to 195 ad...
SYS-CON Events announced today that Alert Logic, Inc., the leading provider of Security-as-a-Service solutions for the cloud, 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. Alert Logic, Inc., provides Security-as-a-Service for on-premises, cloud, and hybrid infrastructures, delivering deep security insight and continuous protection for customers at a lower cost than traditional security solutions. Ful...
The Quantified Economy represents the total global addressable market (TAM) for IoT that, according to a recent IDC report, will grow to an unprecedented $1.3 trillion by 2019. With this the third wave of the Internet-global proliferation of connected devices, appliances and sensors is poised to take off in 2016. In his session at @ThingsExpo, David McLauchlan, CEO and co-founder of Buddy Platform, will discuss how the ability to access and analyze the massive volume of streaming data from mil...
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.
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...
With an estimated 50 billion devices connected to the Internet by 2020, several industries will begin to expand their capabilities for retaining end point data at the edge to better utilize the range of data types and sheer volume of M2M data generated by the Internet of Things. In his session at @ThingsExpo, Don DeLoach, CEO and President of Infobright, will discuss the infrastructures businesses will need to implement to handle this explosion of data by providing specific use cases for filte...
WebSocket is effectively a persistent and fat pipe that is compatible with a standard web infrastructure; a "TCP for the Web." If you think of WebSocket in this light, there are other more hugely interesting applications of WebSocket than just simply sending data to a browser. In his session at 18th Cloud Expo, Frank Greco, Director of Technology for Kaazing Corporation, will compare other modern web connectivity methods such as HTTP/2, HTTP Streaming, Server-Sent Events and new W3C event APIs ...
SYS-CON Events announced today that Pythian, a global IT services company specializing in helping companies adopt disruptive technologies to optimize revenue-generating systems, has been named “Bronze 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. Founded in 1997, Pythian is a global IT services company that helps companies compete by adopting disruptive technologies such as cloud, Big Data, advanced analytics, and DevO...
SYS-CON Events announced today that Avere Systems, a leading provider of enterprise storage for the hybrid cloud, 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. Avere delivers a more modern architectural approach to storage that doesn’t require the overprovisioning of storage capacity to achieve performance, overspending on expensive storage media for inactive data or the overbuilding of data centers ...
Fortunately, meaningful and tangible business cases for IoT are plentiful in a broad array of industries and vertical markets. These range from simple warranty cost reduction for capital intensive assets, to minimizing downtime for vital business tools, to creating feedback loops improving product design, to improving and enhancing enterprise customer experiences. All of these business cases, which will be briefly explored in this session, hinge on cost effectively extracting relevant data from ...
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.
As enterprises work to take advantage of Big Data technologies, they frequently become distracted by product-level decisions. In most new Big Data builds this approach is completely counter-productive: it presupposes tools that may not be a fit for development teams, forces IT to take on the burden of evaluating and maintaining unfamiliar technology, and represents a major up-front expense. In his session at @BigDataExpo at @ThingsExpo, Andrew Warfield, CTO and Co-Founder of Coho Data, will dis...
SYS-CON Events announced today that iDevices®, the preeminent brand in the connected home industry, 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. iDevices, the preeminent brand in the connected home industry, has a growing line of HomeKit-enabled products available at the largest retailers worldwide. Through the “Designed with iDevices” co-development program and its custom-built IoT Cloud Infrastruc...
Eighty percent of a data scientist’s time is spent gathering and cleaning up data, and 80% of all data is unstructured and almost never analyzed. Cognitive computing, in combination with Big Data, is changing the equation by creating data reservoirs and using natural language processing to enable analysis of unstructured data sources. This is impacting every aspect of the analytics profession from how data is mined (and by whom) to how it is delivered. This is not some futuristic vision: it's ha...
Silver Spring Networks, Inc. (NYSE: SSNI) extended its Internet of Things technology platform with performance enhancements to Gen5 – its fifth generation critical infrastructure networking platform. Already delivering nearly 23 million devices on five continents as one of the leading networking providers in the market, Silver Spring announced it is doubling the maximum speed of its Gen5 network to up to 2.4 Mbps, increasing computational performance by 10x, supporting simultaneous mesh communic...
SYS-CON Events announced today that Men & Mice, the leading global provider of DNS, DHCP and IP address management overlay solutions, 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. The Men & Mice Suite overlay solution is already known for its powerful application in heterogeneous operating environments, enabling enterprises to scale without fuss. Building on a solid range of diverse platform support,...