One-Click Content Reveal and Image Swap
Wonderful things can be done with JavaScript and CSS. Today,
you will learn how to reveal a block of content and swap an
image with one click.
When you first load the page, the content ends with the
"Oh, now I remember..." link. When you click on that link:
-
Text reveals itself below the link.
-
The Granny image is swapped to one with her wearing
a purple dress.
Three things are required to implement this functionality:
-
A set of JavaScript functions.
-
The image/div HTML/CSS code to swap images and reveal content.
-
The link that makes it happen.
This is the JavaScript. Just copy 'n paste:
Here is an HTML/CSS example of 2 images and one content div.
Only one image is visible when the page first loads (the one
with style="display:block;").
Now, the link:
When the link is clicked, several JavaScript functions
are called. HideContent() to hide the visible image,
ShowContent() to reveal the invisible image, and ShowContent()
again to reveal the content. The values in
the function calls are the id values of the images and div.
Putting It All Together
The three parts (JavaScript functions, images and div content,
and the link) can be together or in separate places on your
web page.
-
It doesn't matter much where on the page you put the
JavaScript functions. It just needs to be available
for when the link is clicked.
-
Put the images and div content in the source code so
they'll display at the positions where you want them
to be.
-
The link can be any visible place on the page.
Once you've put it together, click the link to reveal the
content and swap the images.
Scaling the Concept
Any number of images or content divs can be hidden and
revealed with one click on a link.
Put the required JavaScript function calls in the link's
href value. Each function call is separated with a semi-colon
character.
/blog/css/show-hide_div-layer.html contains explanations of each of the JavaScript functions
used here.
See the example link in this article for how to put many
JavaScript fuction calls into one link's href value.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©Copyright 2007 Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
