The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Changing Text on Hover

Hey, everyone. I'm working on a new site, and I've got a quick javascript question that I hope ya can help me out with. I would like it so that when they hover over a graphic, the text in another area changes. I've tried a couple things, but I'm still learning. I would really appreciate it if someone could help me out.

I just realized that I left an important detail out. What I have is a small menu of 4 different graphics, and I have a place for text. I would like it so that when they hover over a graphic, some text comes up to tell them about it. I've seen this done a lot, but using graphics instead of text. I'm sorry I left this out- could you help me out with this?

Nobody knows how to do this? I've seen lots of sites where they have it that you can hover over some icons and then somewhere else on the page a description comes up. This is sort of the same idea. How do I get an area of text to change when a graphic is hovered over?

Originally posted by michaelwheaton I just realized that I left an important detail out. What I have is a small menu of 4 different graphics, and I have a place for text. I would like it so that when they hover over a graphic, some text comes up to tell them about it. I've seen this done a lot, but using graphics instead of text. I'm sorry I left this out- could you help me out with this?

Thanks,
Michael

As long as you have the text contained within a layer that shoulw work just fine.

It's probably better if you just see the page in question, http://www.meltable.com/refer What I would like is to have it that they can hover over any one of those buttons in the middle column, and on the left column it will be replaced with a short description. So, I need to have multiple messages, all appearing in one area depending on where the user has hovered.

Originally posted by michaelwheaton It's probably better if you just see the page in question, http://www.meltable.com/refer What I would like is to have it that they can hover over any one of those buttons in the middle column, and on the left column it will be replaced with a short description. So, I need to have multiple messages, all appearing in one area depending on where the user has hovered.

Thanks!
Michael

Ok I am off to work...when I get there I will help you out...but it is simply working with layers.

Yeah, I guess that will work. I just have a small problem. The buttons have a hover, so they are already using "onMouseOver" and "onMouseOut". How do I get it to do both things on the hover? I really need to learn javascript . . . :-(

Originally posted by michaelwheaton Yeah, I guess that will work. I just have a small problem. The buttons have a hover, so they are already using "onMouseOver" and "onMouseOut". How do I get it to do both things on the hover? I really need to learn javascript . . . :-(

Well, if you go to http://www.meltable.com/refer you can see that I have it working- but there's still a couple problems. First of all, when the page first loads all of the text is there, and it doesn't disappear until they hover over it and then out of it. How can I have it so that when the page loads, it starts off hidden?

Also, is there any way to have the text always "appear" at the top? Right now, it's all over, which looks kind of cool- but might not be visible on lower resolutions.

Originally posted by michaelwheaton Well, if you go to http://www.meltable.com/refer you can see that I have it working- but there's still a couple problems. First of all, when the page first loads all of the text is there, and it doesn't disappear until they hover over it and then out of it. How can I have it so that when the page loads, it starts off hidden?

Also, is there any way to have the text always "appear" at the top? Right now, it's all over, which looks kind of cool- but might not be visible on lower resolutions.

Question 2 is the finished layer and will stay hidden until rolled over and will go to the top-left corner of the <td></td> tag you have the layers contained in

BTW as a little note for you. Position:relative will position the layer in relative terms to what it is surrounded by or its surroundings. Position:absolute will position the layer in the top-left corner of the screen no matter what you contain it in. Try it

Originally posted by michaelwheaton Thanks, Maelstrom, that fixed the first part of the problem- but I still can't get the text to stay at the top. I did it just like you suggested, but it's not working. What am I doing wrong?

Thanks,
Michael

Just thought about what might be causing it. When invisible they still exist as physical space. That measn when you use relative positioning you are positioing in relation to not only the table cell but also to the other layers.

You could always find the position exactly and use absolute positioning. It looks to be around

style="top:200px;left:75px; position:absolute"

Just play with the numbers and the positions should work. The downfall of this is if the page moves at all you will have a misspositioned layer. Although looking at your page your header looks 'really' consistent so the absolute positioning should work.

To explain how I do it. I essentially have a layer positioned within the cell. Then I have a series of container layers that holds the information. When the mouse rolls over (or off) the information is borrowed from the hidden layer and transferred to the 'show' layer. Hope that makes sense. I will try to figure out you dilema though

I was hoping that I could avoid absolute positioning, because they always seem to "move around" depending on the browser and the user's own settings. When I first asked for help here I was hoping this could be done entirely with JavaScript, something like this:

- In the left table column (where the description goes) there could be a document.write or whatever that would place in a certain variable.

- When they hover over a button, the variable changes, so a new description appears on the side.

- When they hover out the variable is changed to be empty, so that the description disappears.

Could it be done this way? That would avoid the need for layers. I've been trying to learn JavaScript, but I don't yet know enough to do this. A little help would be greatly appreciated. :-)

Originally posted by michaelwheaton
[BCould it be done this way? That would avoid the need for layers. I've been trying to learn JavaScript, but I don't yet know enough to do this. A little help would be greatly appreciated. :-) [/B]

Hmmm...try making the description graphics. Then when you move over the object the graphic changes. No layers involved there.

As for using variables as visual containers that is along the same lines of what I do with my layers. I think the graphics way is cleaner and more cross browser compatible.

The problem with document.write is it clears the screen every time. So the closest thing to do is a document.getElementById('id').innerHTML="blah blah"

That is the type of thing I do with layers. Although with the id tag you could do it by labelling your cell

Couldn't this be done just using regular text, with no graphics (except for the buttons they hover over)? I don't really want to make a graphic for each description because this adds to load time and is harder to change later on, especially since I will probably not be maintaining the site.

Could I just have it that a variable is shown in the left column, and that this variable changes depending on what they hover over?

Originally posted by michaelwheaton Couldn't this be done just using regular text, with no graphics (except for the buttons they hover over)? I don't really want to make a graphic for each description because this adds to load time and is harder to change later on, especially since I will probably not be maintaining the site.

Could I just have it that a variable is shown in the left column, and that this variable changes depending on what they hover over?

My second explanation I think is what you are stuck with. Sorry. For a more detailed explanation on DHTML try this site by fellow member Vinny.

Sorry, Maelstrom, I had only read the first part of your message, not what was added after you modified it. I've tried using the using an id on the table cell and then changing this onMouseOver, but with no luck. This is a lot more complicated then I thought it would be . . .

Originally posted by michaelwheaton Sorry, Maelstrom, I had only read the first part of your message, not what was added after you modified it. I've tried using the using an id on the table cell and then changing this onMouseOver, but with no luck. This is a lot more complicated then I thought it would be . . .

Its not really. We are just showing you every way of dynamically changin data with javascript. You have three main options.

1) interchaning graphics
cons
- hard to update
- they are graphics and what fun is that
pros
- probably the easiest to implement
2) hide/show layers
pros
- better than graphics.
- Easy to control
cons
- take up space
- cross browser support is low
3) using a layer as a container to swap text into
pros
- I find the easiest
cons
- poor support

However I did think of anohter one if you wanna give it a shot. Go back to the original concept with the 4 layers in 1 cell (all 4 layers in the one <td>) instead of turning the visibility on and off try playing with the display function

divStyle.display = (isShow) ? '' : 'none'

I use something like this to do cscading menus in a rather complex program I wrote. Try that...That should eliminate the problem of physical space because when a layer is display:none it is gone entirely not just invisible.

function changeVis(txtID, isShow)
{
switch (txtID)
{
case 1:
txt = "This is the description they get when they hover over the first button."
break;
case 2:
txt = "This is the description they get when they hover over the second button."
break;
case 3:
txt = "This is the description they get when they hover over the third button."
break;
case 4:
txt = "This is the description they get when they hover over the fourth button."
break;
case 5:
txt = "This is the description they get when they hover over the fifth button."
break;
}
var divObj = (document.layers) ? document.layers['lyr1'].document.layers['lyr2'] : document.all ? document.all['div1'] : document.getElementById('div1')

....html code....
<td width="150" valign="top" bgcolor="99CCFF" class="description">
<ilayer name='lyr1'>
<layer name='lyr2' style="visibility:hidden;position:absolute;top:0;left:0">
<div id='div1' style="visibility:hidden; position:absolute;top:0;left:0">This is the description they get when they hover over the first button.</div></layer></ilayer>