www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] onMouseover array?

  1. #1
    Join Date
    Feb 2013
    Posts
    7

    resolved [RESOLVED] onMouseover array?

    Hi

    Basically I have a load of anchors (over 100) and I also have a small div that needs to be populated with unique text each time one of the links is clicked.

    What would be the best way of doing this? It's always the same box that is populated with text. It's just the text that changes depending on which link is clicked.

    If someone could point me in the right direction that would be great. My JavaScript skills aren't too good.

    TIA
    McCoy

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261
    Can you provide a BRIEF example of the messages you wish to display based on the anchor displays?

    Your JS skills don't need to be good at this time (we expect you to get better)
    but you can at least provide the layout positions and sizes of the display you wish to manipulate.

    Could be something as simple as:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    var anchorMessages = [ '',
      'Message 1',
      'Message 2',
      'Message 3',
      'Message 4',
      'Message 5',
      'Message 6',
      'Message 7',
      'Message 8',
      'Message 9'
    ];
    function changeMessage(msgNo) {
      document.getElementById('messageDisplay').innerHTML = anchorMessages[msgNo];
    }
    </script>
    
    </head>
    <body>
    <div id="messageDisplay" style="background-Color:yellow; height:50px; width:200px"></div>
    <p>
    <a href="#" onmouseover="changeMessage(1)" onmouseout="changeMessage(0)">Anchor 1</a>
    <a href="#" onmouseover="changeMessage(2)" onmouseout="changeMessage(0)">Anchor 2</a>
    <a href="#" onmouseover="changeMessage(3)" onmouseout="changeMessage(0)">Anchor 3</a><p>
    <a href="#" onmouseover="changeMessage(4)" onmouseout="changeMessage(0)">Anchor 4</a>
    <a href="#" onmouseover="changeMessage(5)" onmouseout="changeMessage(0)">Anchor 5</a>
    <a href="#" onmouseover="changeMessage(6)" onmouseout="changeMessage(0)">Anchor 6</a><p>
    <a href="#" onmouseover="changeMessage(7)" onmouseout="changeMessage(0)">Anchor 7</a>
    <a href="#" onmouseover="changeMessage(8)" onmouseout="changeMessage(0)">Anchor 8</a>
    <a href="#" onmouseover="changeMessage(9)" onmouseout="changeMessage(0)">Anchor 9</a><p>
    </body>
    </html>
    Last edited by JMRKER; 02-20-2013 at 11:26 AM.

  3. #3
    Join Date
    Feb 2013
    Posts
    7
    Hi JMRKER, thanks for your speedy response!

    I tried to keep the first post quite simple, sorry I should probably of added more information

    Basically it's map with markers. When someone clicks a marker on the map, I want some text to come up about that specific location. The text appears in a div to the left of the map. I can upload a picture if that helps.

    I've done the markers as anchors, which I've positioned using css. Each of them has the css class of .marker, and all have a unique id like this #m1, #m2, #m3 etc.

    Here's an example of the text I want to appear:

    "2 Former schools Chalveden and Barstable were merged to provide a split campus academy comprising Lower and Upper Schools across Key Stages 3-5. PEL provided a learning infrastructure design to support accelerated and personalised learning across a 2km radius which included 1Gb fibre connectivity between sites to support an integrated Learning Platform and MIS system; community WiFi and leading edge curriculum, teaching and learning resources."

  4. #4
    Join Date
    Feb 2013
    Posts
    7
    As for the code that looks about right, thanks for your help. Would it be better to put the onMouseover on the actual anchors or is there any way I can have the JavaScript loop through all the ID's of the anchors?

    It's just that I have over 100 anchors and I'm thinking it might save some time.

    Also a bit more background on the project. It's basically a map with markers, when someone clicks on one of the markers I want some text to come up about that specific location. The text appears in a div to the left of the map. I can upload a picture if it helps.

    Thanks again.
    McCoy

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261
    Quote Originally Posted by MrMcCoy View Post
    As for the code that looks about right, thanks for your help. Would it be better to put the onMouseover on the actual anchors or is there any way I can have the JavaScript loop through all the ID's of the anchors?

    It's just that I have over 100 anchors and I'm thinking it might save some time.

    Also a bit more background on the project. It's basically a map with markers, when someone clicks on one of the markers I want some text to come up about that specific location. The text appears in a div to the left of the map. I can upload a picture if it helps.

    Thanks again.
    McCoy
    Pictures are always helpful. Worse than actual code, but better than non-descriptive words!

    Here is an event assignment for each of the 100 anchors example.
    I added the colors just for a diversion.
    Remove them if desired as they are not necessary to the request.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    #messageDisplay {  background-Color:yellow; height:50px; width:200px; }
    </style>
    
    <script type="text/javascript">
    var anchorMessages = [ '',
      'Message 1',
      'Message 2',
      'Message 3',
      'Message 4',
      'Message 5',
      'Message 6',
      'Message 7',
      'Message 8',
      'Message 9'
    ];
    var roygbiv = ['white','red','orange','yellow','green','blue','lightblue','pink','lime','cyan'];
    
    function changeMessage(msgNo) {
      document.getElementById('messageDisplay').innerHTML = anchorMessages[msgNo];
      document.getElementById('messageDisplay').style.backgroundColor = roygbiv[msgNo];
    }
    </script>
    
    </head>
    <body>
    <div id="messageDisplay"></div>
    <div id="anchors">
    <a href="#">Anchor 1</a>  <a href="#">Anchor 2</a>  <a href="#">Anchor 3</a><p>
    <a href="#">Anchor 4</a>  <a href="#">Anchor 5</a>  <a href="#">Anchor 6</a><p>
    <a href="#">Anchor 7</a>  <a href="#">Anchor 8</a>  <a href="#">Anchor 9</a><p>
    </div>
    
    <script type="text/javascript">
    window.onload = function() {
      var sel = document.getElementById('anchors').getElementsByTagName('a');
      for (var i=0; i<sel.length; i++) {
        sel[i].value = (i+1).toString();
        sel[i].onmouseover = function() { changeMessage(this.value); }
        sel[i].onmouseout = function() { changeMessage(0); }  // comment out to make message stick
      }
    }
    </script>
    
    </body>
    </html>

  6. #6
    Join Date
    Feb 2013
    Posts
    7
    Great, managed to get it working using your first example!

    I've got a new problem now but I'll start a new thread for it.

    Thanks for all your help.
    McCoy

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261

    Thumbs up

    Quote Originally Posted by MrMcCoy View Post
    Great, managed to get it working using your first example!

    I've got a new problem now but I'll start a new thread for it.

    Thanks for all your help.
    McCoy
    You're most welcome.
    Happy to help.

    Add a link to the new thread, if desired, so we can follow your progress.
    You should mark this thread as resolved if no further action is wanted.

    Note that the second version does the same as the first, just allows you less typing.
    For me, the last statement relates to fewer mistakes and less code to look at when debugging.

    It is relatively easy to remove the colors from the 2nd version if that bothers you.
    Just compare the common code between the 2 versions.

    Good Luck!

  8. #8
    Join Date
    Feb 2013
    Posts
    7
    Quote Originally Posted by JMRKER View Post
    You're most welcome.
    Note that the second version does the same as the first, just allows you less typing.
    For me, the last statement relates to fewer mistakes and less code to look at when debugging.
    Yea thanks I will look into it in more depth soon, I've got a client who is "eager" to see some progress so unfortunately for now I'm just focusing on getting an example working.

    New thread here: http://www.webdeveloper.com/forum/sh...blem&p=1251759

    Thanks for your help. I'll mark this thread as resolved now.
    McCoy

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles