How would I write a script that would control aspects of a page when a DIV is in view?

So I have an ugly, pre design carousel at roseannebarr.tumblr.com and I plan to place a DIV in the carousel to the left, with a dedicated "About" button. When you click the About button I would like a "left" arrow to show up in it's place. Would I use if else stat开发者_开发问答ements? I have little experience in Javascript but I'm learning. Any help is appreciated.

Can't you just place a div like this with a javascript function?

Basically you put the div on the caraousel. This dis has a span with About which is clickable. If clicked it will call a js function.

The js function then drops a new image inside the span. You can make the image a hyperlink if needed.

<script type="text/javascript">
function ShowArrow(spn){
   document.getElementById(spn).innerHtml('<img src="path_to_your_image" />');
}
</script>

<div style="float:left">
  <span id="spnAbout" onclick="ShowArrow(this.id);return false;" style="background-color:#ccc;padding:5px;cursor:pointer">About</span>
</div>

If you use jquery, then your function will look like this:

function ShowArrow(spn){
   $('#'+spn).html('<img src="path_to_your_image" />');
}