Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    highlighting only the "last link visited"

    . . My website with "ideas for education" will have two sitemaps -- a diagram, and a text-outline -- each located in the left i-frame, with links opening in the right i-frame. My homepage promises that each sitemap will "show where where you've been (green links), where you are (red highlighting), and where you can go (blue links) in your explorations."
    . . The diagram-sitemap uses "swap images" (with code written by Dreamweaver) and 14 gifs, each with a red rectangle behind one of the 14 main links. (But it doesn't have green visited-links to show "where you've been.")
    . . In my text-sitemap, red-highlighting a visited link was easy, again by using DW's javascript tools. But this makes every visited link retain its red background, until the page re-loads. My goal is to red-highlight ONLY the last-visited link, to clearly show "where you are" in the sitemap.
    . . In one attempt to remove the red, I tried forcing a page-reload onMouseDown (with DW's "Go to URL") but DW refuses to recognize the sitemap's iframe (named "left") so it can only load the text-sitemap into a top-frame instead of the left iframe of its frameset. And this reload would be an awkward solution anyway, especially if a user has scrolled the page so the cursor would have to be moved back to the link for the onMouseUp part of clicking a link.
    . . A more elegant solution, found in a web-search, claims that "You can put an onclick event in all your links and then when the user clicks on a link, you can use the onclick event to call a function that changes that link's color to, say, green; and then uses the 'links' array to change all the other links to another color. The 'this' keyword can be used to identify the current link."
    . . This sounds promising, and JS-experts will see the two bold steps -- to "put..." and then "use..." -- and say "this is easy." But for me, doing these steps is a mystery I haven't solved. Some clues are below, gathered from various sources, but I don't know how to put it all together. A solution requires that everything is coded exactly the way it must be, with no mistakes, and I don't know how to do this.
    . . Here are some "pieces of the puzzle" that might be useful:

    . . Each sitemap has three areas, symbolized by colored page-backgrounds -- light blue & light green & yellow -- DDEEFF, DDFFEE, and FFFFBB. The js-code below, made in DW, works to change a link with red-background (from a previous link-click) to blue-background (onMouseDown) and back to red-background (onMouseUp).
    Code:
    <a href="blue1.htm" target="self" 
    onMouseDown="MM_effectHighlight(this, 1, '#DDEEFF', '#DDEEFF', '#DDEEFF', false)"
    onMouseUp="MM_effectHighlight(this, 4000, '#DDEEFF', '#FF9999', '#FF9999', false)">
    blue, then red</a>
    . . This works. But the challenge is to change OTHER links (not "this") from red to a color (blue, green, or yellow) that matches the page-background of the area where each link is. And for this I'm failing in two ways. First, I don't know how to make the link being clicked ("this") change the background-color of other links, by ""using the 'links' array to change all the other links to another color." Second, if I want to make three color changes (from red back to blue, or to green, or to yellow) the triple-change code below, which is the code above but with the onMouseDown line repeated 3 times, doesn't work in DW:
    [a comment added January 7: I've now abandoned this triple-change idea, and instead I want all links changed (onMouseDown) to a GOLD background-highlighting in a link-rectangle that surrounds each of the 14 main-topic links, but not the 40 sub-topic links.]
    Code:
    <a href="blue1.htm" target="self" 
    onMouseDown="MM_effectHighlight(this, 1, '#DDEEFF', '#DDEEFF', '#DDEEFF', false)"
    onMouseDown="MM_effectHighlight(this, 1, '#DDFFEE', '#DDFFEE', '#DDFFEE', false)"
    onMouseDown="MM_effectHighlight(this, 1, '#FFFFBB', '#FFFFBB', '#FFFFBB', false)"
    onMouseUp="MM_effectHighlight(this, 4000, '#DDEEFF', '#FF9999', '#FF9999', false)">
    blue-green-yellow, then red</a>
    . . Imagine that two links (blue0.htm, blue1.htm) are in a blue-background area of the text-sitemap, while two other links (2,3) are in a green-background area, and two links (4,5) are in a yellow-background area. By copying the code I found in another page, I think the code below might describe the links-array I want. But this raises two more problems: Third, the array probably contains errors or omissions. Fourth, even if it was correct, I don't know where to put it: in the head section? body section? inside the js-code for a link? if yes, would I have to repeat this code for each of the 14 main links, or should I write it once (with a name) and then "call up" this name for each of the 14 links. These are things an expert will know, but I don't.
    Code:
    <div class="box_broadstyle"><script>
    var linksArray = new Array();
    links[0] = "blue0.htm"; 
    links[1] = "blue1.htm"; 
    links[2] = "green2.htm";
    links[3] = "green3.htm";
    links[4] = "yellow4.htm";
    links[5] = "yellow5.htm";
    </script></div>
    . . And I think the code below might be useful to make a "for loop" to control the triple-change by telling the browser which links (0 and 1) should have blue-highlighting (ending with #DDEEFF), and which (2,3) should end with green, and which (4,5) will be yellow. But... Fifth, I don't know if this code is correct or (a tougher challenge) where to put it so it will be functional.
    Code:
    for (y=0;y<=1;y++)
    for (y=2;y<=3;y++)
    for (y=4;y<=5;y++)
    . . Thanks for your patience in reading through this question, which is long because I've tried to clearly describe my goals and what I think might be parts of a solution. Any help in solving these mysteries (first, ... fifth) will be greatly appreciated.
    CraigR
    Last edited by craigr7; 01-08-2012 at 04:02 AM. Reason: after one coding-section, I explained that now I want only ONE color change (to gold) instead of three

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    well, here's a wild swing... I was a little swamped by the detail in your question, and I'm sure I misunderstood because what this does is turn the last link visited red and all the other ones the same color as their background.

    but being that the text is the same color as the background, they become invisible...

    hence the "sure I misunderstood" bit. But this may be a start, anyway. Let me know where I went wrong...

    Code:
    <html>
    <head>
    
    </head>
    <body>
    <div id="blue" style="background-color:#DDEEFF"><a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a><br>
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a></div>
    <div id="yellow" style="background-color:#FFFFBB">
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a><br>
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a>
    </div>
    <div id="green" style="background-color:#DDFFEE">
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a><br>
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a>
    </div>
    <script language="javascript">
    function changeCol(thelink){
    links=document.getElementsByTagName("a")
    for (var i=0; i<links.length; i++) {
    links[i].style.color=links[i].parentNode.style.backgroundColor
    }
    thelink.style.color="#FF0000";
    }
      </script>  
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the helpful reply, xelawho. The code you share does a very important thing, and I'll ask about it later. First, though, I'll try to clarify my goals. You say,
    >I was a little swamped by the detail in your question,
    . . I apologize for the length of my post. (and this one) I was trying to be clear about the context, but didn't explain an important part clearly (oops) because...
    >being that the text is the same color as the background, they [the links] become invisible...
    . . Yes, that would be strange way to make the links look! :<)
    . . Instead of assuming that "blue highlighting" has only one meaning, I should have explained the meaning I intended. This highlighting is not with light-blue text, it's with a light-blue background in a small rectangle wrapped around the text, as with this HTML code:
    <span style="background-color: #CCDDFF">link-text surrounded by light blue link-rectangle</span>
    . . onMouseDown, I wanted all of the light blue link-rectangles to become invisible because they blend with the light blue background of the table cell. Then onMouseUp, the one link being clicked would be highlighted with a red link-rectangle. For all links, the link-text will be blue (#0000FF) for unvisited links to show "where you can go", and green (#009900) for visited links to show "where you've been."

    . . Here is another clarification: The text-sitemap will have 14 links for main-topics, and other links (roughly 40) for sub-topics.
    . . And a change of mind: Now I want all 14 links to begin with bright gold link-rectangles (maybe #FFDD00) surrounding them. Then, onMouseUp all 14 of the main-topic links (but not the 40 sub-topic links) will have their gold link-rectangle restored (*), and onMouseUp the one link being clicked will have its gold link-rectangle converted into a red link-rectangle. (* Before the onMouseDown event, 13 of the link-rectangles will be gold, and the last-visited link will have a red link-rectangle, so only it will be "restored"; but after onMouseDown all 14 will be gold, until the onMouseUp event changes that one link's rectangle to red.)
    . . This change of mind simplifies one thing: only one action-event is needed because all 14 link-rectangles will change to gold onMouseDown, instead of "some to blue, some to green, some to yellow" as in my earlier plan.
    . . But in my first post I forgot to mention the complication of having to distinguish between the 14 main-topic links (that will be highlighted with link-rectangles, either gold or red) and the 40 sub-topic links that won't have link-rectangles. So the action to "make the link-rectangle gold" should happen for only the 14 main-topic links (topic0.htm,... topic13.htm) but not the 40 sub-topic links.

    . . You say "this may be a start" and, yes, putting this code into the page-body did the main thing I want -- thank you! -- because clicking one link makes things happen (it changes the text color) in OTHER links. But "why" is still a mystery for me, due to my lack of expertise. The most interesting parts of the code (at least for my inexperienced mind) are highlighted below, in bold (for the on-click command within each link) and red (to define the action referred to in this command), green and blue (to specify which links should be changed by the command-action), and purple (to specify the color each link-text will become, which is the background-color in the div where it's located).

    Code:
    <body>
    <div id="blue" style="background-color:#DDEEFF">
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a><br>
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a></div>
    <div id="yellow" style="background-color:#FFFFBB">
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a><br>
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a></div>
    <div id="green" style="background-color:#DDFFEE">
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a><br>
    <a href="http://google.com" style="color:#00FF00" target="_blank" onclick="changeCol(this)">google</a>
    </div>
    <script language="javascript">
    function changeCol(thelink){
    links=document.getElementsByTagName("a")
    for (var i=0; i<links.length; i++) {
    links[i].style.color=links[i].parentNode.style.backgroundColor
    }
    thelink.style.color="#FF0000";
    }
    </script> 
    </body>
    . . DW's javascript-writing tool includes an action-command that does the two things I want: it instantly (in 1 ms) changes the link-rectangle background color to gold (onMouseDown) and then (onMouseUp) the link-rectangle changes to red gradually, during 4000 ms = 4 seconds. Here is the code, which is the same as in my first post except with revised colors:
    Code:
    <a href="topic3.htm" target="self" 
    onMouseDown="MM_effectHighlight(this, 1, '#FFDD00', '#FFDD00', '#FFDD00', false)"
    onMouseUp="MM_effectHighlight(this, 4000, '#FFDD00', '#FF4477', '#FF4477', false)">
    link-rectangle becomes gold, then red</a>
    . . My main questions are about how to distinguish between links (main-topic vs sub-topic), and also between actions (first action vs second action) when the same function (MM_effectHighlight) is being used for both actions:
    . . How can the first action (onMouseDown) be done for each of the 14 main-topic links (topic0.htm,... topic13.htm) but not the 40 sub-topic links (subtopic14.htm,... subtopic53.htm), while the second action (onMouseUp) is done for only the link being clicked.
    . . And if DW's action-command (MM_effectHighlight) cannot be used for both actions, could some type of "function" (analogous to "changeCol" in your example) be used for the first "general" action on all 14 links? And in either case, how should the special code (to "cause action in other links") be written, and where should it be placed?
    CraigR

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I think I get it now. So the links don't change color (except for the clicked one turning red, which then turns blue again when another is clicked) but the spans do?

    Taking it step by step:
    On page load: all spans are gold, all link text is blue
    On mousedown on a link: all spans turn the same color as the page background (light blue?)
    On mouseup on a link: all spans turn gold, except for the one containing the clicked link, which turns red (the span that is). The clicked link text color remains the same (blue)

    On mousedown on a different link, the span that was red reverts to gold and the span containing the clicked link changes to red

    and so on...

    am I close?

  • #5
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hello again, xelawho,
    >I think I get it now. ... am I close?
    . . Mostly, except for this, because I decided to abandon it:
    >On mousedown on a link: all spans turn the same color as the page background (light blue?)
    . . In my revised plan, here is a summary of what I want:

    Initially,
    . . the 14 main-topic links are surrounded by a GOLD link-rectangle background.
    Two things will never change:
    . . different areas of the page have colored backgrounds (blue, green, yellow) but these are passive -- they never change, so they can be ignored;
    . . the 40 sub-topic links have no link-rectangle, and never will, but preventing these link-rectangles probably requires clever coding -- maybe by making a links-array with the 14 main-topic links, so actions can be applied to only these 14?
    After one or more links have been clicked,
    . . 13 main-topic links have a GOLD link-rectangle, and 1 main-topic link (last one clicked) has a RED link-rectangle;
    . . all non-visited links (14+40) have blue text, all visited links (14+40) have green text; these colors are controlled by standard HTML, and are not a problem.
    onMouseDown,
    . . the command-function action makes the 14 main-topic links -- the one being clicked plus the other 13 (12 already were gold, and 1 was red) -- have a GOLD link-rectangle.
    . . The 40 sub-topic links should not be involved in either the onMouseDown action, or the onMouseUp action.
    onMouseUp,
    . . the link being clicked has its link-rectangle changed from GOLD to RED.

    . . Currently I have all of this except for the onMouseDown action that "makes the 14 main-topic links... have a GOLD link-rectangle" while "the 40 sub-topic links should not be involved" and these are the unsolved problems. To solve them, some bits & pieces that might be useful (or maybe not) are in my first post.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    ah. It's simpler than it sounded. Like this, maybe:

    Code:
    <html>
    <head>
    <style>
    a:link {color:#0000FF;}
    a:visited {color:#009900;}
    body{
    background-color: #CCDDFF;
    }
    .main{
    background-color: #FFDD00;
    }
    .sub{
    background-color: #FF00FF;
    }
    </style>
    </head>
    <body>
    <div id="time"></div>
    <span class="main"><a href="http://google.com" target="_blank" onmousedown="downMouse()" onmouseup="upMouse(this)">google</a></span>  <span class="sub">sub category</span><br>
    <span class="main"><a href="http://yahoo.com" target="_blank" onmousedown="downMouse()" onmouseup="upMouse(this)">yahoo</a></span>  <span class="sub">sub category</span><br>
    <span class="main"><a href="http://codingforums.com" target="_blank" onmousedown="downMouse()" onmouseup="upMouse(this)">coding forums</a></span>  <span class="sub">sub category</span><br>
    <span class="main"><a href="http://facebook.com" target="_blank" onmousedown="downMouse()" onmouseup="upMouse(this)">facebook</a></span>  <span class="sub">sub category</span><br>
    
    <script type="text/javascript">
    function downMouse(){
    els=document.getElementsByTagName("span")
    for (var i=0; i<els.length; i++) {
    if (els[i].className=="main"){
    els[i].style.backgroundColor="#FFDD00"
    		}
    	}
    }
    
    function upMouse(clicked){
    clicked.parentNode.style.backgroundColor="#FF0000"	
    }
    </script>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    craigr7 (01-09-2012)

  • #7
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This works, and does what I want. Thank you!
    I tried moving the code into my web-page, and some things work but others don't. Tonight I'll continue experimenting, to see what (in my page and how I'm using your code) is causing the problems.

  • #8
    New Coder
    Join Date
    Dec 2011
    Location
    Madison, WI
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    After getting back to revising the sitemap-page, I quickly found my mistake in transferring your code, then fixed it. Everything works like I want, so the sitemap will show the main topics (gold highlighting) plus "where where you've been (green links), where you are (red highlighting), and where you can go (blue links) in your explorations."
    . . I sincerely appreciate your patience (reading my long posts), perseverance (asking questions until I finally explained my revised goals clearly), expertise (knowing code that works, and adjusting it for what I wanted), and thoughtfulness (investing the time to help). Thanks!

    . . And I have one more question: Is there a way to revise the function for onMouseUp so it makes the red-highlighting slowly increase? When using the Dreamweaver-javascript I set the onMouseDown gold-rectangle for instant change (1 ms) but the onMouseUp red-rectangle change was gradual, taking 5 seconds (5000 ms) or longer.
    . . If this fade-in isn't possible, I'm happy with what you gave me. But if the red can gradually increase, that would be a nice visual effect.

    CraigR

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by craigr7 View Post
    And I have one more question: Is there a way to revise the function for onMouseUp so it makes the red-highlighting slowly increase?
    there is, and I'll get to that. But I was looking at your code and realised that, in simplifying the concept we can simplify the code, too. Basically, before we changed all of the spans to gold regardless of if they were gold or not. But all we really need to do is remember which one was red, turn that to gold, then turn the latest one that was clicked to red. Which is in the code below. The javascript is simpler and the html remains almost the same. More on that later, too.

    As to the transition, I take no credit for this at all - I very minorly adpated Old Pedant's function from here which I am nowhere near smart enough to have come up with on my own. The one thing about this is that due to the intricacies of the calculations (which Old Pedant patiently explained to me and I very vaguely understood), there's a problem with using pure red (#FF0000) as the color you are transitioning to. So the workaroud is to use nearly-pure red(#FE0000) which is so close that I can't see the difference.

    I also had a problem keeping the mousedown and mouseup routines - basically, with the transition if you clicked a link too quickly after clicking the first one they both turned red. So I made an executive decision and folded it all into the onmouseup function. You could use onmousedown for this, or onclick, but I can't get it to work turning one (or all) gold on mousedown and then fading only one to red on mouseup if the clicks happen in quick succession. If it's important, maybe someone else can. That's the only change I made to the html, anyway - none of the links have onmousedown attributes now.

    Anyway. Looks like I've caught the long-post bug Here's the code. Let me know if it works as expected. You can change the speed of the transition with the number in the timer setInterval. 10 seems about right to me.

    Code:
    <html>
    <head>
    <style>
    a:link {color:#0000FF;}
    a:visited {color:#009900;}
    body{
    background-color: #CCDDFF;
    }
    .main{
    background-color: #FFDD00;
    width:200px;
    }
    .sub{
    background-color: #FF00FF;
    }
    </style>
    </head>
    <body>
    <div id="time"></div>
    <span class="main"><a href="http://google.com" target="_blank" onmouseup="upMouse(this)">google</a></span>  <span class="sub">sub category</span><br>
    <span class="main"><a href="http://yahoo.com" target="_blank" onmouseup="upMouse(this)">yahoo</a></span>  <span class="sub">sub category</span><br>
    <span class="main"><a href="http://codingforums.com" target="_blank" onmouseup="upMouse(this)">coding forums</a></span>  <span class="sub">sub category</span><br>
    <span class="main"><a href="http://facebook.com" target="_blank" onmouseup="upMouse(this)">facebook</a></span>  <span class="sub">sub category</span><br>
    
    <script type="text/javascript">
    
    var redspan=false;
    
    function upMouse(clicked){
    if (redspan){redspan.style.backgroundColor="#FFDD00"}
    redspan=clicked.parentNode;
    fadein=new Fademe( redspan, 0xCCDDFF, 0xFE0000 )
    changeCount = 0;
    timer = setInterval( change, 10);
    }
    	
    	function Fademe( obj, start, finish )
    {
        this.object = obj;
        this.first  = start;
        this.last   = finish;
        this.r = ( (finish & 0xff0000) - (start & 0xff0000) ) / 300;
        this.g = ( (finish & 0x00ff00) - (start & 0x00ff00) ) / 300;
        this.b = ( (finish & 0x0000ff) - (start & 0x0000ff) ) / 300;
    }
    
    var changeCount;
    var timer;
    var fadein;
    
    function change( )
    {
        ++changeCount;
        if ( changeCount > 300 )    {
    	clearInterval(timer);
    	    return;
        }
            var me = fadein;
            var red   = Math.floor( changeCount * me.r ) & 0xff0000;
            var green = Math.floor( changeCount * me.g ) & 0x00ff00;
            var blue  = Math.floor( changeCount * me.b ) & 0x0000ff;
            var color = 0x1000000 + me.first + red + green + blue;
            color = color.toString(16).substring(1);
            me.object.style.backgroundColor = "#" + color;
    }
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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