SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30

Hybrid View

  1. #1
    SitePoint Addict michaelwheaton's Avatar
    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

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    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)

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Addict michaelwheaton's Avatar
    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!

  4. #4
    SitePoint Addict michaelwheaton's Avatar
    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

  5. #5
    SitePoint Addict michaelwheaton's Avatar
    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?

  6. #6
    SitePoint Addict
    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?

  7. #7
    What? Maelstrom's Avatar
    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,
    Michael
    As long as you have the text contained within a layer that shoulw work just fine.
    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.

  8. #8
    SitePoint Addict michaelwheaton's Avatar
    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

  9. #9
    What? Maelstrom's Avatar
    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
    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
    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.

  10. #10
    SitePoint Enthusiast
    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

  11. #11
    What? Maelstrom's Avatar
    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.htm
    That link does it nicely as well.
    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.

  12. #12
    SitePoint Enthusiast oiboi's Avatar
    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>
    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...
    Code:
    div1.innerHTML='<font color="FFFFFF">Button1 Text</FONT>'
    Se there you can change the HTML too.
    Adrian Gonzales
    http://www.clearspanmedia.com

  13. #13
    SitePoint Addict michaelwheaton's Avatar
    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 . . . :-(

  14. #14
    What? Maelstrom's Avatar
    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 . . . :-(
    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.
    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.

  15. #15
    SitePoint Addict michaelwheaton's Avatar
    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

  16. #16
    What? Maelstrom's Avatar
    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
    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
    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.

  17. #17
    SitePoint Addict michaelwheaton's Avatar
    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

  18. #18
    What? Maelstrom's Avatar
    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
    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
    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.

  19. #19
    SitePoint Addict michaelwheaton's Avatar
    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. :-)

  20. #20
    What? Maelstrom's Avatar
    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]
    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...
    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.

  21. #21
    SitePoint Addict michaelwheaton's Avatar
    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?

  22. #22
    What? Maelstrom's Avatar
    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?
    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.
    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.

  23. #23
    SitePoint Addict michaelwheaton's Avatar
    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 . . .

  24. #24
    What? Maelstrom's Avatar
    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 . . .
    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.
    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.

  25. #25
    SitePoint Guru Vincent Puglia's Avatar
    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)">.....


    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •