HREF – Changing links and status message

[Total: 0    Average: 0/5]

This example allows links on the page to change what they do as the user moves the mouse over different things on the page.

Head Code:

<script>
// preload images
mypicOff = new Image();
mypicOff.src = "http://www.js-examples.com/js/pic1.gif";
mypicOn = new Image();
mypicOn.src = "http://www.js-examples.com/js/pic2.gif";
var tab = 1;

// define all links
// the first item in each new array is "" - it is not used!
var _links = new Array();
    _links[1] = new Array("","/","/","/","/","/","/");
    _links[2] = new Array("","/","/","/","/","/","/");
    _links[3] = new Array("","/","/","/","/","/","/");
    _links[4] = new Array("","/","/","/","/","/","/");
    _links[5] = new Array("","/","/","/","/","/","/");
    _links[6] = new Array("","/","/","/","/","/","/");
// define all status messages
var _stats = new Array();
    _stats[1] = new Array("","status 1-1","status 1-2","status 1-3","status 1-4","status 1-5","status 1-6");
    _stats[2] = new Array("","status 2-1","status 2-2","status 2-3","status 2-4","status 2-5","status 2-6");
    _stats[3] = new Array("","status 3-1","status 3-2","status 3-3","status 3-4","status 3-5","status 3-6");
    _stats[4] = new Array("","status 4-1","status 4-2","status 4-3","status 4-4","status 4-5","status 4-6");
    _stats[5] = new Array("","status 5-1","status 5-2","status 5-3","status 5-4","status 5-5","status 5-6");
    _stats[6] = new Array("","status 6-1","status 6-2","status 6-3","status 6-4","status 6-5","status 6-6");

function showStat(_v) {
window.status=_stats[tab][_v];
return true;
}
function goNow(_v) {
document.location=_links[tab][_v];
}

</script>

Body Code:

<table border="0" cellpadding="0" cellspacing="0" width="600">
  <tr>
    <td><a href="#" OnMouseOver="document.images['mypic'].src=mypicOff.src; tab = 1;">HEADER 1</a></td>
    <td><a href="#" OnMouseOver="document.images['mypic'].src=mypicOn.src;  tab = 2;"><img name = "mypic" border="0" src="http://www.js-examples.com/js/pic1.gif"></a></td>
    <td><a href="#" OnMouseOver="document.images['mypic'].src=mypicOff.src; tab = 3;">HEADER 3</a></td>
    <td><a href="#" OnMouseOver="document.images['mypic'].src=mypicOff.src; tab = 4;">HEADER 4</a></td>
    <td><a href="#" OnMouseOver="document.images['mypic'].src=mypicOff.src; tab = 5;">HEADER 5</a></td>
    <td><a href="#" OnMouseOver="document.images['mypic'].src=mypicOff.src; tab = 6;">HEADER 6</a></td>
  </tr>
  <tr>
    <td><a href="javascript:goNow(1)" onmouseover="return showStat(1)">LINK 1</a></td>
    <td><a href="javascript:goNow(2)" onmouseover="return showStat(2)">LINK 2</a></td>
    <td><a href="javascript:goNow(3)" onmouseover="return showStat(3)">LINK 3</a></td>
    <td><a href="javascript:goNow(4)" onmouseover="return showStat(4)">LINK 4</a></td>
    <td><a href="javascript:goNow(5)" onmouseover="return showStat(5)">LINK 5</a></td>
    <td><a href="javascript:goNow(6)" onmouseover="return showStat(6)">LINK 6</a></td>
  </tr>
</table>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *