[RESOLVED] onMouseover array?

**MrMcCoy** · 02-20-2013, 11:09 AM

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

**JMRKER** · 02-20-2013, 11:18 AM

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>

**MrMcCoy** · 02-20-2013, 11:41 AM

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."

**MrMcCoy** · 02-20-2013, 11:55 AM

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

**JMRKER** · 02-20-2013, 01:28 PM

Originally Posted by MrMcCoy

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>

**MrMcCoy** · 02-21-2013, 02:28 PM

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

**JMRKER** · 02-21-2013, 03:17 PM

Originally Posted by MrMcCoy

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!

Thread: [RESOLVED] onMouseover array?

Thread Tools

Display

Hybrid View

[RESOLVED] onMouseover array?

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions