> I really like how this site has the image changing as you roll over the
bulleted
> items. Does anyone know how they did this? I think it is a nice little
feature.
> http://dts.edu/
They used javascript on an onLoad function to attach events to the list(s):
>From purplescript.ashx:
function setupList(listID) {
var listCell = document.getElementById(listID);
var targetImage = null;
var list = null;
// get the image and the list from within the cell
for (var i=0; i<listCell.childNodes.length; i++) {
var node = listCell.childNodes[i];
//alert(node);
if (!node.tagName) continue;
if (node.tagName.toUpperCase() == "IMG")
targetImage = node;
if (node.tagName.toUpperCase() == "UL")
list = node;
}
// go through list and attach events to list items
var firstImage = null;
var foundFirstLink = false;
for (var i=0; i<list.childNodes.length; i++) {
var listItem = list.childNodes[i];
if (!listItem.tagName) continue;
var innerImage = null;
var innerLink = null;
for (var j=0; j<listItem.childNodes.length; j++) {
var inner = listItem.childNodes[j];
if (!inner.tagName) continue;
if (inner.tagName.toUpperCase() == "IMG")
innerImage = inner;
if (inner.tagName.toUpperCase() == "A") {
innerLink = inner;
if (!foundFirstLink) {
innerLink.parentNode.className='selectedItem';
foundFirstLink = true;
}
}
}
// attach objects to the link so it knows what to do
listItem.highlightImage = innerImage;
listItem.firstImage = firstImage;
if (firstImage == null) {
firstImage = innerImage;
listItem.onmouseover = function() {
targetImage.src = this.highlightImage.src;
this.className = 'selectedItem';
}
} else {
// select this item
listItem.onmouseover = function() {
targetImage.src = this.highlightImage.src;
targetImage.alt= this.highlightImage.alt;
this.className = 'selectedItem';
//alert(this.firstImage.parentNode);
this.firstImage.parentNode.className = '';
//Effect.SwitchOff(this);
}
// reset to the first item being selected
listItem.onmouseout = function() {
targetImage.src = this.firstImage.src;
targetImage.alt = this.firstImage.alt;
this.className = '';
this.firstImage.parentNode.className =
'selectedItem';
}
}
}
};
window.onload = function() {
setupList('list1');
setupList('list2');
setupList('list3');
setupList('list4');
setupList('list5');
};
>From the page itself:
<td class="bordered" id="list1">
<h3><a href="/about/sites/">DTS Family</a></h3>
<img src="images/fp-ccl2.jpg" alt="Center for Christian
Leadership" />
<ul class="list">
<li class="selectedItem"><a href="/ccl/">Center
for Christian Leadership</a><img alt="Center for Christian Leadership"
src="images/fp-ccl2.jpg" /></li><li><a href="http://www.dsfplan.org/";>Dallas
Seminary Foundation</a><img alt="Dallas Seminary Foundation"
src="images/fp-dsf.jpg" /></li><li><a href="http://bookcenter.dts.edu/";>DTS
Book Center</a><img alt="DTS Book Center" src="images/fp-bookcenter.jpg"
/></li><li><a href="http://library.dts.edu/";>DTS Library</a><img alt="DTS
Library" src="images/fp-library.jpg" /></li><li><a
href="/departments/campus/cbs/">Lifelong Learning (CBS)</a><img
alt="Lifelong Learning (CBS)" src="images/fp-cbs.jpg" /></li>
</ul>
</td>
...
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
