#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Posts
    120
    Rep Power
    13

    javascript for toggling with a mouse click


    Hi there, could someone please help me write the code to toggle the visibility of an rollover-image with a mouseclick?

    I've created a sliced image in Imageready ( http://members.rogers.com/shawn.gibs...phy3/fake.html ) that has 5 trees (2 are showing now, usually only one in real life if I get it working).

    The Imageready software only allows any event to have one visibility, i.e., it either shows or hides, but doesn't toggle (show if hidden, hide of shown)

    Here is the code generated by Imageready to create a simple two state rollover with a click that shows an image over the original:


    http://members.rogers.com/shawn.gibs...raphy3/IR.html


    I'd like to go in and change the code (in GoLive5) where IR has included a mouse-click, I'd like it to state on a mouse click to toggle the visibility, i.e., if it's shown, clicking hides it, and vice versa.

    Any help would be greatly appreciated, as I've been pulling out my hair trying to learn javascript, but getting no where so far.

    shawn
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Any time I see 'CSStopExecution' I envision a last-minute call from the governor....maybe someone will help you edit that script, but here's a cross-browser something you might be able to adapt:

    Code:
    <html>
    <head>
    <title>untitled</title>
    <base href="http://forums.devshed.com/images/">
    <script type="text/javascript" language="JavaScript">
    
    function getElem(id) {
    return document.all ? document.all(id) :
    document.getElementById ? document.getElementById(id) :
    document.layers ? document.layers[id] :
    null;
    }
    
    function getVisibility(el) {
    if (el.style) {
    if (el.style.visibility && el.style.visibility != 'inherit') return el.style.visibility;
    if (el.currentStyle && el.currentStyle.visibility && el.currentStyle.visibility != 'inherit')
    return el.currentStyle.visibility;
    else while (el = el.parentElement) {
    if (el != null && el.style.visibility && el.style.visibility != 'inherit')
    return el.style.visibility;
    if (el != null && el.currentStyle && el.currentStyle.visibility && 
    el.currentStyle.visibility != 'inherit')
    return el.currentStyle.visibility;
    }
    } else if (document.layers) {
    if (el.visibility != 'inherit') return el.visibility;
    else while (el = el.parentLayer) {
    if (el != null && el.visibility != 'inherit') {
    return el.visibility;
    }
    }
    }
    return (!document.layers) ? 'visible' : 'show';
    }
    
    function toggleVis() {
    var currArg;
    for (var a=0; a<arguments.length; ++a) {
    currArg = arguments[a];
    var el = getElem(currArg);
    if (!el) return;
    if (el.style)
    el.style.visibility = (getVisibility(el) == 'visible') ? 'hidden' : 'visible';
    else if (document.layers)
    el.visibility = (getVisibility(el) == 'show') ? 'hide' : 'show';
    }
    }
    
    </script>
    </head>
    <body>
    <ilayer name="pic1" visibility="show">
    <img id="pic1" src="devtitle.gif">
    </ilayer>
    <ilayer name="pic2" visibility="show">
    <img id="pic2" src="devtitle.gif">
    </ilayer>
    <ilayer name="pic3" visibility="show" top="-60">
    <img id="pic3" src="devtitle.gif">
    </ilayer>
    <ilayer name="pic4" visibility="show" top="-60">
    <img id="pic4" src="devtitle.gif">
    </ilayer>
    <br><br>
    
    <a href="#" onclick="toggleVis('pic1');return false;"><img border="0" src="vb_bullet.gif"></a>
     1<br>
    <a href="#" onclick="toggleVis('pic2');return false;"><img border="0" src="vb_bullet.gif"></a>
     2<br>
    <a href="#" onclick="toggleVis('pic3');return false;"><img border="0" src="vb_bullet.gif"></a>
     3<br>
    <a href="#" onclick="toggleVis('pic4');return false;"><img border="0" src="vb_bullet.gif"></a>
     4<br><br>
    
    <a href="#" onclick="toggleVis('pic1','pic2','pic3','pic4');return false;"><img border="0" src="vb_bullet.gif"></a> all
    </body>
    </html>
    Last edited by mrrichardfeder; March 5th, 2002 at 06:07 PM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Posts
    120
    Rep Power
    13
    Thank you so much, Mr. Feder. This is so close to perfect, I actually understand what the code is doing for the most part too.

    I have a couple hundred states to work with here, but that's just labour...nothing wrong with that.

    The only thing I don't understand is regarding these lines:

    < a href="#" onclick="toggleVis('pic1');return false;">TOGGLE VIS 1< /a>< br>
    < a href="#" onclick="toggleVis('pic2');return false;">TOGGLE VIS 2< /a>< br>
    < a href="#" onclick="toggleVis('pic3');return false;">TOGGLE VIS 3< /a>< br>
    < a href="#" onclick="toggleVis('pic4');return false;">TOGGLE VIS 4< /a>< br>

    < a href="#" onclick="toggleVis('pic1','pic2','pic3','pic4');return false;">TOGGLE ALL< /a>< br>



    How could I change it so that instead of text "TOGGLE VIS 1" etc) it's an image which itself is part of the process. For example, it's the bullets in the dummy page I noted above which are actually doing the toggling.

    Could you give me the basic code of the "TOGGLE VIS" lines so that instead of text, it's an image itself which changes the toggling of the others as you've provided?

    I feel close to understanding enough to go into the code and start modifying for my treement, finally

    Thanks again

    shawn
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Just change this:

    <a href="#" onclick="toggleVis('pic1');return false;">TOGGLE VIS 1</a><br>

    ...to this:

    <a href="#"
    onclick="toggleVis('pic1');return false;"
    onfocus="this.blur()"><img width="image_width" height="image_height" border="0" src="image_url">
    </a>

    If you're just programming for IE, NS6 you can skip the link (<a>) altogether and just go <img........onclick="..etc.

    The 'focus/blur' business is optional, keeps Internet Explorer from leaving that attractive dotted line around the image...

    I re-posted above to illustrate (added something to the function as well)....cheers
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Posts
    120
    Rep Power
    13
    Thanks you VERY much Mr. Feder. You have taught me more in a couple hundred words than I've been able to learn in a few months of trying. Much appreciated.

    There's poetry in them code lines of yours

    I'll post my menu when I'm done (or when I get goo-goo-brained again LOL).

    shawn

IMN logo majestic logo threadwatch logo seochat tools logo