SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: Layers

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layers

    I once found a cut and paste java script that displayed a clock in a browser that changed without being in a form text box. It used div's and layers and I can't remember how do it now. I don't need it for a clock now. I need it to display different text when mouseOver different images.

  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)
    Hi darknessAwaits,

    see the "dHTML: an introduction" script/tutorial at my site.

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

  3. #3
    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)
    Hmm well the easiest way without much explanation would be

    <div onmouseover="document.getElementById('idnameoflayer').style.visibility='visible'" onmouseout="document.getElementById('idnameoflayer').style.visibility='hidden'">
    Img in here
    </div>

    Otherwise try Vincents tutorials. He has some good ones on his site and would be far more detailed than that
    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.

  4. #4
    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 Maelstrom,

    re:
    Otherwise try Vincents tutorials. He has some good ones on his site...
    [with humbleness] thank you

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

  5. #5
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Maelstrom
    Otherwise try Vincents tutorials. He has some good ones on his site and would be far more detailed than that

    Ditto to that; that's how I learned, even though his tutorials (I think) are a bit outdated now.

    aDog

  6. #6
    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)
    Grrrrrrr
    Hi aDog

    Ditto to that; that's how I learned, even though his tutorials (I think) are a bit outdated now
    Actually, I've already updated the introductory one to make it NN6 compliant and have begun adding new ones, so I no longer have to send people to www.pageresource.com and Ryan's dHTML tutorial (aDog's pseudonym

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

  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 Vincent Puglia
    Hi Maelstrom,

    re:


    [with humbleness] thank you

    Vinny
    My pleasure I actually first ran into you in the newsgroups...doubt you remember but you helped me out a lot about 5 months ago when I first started with JS.
    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 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 Maelstrom,

    ...ran into you in the newsgroups...doubt you remember ...about 5 months ago....
    Sorry to say, you're right; it's probably because my brain cells are calcifying at a progressively faster rate (aDog would agree).

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

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers guys, I'll check out the tutorials
    I'm sure Maelstrom's idea works, its just not quite what I need... or how I want to do it

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a stab at trying to write the script before I looked at the tutorial site and the site didn't really have what I wanted.
    this is the code I have so far.

    function infoWrite(p){
    if( p == 'clear' ){
    window.layers['infoSpan'].write('');
    }
    if( p == 'news' ){
    window.infoSpan.write('<a class="smallSilver">Any updates to the site, new developments etc are stored here.');
    }
    }

    as you can see I've tried two different ways of reffering to :

    <div id="infoSpan"></div>

    none of which are working...
    I'm I trying to do this the completly wrong way or am I just not accessing the DOM correctly?

  11. #11
    SitePoint Enthusiast RogueJedi's Avatar
    Join Date
    Oct 2001
    Location
    Texas
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was messing around with the DOM a while back and ran accross a tutorial on inserting text into a DIV using the DOM's insertTextNode method. I think this is what you are looking for. I don't recall where the tutorial was located, but I do still have the code I wrote while experimenting. It should not be a problem to alter it to do what you want:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    <script language="JavaScript" type="text/javascript">
    <!--Hide JS from decrepit browsers
    function addText(obj){
    	var txt = document.createTextNode(" This text was added to the DIV.");
    	obj.appendChild(txt); 
    }
    //-->
    </script>
    </head>
    
    <body>
    
    <div id="myDiv" onClick="addText(this)">Click Me!</div>
    
    </body>
    </html>
    Rob Nolan
    Do or do not, there is no try.

  12. #12
    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 darknessAwaits,

    the 'dHTML: an Introduction' script/tutorial at my site is more of a tutorial than a cut&paste script; you are expected to take what is taught and add it to what is known.

    At any rate...Is this what you are looking for?

    <a href="javascript:void()" onMouseover="changeTxt('div1',true)" onMouseout="changeTxt('div1',false)"><img src="http://members.aol.com/grassblad/images/grassAvatar.jpg"></a>
    <div id='div1' style="position:absolute;visibility:visible;top:80;left:0">
    This is the original text
    </div>
    <script language='javascript'>
    function changeTxt(divID, whichTxt)
    {

    var txt = (whichTxt) ? "This is the new text" : "This is some other text";
    if (document.layers)
    {
    document.layers[divID].document.open();
    document.layers[divID].document.write(txt);
    document.layers[divID].document.close();
    document.layers[divID].visibility = 'visible';
    }
    else if (document.all)
    {
    document.all[divID].innerHTML = txt;
    document.all[divID].style.visibility = 'visible';
    }
    else if (document.getElementById)
    {
    document.getElementById[divID].innerHTML = txt;
    document.getElementById[divID].style.visibility = 'visible';
    }
    }
    </script>

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

  13. #13
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I knew it wasn't cut and paste, I was trying to mess around with document.layers[divID].document.write(txt); but it wasn't liking it, I was prolly making a mistake. I also wouldn't have thought to put the if's in for other browsers... man I hate having to do that. Ne wayz, what you wrote looks like what I'm trying to do so I'll give it a go.
    Last edited by DarknessAwaits; Dec 12, 2001 at 18:14.

  14. #14
    SitePoint Enthusiast
    Join Date
    Dec 2001
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah lovely, its working, altho with a little tweaking cheers.
    Last edited by DarknessAwaits; Dec 12, 2001 at 18:27.


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
  •