- the below is not a hand feed way of making your behavior work. Just the general thoery behind applied to a more simplistic exercise.
What I would recommend is attach them to your document and hide them.
Then set up a javascript listener to make them visible when you click over the one in associtaion.
Its not as easy as it sounds but, that is what I would recommend looking into.
So now taking this into account lets say we wanted to switch out the paragraph based on if the user puts the mouse over the div. This effect could not be done without javascript becasue it is a dynamic behavior. The page is not going to reload but, it will automatically switch out the sentence based on the event.
Which brings me to one last point- events. Events are the things that happen with a browser. The simplest way to put this is everyone knows what rolover is. That is essentially a event being triggered. When the user mouses over a given element a event is triggered to change some text or do something. Most programs limit this event to links and such.
However, this is where knowledge of the DOM comes in. Those of use who know the secrets of the DOM know this- every element within holds an event. That means that the browser is capable of reconizing whether or a not the mouse is over any given part of the document.
The only catch is we should define a width and hieght attribute to that element unless its contained with a contained that makes it dependent. In this instance, it is not. So I am going to style the div so it has a set height and width for someone to mouseover rather then spanning the page(by default).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Floated column example</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style type="text/css">
#text {
width: 200px;
height: 300px;
padding: 10px;
border: thin solid black;
}
</style>
</head>
<body>
<div id= "text">
<p>this is some text in a box</p>
</div>
</body>
</html>
All that code above does is set a width and height and a border with padding- thats all. if your familier with CSS then that should be obvious.
So now lets work on your behavior. Our behavior is that we want to switch out the text based on a rollover of that div. So lets get to work.
First of we start with declaring a javascript script:
<script stype = "text/javascript">
</script>
Now we put all our javascript within that script. You can attach multiple scripts to one document and/or exteneral scripts but, we are going to keep this simple.
usually the best thing to do is put your javscript(bahavior) in the head section of the document. This is best practice for semantic mark-up.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Floated column example</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<script type="text/javascript">
</script>
<style type="text/css">
#text {
width: 200px;
height: 300px;
padding: 10px;
border: thin solid black;
}
</style>
</head>
<body>
<div id= "text">
<p>this is some text in a box</p>
</div>
</body>
</html>
This sets up our script within our document.
So now lets work on the javascript.
In order to get this to work the first thing we need to do is set up a event listener for our div.
This is how we do that:
<script type="text/javascript">
function addl() {
var di = document.getElementById('text');
di.addEventListener('mouseover', switchit, false);
}
window.addEventListener('load', addl, false);
</script>
I'm not going to dwell on thoery here but, this is the what essentially happening. before anything can be targted, we need the page to load. So the bottom line tells the browser to execute the listener after the page loads. The function addl is then added to the page to listen for our event.
Once the addl function is triggered I target the div and give it a variable of di. After which I set up a event listener on it for the mouseover state. Now once the browser detects the mosue over the area it will trigger the function switchit.
We have yet to indicate our switchit function so nothing will hapen at this point. So the next part is telling the browser the behavior that needs to happen on the mouseover of the div.
<script type="text/javascript">
function switchit() {
var str = document.createTextNode('it is being switched out for your own good');
var par = document.getElementsByTagName('p')[0];
var sent = par.firstChild;
par.replaceChild(str, sent);
}
function addl() {
var di = document.getElementById('text');
di.addEventListener('mouseover', switchit, false);
di.addEventListener('mouseout', switchback, false);
}
window.addEventListener('load', addl, false);
</script>
This next part gets a tad bit more complex but, essentially thiis is what is happening. The first line creates a text node with the new text to switch out of the div. Text nodes all allways children of thier containing element. So in this case the paragraphs childr is the text within/text node. I assign that with a variable also so i can refer to it easier later. next I target my paragraph which I want to switch out. I am not switching out the paragraph only the text within so I need a reference to that element also. In this stance, I use a getElementsByTagName(). This return a array of elements unlike the ID target. So I cleaify with the [0] I want the first paragraph in the document. If I specified [1] it would give me the seconf paragraph. There doesn't exist a second paragraph so it would be null. Therefor, I target the one that exist- the first and apply a variable.
Now I have references to all I need to make this work. On promblem though… how do iactually attach this new method to the document. Well there are more then one ways to do this but, since, we are going to be switching out information the best way to do this is to use the replaceChild method.
The replaceChild method works like this. lets say we have a parent and want to replace its children with something else like a new text node. This can be done with relative ease using this method since, we are replacing children[/b] rather then inserting something toally new.
ok…pk… that may not make a whole lot of sense, but just know this is the right one to use for this behavior.
Since, I have a variable whcih contains my parent allready this is done with ease usng the method and telling it what to switch out and replace like so:
par.replaceChild(str, sent);
par being our pargraph sent being the text we want to replace and str being the new text to use.
That simple…
lol
You can test this out by saving it in your notepad as .html and utf-8 file. Then move to the browser and walla. When you mouse over the the area withi the dv the text should swap out.
Ahh… there is that word- swab.
So essentially, all swab based effects can be achieved using something such as the method I described above. yes, it will different but, the basic philosophy stays continigent. Knowing what you want to target and what you want to replace it with is the first step. Finding the most appropriate properties is the second part. Then making it work is the last,lol.
So this may not be the exact effect your after but, think about your effect in terms of the DOM and how it can be created. The same thing I did here with text can be done with images. The only different is you would attach and image rather then text without using the createTextNode object.
As you can see its quite complex to do such a mezzly task but heh… thats the DOM and javascript for you- in other words- DHTML. Combining the DOM with javascript to create dymamic behavior.
disclaimer; this doesn't work in IE and afew other browsers becasue IE is weird,lol. Well not really weird but, I would have to go through much more then present for you to understand why and how to make it work in IE and I even get confussed thinking about. The basic idea though is that IE [b]doesn't[b] support addEventListener instead it uses its own event handler. Then stores the behavior in the window rather then the object it self. yeah… it gets quite complicated so lets just stick with this for now- that damn browser,lol.
The below is the code in whole with an dded switchback function but, you can ignore that.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Floated column example</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<script type="text/javascript">
function switchit() {
var str = document.createTextNode('it is being switched out for your own good');
var par = document.getElementsByTagName('p')[0];
var sent = par.firstChild;
par.replaceChild(str, sent);
}
function switchback() {
var str = document.createTextNode('this is some text in a box');
var par = document.getElementsByTagName('p')[0];
var sent = par.firstChild;
par.replaceChild(str, sent);
}
function addl() {
var di = document.getElementById('text');
di.addEventListener('mouseover', switchit, false);
di.addEventListener('mouseout', switchback, false);
}
window.addEventListener('load', addl, false);
</script>
<style type="text/css">
#text {
width: 200px;
height: 300px;
padding: 10px;
border: thin solid black;
}
</style>
</head>
<body>
<div id= "text">
<p>this is some text in a box</p>
</div>
</body>
</html>
hope that helps good luck.