Put new content into div ?On mouseOver

JavaScript
1

My first stab at using js…please be kind :xeye:

I would like to change the content of a ‘DIV’ using ‘onClick’ or ‘mouseOver’ using 5 navigation links…I wish to be able to change the content of my main DIV ( div id="ComText )
…with the 5 links’ corresponding HTML …that i wish to store …well i dunno where…lol

<script language=“JavaScript” type=“text/javascript”>
<!–

navbut1 = " can this be a div ???'";
navbut2 = “Item 2”;

function changeCode() {
document.getElementById(“comText” ).innerHTML = navbut1,navbut2;
}

//–>
</script>
</head>
<div id=“ComText”>blah blahh</div>

<div id="NavigationLINKS>
<ul>

<li class=“ul”> <a href=“javascript:;” onMouseover=“changeCode()” id=“navbut1” >link1</a> </li>
<li class=“ul”> <a href=“javascript:;” onMouseover=“changeCode()” id=“navbut2”>link2</a> </li>
<li class=“ul”> <a href=“javascript:;” onMouseover=“changeCode()” class=“navbut”>link3</a> </li>
<li class=“ul”> <a href=“javascript:;” onMouseover=“changeCode()” class=“navbut”>link4</a> </li>
<li class=“ul”> <a href=“javascript:;” onMouseover=“changeCode()” class=“navbut”>link5</a> </li>
<ul>
</div>

Question ?

…where do i store 5 x HTML content ?(They are <div id=“link1”> ect.)

…can the 5 seperate link’s html be stored as an array that may be called upon ?

So far it…Im stuck now …

@@A good old shove in the right direction is what I need…!!@@

2

Well, there’s always more than one way to skin a cat, but here’s one method. First of all, I changed your <a> tags to <span> tags because you really don’t have links there, so the use of anchor tags is inappropriate. Also, you should change your DIV’s id to be more semantically accurate. Anyhow, here’s what I got

<html>
<head>
<style type="text/css">
 div#someOtherId span {
  cursor: pointer;
  text-decoration: underline;
  }
</style>
<script type="text/javascript" language="javascript">
function changeCode( id )
{
 document.getElementById( "comText" ).innerHTML = document.getElementById( "content" + id ).innerHTML;
}
</script>
</head>
<body>
<div id="someOtherId">
<ul>
 <li class="ul"> <span onMouseover="changeCode(1)">link1</span> </li>
 <li class="ul"> <span onMouseover="changeCode(2)">link2</span> </li>
 <li class="ul"> <span onMouseover="changeCode(3)">link3</span> </li>
 <li class="ul"> <span onMouseover="changeCode(4)">link4</span> </li>
 <li class="ul"> <span onMouseover="changeCode(5)">link5</span> </li>
<ul>
</div>
<div id="ComText">blah blahh</div>
<div style="display:none">
 <div id="content1">
  This is some <b>content</b>
 </div>
 <div id="content2">
  <p>This <em>is</em> some more content.
 </div>
 <div id="content3">
  Wheehee, number three!
 </div>
 <div id="content4">
  Ok, I'm running out of things to say
 </div>
 <div id="content5">
  Ok, now I'm really out, and done! <b>Yay!</b>
 </div>
</div>
</body>
</html>
3

Hey great…thanks Beetle :slight_smile:

Yes, works great…and so tidy

I’ve got lots to learn now, this has helped me…even though I don’t understand how?.. Yet!

Going to try and work out this sequence

function changeCode( id )
{
document.getElementById( “comText” ).innerHTML = document.getElementById( “content” + id ).innerHTML;
}

I don’ understand the relationship’s yet, but soon will.

Thanks

4