Changing Text on Hover

[michaelwheaton]

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.

Thanks!
Michael

[Vincent Puglia]

....onMouseover="changeVis('div1', true)" onMouseout="changeVis('div1', false)"....

function changeVis(divID, isShow)
{
var divStyle = (document.layers) ? document.layers[divID] : document.all ? document.all[divID].style : document.getElementById(divID).style

divStyle.visibility = (isShow) ? 'visible' : 'hidden'
}

<div id='div1' .....>
the text you want to appear
</div>

see the 'dHTML: an Introduction' script/tutorial at my site (GrassBlade)

Vinny

[michaelwheaton]

Thanks, Vincent, that's just what I wanted!

[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

[michaelwheaton]

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?

[valeria_vi]

Vincent's example should still work for you. what difficulties are you having?

[Maelstrom]

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.

[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

[Maelstrom]

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.

<td onmouseover="showlayer('layername')" onmouseout="droplayer('layername')">cell name</td>

Thats in theory I will try and help you implement it

[the judge]

Just replace the text links on the left with your images.
http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

[Maelstrom]

Originally posted by the judge
Just replace the text links on the left with your images.
http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

That link does it nicely as well.

[oiboi]

You can still use vincent's example...

Just use multiple divs

<div id='div1' .....> 
Text for button1
</div> 

<div id='div2' .....> 
text for button2
</div>

Since only one will show up at a time.. it doesnt matter that they are all in the same place.

Else you can try something like this...

div1.innerHTML='<font color="FFFFFF">Button1 Text</FONT>'

Se there you can change the HTML too.

[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 . . . :-(

[Maelstrom]

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 . . . :-(

No prob...

onmouseover="function1();function2()" onmouseout="function1();function2()"

And yes I would say learn a little more. Javascript does have a lot of power once you get into advanced evnt handling and ovject creation and layer manipulation.

[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.

Thanks!
Michael

[Maelstrom]

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.

Thanks!
Michael

Question 1 -
<div id="whateverthenameis" style="visibility:hidden">
stuff in here
</div>

Question 2 -
<div id="whateverthenameis" style="visibility:hidden; position:relative;top:0;left:0">
Stuff in here
</div>

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

Hope that works out for ya

[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

[Maelstrom]

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

[michaelwheaton]

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. :-)

[Maelstrom]

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

<td id="bob"></td>

then change the contents like so

document.getElementById('bob').innerHTML="descriptiong 1";


Hope that method is more to your liking...

[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?

[Maelstrom]

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.

http://members.aol.com/grassblad/index.html

The section that contains everything pertaining to you is DHTML. Read the intro and then move down the list.

But like I said the closest thing the DHTML has to what you are refering to is an id label and then reference the innerHTML within that to change the text to whatever you like.

[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 . . .

[Maelstrom]

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.

[Vincent Puglia]

Hi Michael,

Is this what you want?

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')

if (document.layers)
{
divObj.document.open()
divObj.document.write(txt)
divObj.document.close()
divObj.visibility = (isShow) ? 'visible' : 'hidden'
}
else
{
divObj.innerHTML = txt;
divObj.style.visibility = (isShow) ? 'visible' : 'hidden'
}

}
</script>

....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>

...html code...
<a href="how.htm" onMouseOver="Hilite('button_how',true);changeVis(1, true)" onMouseOut="Hilite('button_how',false);changeVis(1, false)">.....


Vinny