SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 30
Thread: Changing Text on Hover
-
Jan 5, 2002, 15:11 #1
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Thanks!
Michael
-
Jan 5, 2002, 17:36 #2
- Join Date
- Feb 2000
- Location
- where the World once stood
- Posts
- 700
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
....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)
VinnyWhere the World Once Stood
the blades of grass
cut me still
-
Jan 5, 2002, 18:03 #3
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks, Vincent, that's just what I wanted!
-
Jan 5, 2002, 21:44 #4
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 11, 2002, 09:46 #5
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Jan 11, 2002, 14:55 #6
- Join Date
- Mar 2001
- Location
- the windy city
- Posts
- 281
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Vincent's example should still work for you. what difficulties are you having?
-
Jan 11, 2002, 17:50 #7
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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,
MichaelMaelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
-
Jan 11, 2002, 20:17 #8
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 11, 2002, 21:07 #9
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
<td onmouseover="showlayer('layername')" onmouseout="droplayer('layername')">cell name</td>
Thats in theory I will try and help you implement itMaelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
-
Jan 11, 2002, 22:43 #10
- Join Date
- Mar 2001
- Location
- San Jose, California
- Posts
- 46
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just replace the text links on the left with your images.
http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm
-
Jan 11, 2002, 23:20 #11
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by the judge
Just replace the text links on the left with your images.
http://www.dynamicdrive.com/dynamicindex5/linkinfo.htmMaelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
-
Jan 12, 2002, 03:36 #12
- Join Date
- Jan 2002
- Location
- Houston
- Posts
- 35
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You can still use vincent's example...
Just use multiple divs
Code:<div id='div1' .....> Text for button1 </div> <div id='div2' .....> text for button2 </div>
Else you can try something like this...
Code:div1.innerHTML='<font color="FFFFFF">Button1 Text</FONT>'
Adrian Gonzales
http://www.clearspanmedia.com
-
Jan 12, 2002, 11:33 #13
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 . . . :-(
-
Jan 12, 2002, 17:22 #14
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 . . . :-(
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.Maelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
-
Jan 12, 2002, 22:42 #15
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 12, 2002, 23:53 #16
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
<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 yaMaelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
-
Jan 13, 2002, 00:10 #17
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Jan 13, 2002, 02:03 #18
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
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 thoughMaelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
-
Jan 13, 2002, 10:44 #19
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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. :-)
-
Jan 13, 2002, 18:41 #20
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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]
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...
Last edited by Maelstrom; Jan 13, 2002 at 18:49.
Maelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
-
Jan 13, 2002, 18:51 #21
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Jan 13, 2002, 19:20 #22
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
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.Maelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
-
Jan 13, 2002, 20:00 #23
- Join Date
- Jan 2001
- Location
- Alberta, Canada
- Posts
- 338
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 . . .
-
Jan 13, 2002, 20:47 #24
- Join Date
- Oct 2001
- Location
- Whistler BC originally from Guelph Ontario
- Posts
- 2,175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 . . .
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.Maelstrom Personal - Apparition Visions
Development - PhP || Mysql || Zend || Devshed
Unix - FreeBSD || FreeBsdForums || Man Pages
They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.
-
Jan 14, 2002, 23:48 #25
- Join Date
- Feb 2000
- Location
- where the World once stood
- Posts
- 700
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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)">.....
VinnyWhere the World Once Stood
the blades of grass
cut me still
Bookmarks